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.
Related
I'm using the Tweet Lookup API (part of V2). When a user shares a link in a tweet, a preview of that URL is generated in that tweet. I want to recreate this using API. So how can I get the preview image of the URL and also other details like the domain, etc?
For example, if you look at this tweet: https://twitter.com/elonmusk/status/1429907171639103489
If you see the above tweet, there’s a URL preview card, with image of starlink and a brief description of the link. How to get these details through the Twitter API?
I suppose I am a little late, but..!
Unfortunately, to my knowledge there is no way to get the preview image from the twitter API.
You have to find the link from the tweet, get that site and scrape the image from there. Websites can tell twitter what image they want to use by making a tag that has the property "twitter:image"!
--
What you can do, for example, is get the original URL for the post from entities!
E.g. making the tweet look-up like this:
https://api.twitter.com/2/tweets/1532014165686206466?tweet.fields=entities
From there, get the original url, for example from the "unwound_url" in the JSON response of that look-up example.
You need to make a request to that site and from the html response, look for a tag that has the property set to "twitter:image"
In that tags content you have your image link!
See:
https://developer.twitter.com/en/docs/twitter-api/tweets/lookup/api-reference/get-tweets-id
https://developer.twitter.com/en/docs/twitter-api/data-dictionary/object-model/tweet
I hope my rambling made sense and good luck!
Unfortunately, this is impossible because Twitter requires URLs with Twitter meta tags in order to show these Links as cards with images. So the only way to do that is to add these meta Tags in the head of your website :
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="LINK TITLE HERE">
<meta name="twitter:description" content="LINK DESCRIPTION HERE">
<meta name="twitter:image" content="PREVIEW IMAGE HERE">
This is how I made it on my own website. I hope that will help you.
I have a dynamic page, where the contents and title will change based on the parameters in the URL. I want the same to be done for meta tag description. As I don't have a sound knowledge of SEO, I don't know whether it will be valid or not.
Say suppose URL contains word "test"
I will do,
if("test" is present)
{
<title>test</test>
<meta decription="test"/>
}
else
{
<title>test1</test>
<meta decription="test1"/>
}
Can I do this? Does giving two meta tag descriptions for same page work.
It is best practice to have different, on the page content based values of the title element and the meta description for each web page. It is not forbidden by the the HTML5 specification to have multiple <meta name="description" content="YOUR DESCRIPTION"> elements but I would guess that search engines process only the first appearance of the element. So my recommendation would be use one <meta name="description" content="YOUR DESCRIPTION"> element for each page.
As long as you code it server-side (eg in PHP) when the page is generated rather than client-side (javascript) after the page has loaded, then it will be fine. That's how most CMS systems work already.
Done server-side, only one of the description tags will actually appear in the code Google see.
Done client-side, it is likely that they will see no description at all as I don't think many search engines render javascript.
Is There any way so that i change the snippet created by google indexing,so that it Drives more Traffic,Making it more Relavent which i can show to the users
Google will choose your search results snippets from the following places (not necessarily in this order):
The page's Meta Description tag
The page's Open Directory Project (ODP) Listing
Page content relevant to the search query
If you do not want Google to use the ODP listing's description then you can tell them not to do so with the following Meta tag:
<meta name="robots" content="NOODP">
If you want to encourage Google to use your Meta Description tag then make sure it is unique to each page. Also make sure it contains an accurate description of the page's content.
In thew absence of an ODP description and Meta Description tag, Google will use a portion of the page's text as the description. This text will contain the closest matches to the search query. I have not seen any official limit to how long this can be but a couple of sentences seems about right.
On a related note, if you don't want a snippet to be shown with a particular page you can use the following Meta tag to prevent one from being shown:
<meta name="robots" content="nosnippet">
See this blog post for Google's tips on using the meta description tag.
According to this site, "The meta description should typically be at most 145 to 150 characters in length as these are the maximum number of characters typically displayed at Yahoo! and Google, respectively."
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" />
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.