When you press the google +1 button on a site it grabs the typical meta data such as title and description. I thought it might be looking for the first image in the first article tag, but I tried changing the image and the thumbnail did not change. Does anyone know how the thumbnail is generated? Can it be added as meta info (similar to facebook likes)? Can it be linted?
The thumbnail i'm talking about:
There aren't any tools for developers on google+ yet.
You can subscribe for developer news
https://services.google.com/fb/forms/plusdevelopers/
API is available now
http://www.google.com/intl/en/webmasters/+1/button/index.html
<!-- Update your html tag to include the itemscope and itemtype attributes -->
<html itemscope itemtype="http://schema.org/LocalBusiness">
<!-- Add the following three tags inside head -->
<meta itemprop="name" content="title of your content">
<meta itemprop="description" content="description">
<meta itemprop="image" content="image url">
So... by the looks of it Google doesn't use the Open Graph Protocol http://ogp.me/ as their default information scrape.
For the image on the +1 listing they take the first useable image. The important part here is that even though on the +1 listing the image is resized to 45px x 45px the image you want to be used must be over 125px (at least). I'm using an image 180px x 180px (nice for scaling down to 45 x 45) and making sure it's the first large image on the page.
The title comes from the first h1 on the page and the description seems to come from the first paragraph; about 135 characters....
meta og:image works, secret is to have image large enough. It failed at 140x112 and work when I change to bigger thumbnail 511x364
Go to http://www.google.com/intl/en/webmasters/+1/button/index.html
Make sure to set "HTML 5 valid syntax" if you are using HTML5. I got it to work.
Related
I have a website, that people share on whatsapp. When I share the link, I get a small image right next to the site title and description. I would like it to be a big iamge, with the title and descrption under it, just as they are when I share a youtube link
Right now A link to the meta tag for the image looks something like this:
<meta property="og:image" content="URL">
<meta property="og:image:width" content="1280">
<meta property="og:image:height" content="720">
It changes nothing if the width matches the image or not
Any idea how can I get to this result, or WhatsApp just created something for some websites, and I'm just not one of them?
Telegram show description meta tag as link preview.
I changed the description meta tag but the link preview of my website didn't changed.
How to force telegram to update link preview?
Go to #webpagebot and send the link (up to 10) you want to update. Automatically will scan your site and generate the new image thumbnail, site name and description.
Remember to have og prefix in your html tag as: <html prefix="og: http://ogp.me/ns#"> or telegram bot will not update the graph cache.
via telegramgeeks
You may add /?v=n at the end of URL when sharing the link, where n can be any number and should increase after an update.
Sending the pure link to #webpagebot would not work so I used
<meta property="og:url" content="https://mylink.com" />
and it worked.
Actually it still works, added this line of code to my html head:
<meta prefix="og: http://ogp.me/ns#" />
then move to telegram bot and update your link 10 times:https://telegram.me/webpagebot?.
Once you have done that, you can copy your link again and the preview comes out.
Google Plus is pretty good at pulling images specified by Open Graph meta tags when standard URLs are shared like:
http://stackoverflow.com/questions/22342854/what-is-the-optimal-algorithm-for-the-game-2048
See:
But things start to get screwy when you start appending query strings, such as is done in this URL:
http://stackoverflow.com/questions/22342854/what-is-the-optimal-algorithm-for-the-game-2048?utm_source=google-plus&utm_medium=social&utm_campaign=stackoverflow-general-promotion
And for certain URLs + query strings the default image seems to make no sense at all:
http://skeptics.stackexchange.com/questions/4508/can-every-grain-of-sand-be-addressed-in-ipv6?xyz_12312313
The image featured in the above screengrab is the user pic of the guy who last left an answer to the shared question.
Is there any way to force Google Plus to fall back on images defined by og:image tags even when query strings are appended?
No, there is no way to fallback with Google+.
This behaviour is possible with Facebook scraper because it supports checking for og:url which Google+ does not support (Why???). These are the items Google+ supports
<meta property="og:title" content="..." />
<meta property="og:image" content="..." />
<meta property="og:description" content="..." />
Normally when query parameters are added if og:url is defined
Their recommended format is Schema as described at https://developers.google.com/+/web/snippet/
The order in which Google+ checks
Schema
Open Graph
Title and meta description tags
Guess???
Seeing that multiple Schema are defined on the pages you linked, according to the https://developers.google.com/+/web/snippet/ documentation, it should take the information from the itemscope defined nearest to the top
<body class="question-page new-topbar" itemscope itemtype="http://schema.org/QAPage">
which is a little funny/weird since their tool doesn't pick this up http://www.google.com/webmasters/tools/richsnippets?q=stackoverflow.com%2Fquestions%2F22342854%2Fwhat-is-the-optimal-algorithm-for-the-game-2048%3Futm_source%3Dgoogle-plus%26utm_medium%3Dsocial%26utm_campaign%3Dstackoverflow-general-promotion
So, then this brings us back to looking at your second image
The title is different as well, so og:title isn't being detected either. <title> is being scraped instead
What does this all mean?
Google plus sucks with markup for sharing.
You will need to adjust your top most Schema.org microdata and hope Google+ makes sense of it when adding params to the canonical url.
<body itemscope itemtype="http://schema.org/QAPage">
<h1 itemprop="name">Shiny Trinket</h1>
<img itemprop="image" src="{image-url}" />
<p itemprop="description">Shiny trinkets are shiny.</p>
</body>
Read this in the FAQ section for OpenGraph in Google+ :
Why isn't my +Snippet image appearing?
Images that are too small or not square enough are not included in the +Snippet, even if the images are explicitly referenced by schema.org microdata or Open Graph markup. Specifically, the height must be at least 120px, and if the width is less than 100px, then the aspect ratio must be no greater than 3.0.
I have found this link:
Adding a Google Plus (one or share) link to an email newsletter
It's great, it helped me to make a Google+ button for my HTML Email campaign. I'm using Mailchimp and I edited it as such:
<a href="https://plus.google.com/share?url=*|RSSITEM:URL|*">
<img src="http://mywebsite.co.uk/images/googleplus.jpg">
</a>
So now it has a customised image, and also works in my RSS email campaign. Mailchimp support didn't know this was possible, so that made me happy.
HOWEVER, what I want to achieve is to be able to choose which image is shared by default when the user clicks. Does anyone know if that's possible?
I hope my solution helps someone :)
The image that is displayed in the share is determined by the Schema.org markup on the page that you are sharing. Specifically, you will want to set the itemprop="image" to point to the image you wish to share.
<body itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Shiny Trinket</h1>
<img itemprop="image" src="{image-url}" />
<p itemprop="description">Shiny trinkets are shiny.</p>
</body>
It is important to note that this is the markup for your page, so the same image that appears in the share is the one that will represent your page in other snippet tools.
You can see how this works, and see additional markup options, at https://developers.google.com/+/web/snippet/.
the sharer uses this image as the default one, but displays other images as well (they can be selected with the arrows on hover). Is there a way to disable the other images, for navigation images etc.?
I am using links like this : https://plus.google.com/share?url=www.myurl.com to share articles on Google+ from a website.
This works fine but the preview image of the share is not right.
I read in the Google doc that you need to specify an image like this:
<img itemprop="image" src="thumbnail.jpg" />
The thing is, the image I want to use is not being displayed on the page I want to share. I have specific thumbnail images (of smaller size than the images displayed in the article) that I'd like to use.
Is there a way to specify an image for Google, like the og:image tag for Facebook for example, without having to use the tag?
Is there a way to specify an image for Google, like the og:image tag for Facebook for example, without having to use the tag?
https://developers.google.com/+/plugins/snippet/:
2. Open Graph protocol
If the page contains Open Graph properties for the title, image, and description, they will be used for the +Snippet.
Additionally, the schema.org tag that defines your page's preview image does not need to be displayed on the page, you could instead define it within your HEAD as metadata:
<meta itemprop="image" content="thumbnail.jpg" />