Everytime I share a link on facebook from my site, http://reviewsie.com, the twitter thumbnail is selected as the image thumbnail. (This also happens in pinterest and some of my ad tools.) How do I make a certain image stand out and get selected correctly?
You need to set this meta tag in your head
<meta property="og:image" content="http://yourdomain.com/image.jpg"/>
you need to use the Open Graph Protocol.
To check how Facebook sees your page, use the URL Checker tool at:
https://developers.facebook.com/tools/debug
for your own example, check the tool with your url
and you can find that you are not using the OGP and for such, it simply randomly selects one picture.
and it reminds you about it:
Inferred Property: The og:image property should be explicitly provided, even if a value can be inferred from other tags
If it's still showing old thumbnail, you need to refresh it on https://developers.facebook.com/tools/debug/
Enter your web site link and debug. After that you'll see 'Scare again' button there.
Related
I have a blogger website that I have recently migrated to amp-html.
I am having problems with the usage of amp-img tag. Firstly blogger does not recognize the First amp-img as the first image of the post and fails to make the default thumbnail out of it.
Also when sharing a page on facebook using amp-share, the selected image is invariably the fallback image, that I have tagged with og:image property.
The image resolution is more than the minimum mandated by facebook.
I have seen this arrangement working fine on other websites. Can someone please have a quick look here: Pratyush.info
A few days after posting this question I discovered that adding a noscript makes the image identifiable by blogger and can be used with data tags. So till google adds some inbuilt support for amp tags, may be this could be what someone is looking for.
<noscript><img alt="www.pratyush.info" height="382" src="https://lh3.googleusercontent.com/--vp_bO1ozGI/WPegTDKQJDI/AAAAAAAADnQ/FXdCyVKJkTwEj09XneY7csB2Vwd_zVQrQCLcB/milk-protein-intolerance-baby-cow-2160x1200.jpg" title="www.pratyush.info" width="680"></noscript>
DEMO
I think your problem is that your meta tag is incorrect, in the link you post is
<meta content='https://1.bp.blogspot.com/-agH78RbEntg/WMFULOdxPMI/AAAAAAAADUI/0zId8itGNnA8GawUbVZqeewxq1DzGumyACLcB/s1600/pratyush.info-default-news.jp' property='og:image'/>
Although the url is an image, the extension is not valid, try to change the name of the image to a valid image extension, like png or jpg
The data layout tag data:post.firstImageUrl include in the <head> tag will always return empty because the the post namespace is only defined within the the statement <b:loop values='data:posts' var='post'> which is present inside the Blog widget
Instead, you will have to use the data layout tag data:blog.postImageUrl in the og:image tag to get a high-resolution image. The code will be like -
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
Recently Google has added a new interface when users click the star icon in the address bar to add a website to their bookmarks.
The UI displays the page title as well as anything from the meta description element if present, but I was wondering if there's a way to set the image that's displayed, or whether this is just purely decorative on Chrome's part:
It seems to be some datas included in the head part of the pages.
You probably know that you can use meta tags to set some favicon, gps coordinates, and many other things.
Some new tags, the Opengraph meta tags, are now used to define some informations to best describe the content of the website you're browsing. For example, on facebook, when you share a link, these opengraph datas are used to create a small block which summarize and show a picture of the linked website.
So, to be clear and to speak about code, just try with this line in your head section:
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
Tried it while writing this post on a little static website I'm working on, seems to work prefect !
It's looks like Google collect all images on the webpage et allow you to choose which one you want for your bookmark.
What code elements do I need to add/modify on a Web page to ensure that it gets embedded properly on a facebook status update?!
See below for an example of what I think is a good embed:
Some web pages I tried to embed don't appear very well on facebook i.e. when you put their links in a status update. Also, sometimes it gives you a selection of images to choose from?!
Is this purely a <meta> tag play, or are there other things I could do to ensure that the web page gets embedded the way I want it to (images and all)?!
Thanks.
Yes this is meta tags at work. You need to specify Open Graph metadata to define what appears on Facebook. See http://ogp.me/
I have a quick question, hopefully someone can help me. I recently took a microsite live for a client and everything went smoothly except for a facebook integration piece. When a user attempts to Share the site, the thumbnail pulled for the share reflects the logo from the main site, not the microsite. I am baffled because this logo can be found nowhere on the page. Additionally, I have included the requisite meta information in the header of the document
<meta property="og:image" content="http://www.rethinkyourdrinknow.com/images/ryd/logo2.png" />
but for some reason it still pulls the other image. Does anyone have more experience with Facebook share that could possibly lend a hand?
Thanks,
Jamey
Try using the Facebook Linting tool (now the debugger)
http://developers.facebook.com/tools/debug
Enter the URL of your microsite, the tool should tell you whats going on.
It seems that OGP only likes thumbnails which dimensions are the same or more than 200px. If you upload an image and set it as thumbnail (which dimensions are, by WP default, 150x150 pixels) you're going to get an error message if you run your post's link into the FB debugger like this:
Open Graph Warnings That Should Be Fixed
Small og:image: All the images referenced by og:image should be at least 200px in both dimensions. Please check all the images with tag og:image in the given url and ensure that it meets the recommended specification.
So I manually enlarged an image into one of my previous posts to the actual 200x200 pixel size and tadadah!!! Facebook shares the proper link and proper image also from WP homepage or single post.
Expanding on #Andy's answer, you can certainly use the Debugger tool to see how facebook views your URL. It will tell you exactly what og:tags are missing/malformed.
One thing to note is that facebook does some caching on og:tags of URL's that have been shared; but using the Debugger tool will refresh facebooks caching of your URL.
I had the same problem with LinkedIn. I added <meta property="og:image" content="https: and so on to my index.html, but LinkedIn kept pulling the wrong picture because it had already cached my site.
Here's the trick to force the embedding app (LinkedIn, Facebook, etc.) to treat your website as never cached before and therefore read it completely from scratch, including your new og:image.
When you input your full link to the social media site, add ?01 at the very end of it. E.g. https://example.com?01 or https://example.com/my_project/?01
Just tried it and it worked like magic!
first off a short explanation... the following two lines assure that once my website is shared on facebook a custom image (share-thumbnail.png) is posted.
<meta property="og:image" content="images/share-thumbnail.png"/>
<link rel="image_src" href="<images/share-thumbnail.png" />
Can you guys think of any creative way to overwrite that behaviour when I click a specific sharing link on my page?
E.g. i have a <a class="special-sharing" href="#">Share with special image</a> anchor on my page and when that one is clicked I don't want to use the share-thumbnail.png defined in my header.
My thought was to use jquery to listen to click events on the .special-sharing link and then… preventDefault(); and change e.g. the content attr of my meta tag in the head to a new image src. Then call the facebook?sharer= blabla.
How would you solve that?
(Caveat: I'm not familiar with Facebook's API, just Javascript and the web in general.)
Unfortunately, you can't.
While it's possible to affect <meta> and <link> tags with jQuery (or Javascript in general), it isn't possible to make changes outside the currently-loaded copy of the page in the user's browser. When the link to Facebook is called, the current page is discarded and Facebook's page is loaded, which then performs its own hit on your page to get the og:image, which will still have the original value because the file on the server hasn't changed.
Instead, you could perhaps set up your server so that you can customize the image via the URL. For example, have http://www.example.com/mypage.php produce the default value for og:image, but http://www.example.com/mypage.php?special-image=foo.gif change the value of the <meta> tag. You could then use Javascript to change the sharer passed to Facebook so that it uses the special URL that points to the special image.