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" />
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.
An url was postet at reddit: https://www.reddit.com/r/harrypotter/comments/apwv4v/rawenclaw_or_hufflepuff/
But reddit was not able to retrieve an image from the website and is showing a default image.
How do you tell websites like reddit which image to show there? And how can you set this image in a nuxt vue file?
Reddit (and most of the other major sites that do this, like Facebook and Twitter) uses the og:url Open Graph tag, if present.
Full details of Open Graph can be found at http://ogp.me/, but fundamentally:
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
If an og:image is not present, most sites will try to guess which image on the page is the right one. They'll often get it wrong.
I am trying to share a post from my website(blog) onto Google plus but it isn't showing the featured image of the article, instead it is just showing the title and link of the article. I have microdata and also "og" tags for my page. When tested using Google Structured data testing tool, it is showing all good. I expect to get some help here. If I am trying to share the home page, it is showing an image, however if I am trying to share any post from the website, it is not showing any image. Please help, let me know if you need any more info, would be happy to provide.
One of post's from website
The og:image meta tag is being used by google plus rather than the image property within your http://schema.org/BlogPosting -as #abraham pointed out this is a broken link, it should go to http://top10grocerysecrets.com/Top-10-foods-for-releiving-inflammation.jpg - currently it includes /wp-content/uploads/sites/17/2015/07/ which isn't part of the image's path.
In the structured data it is valid, but not correct: BlogPosting has an image set but without a full path which may be why it gets ignored: the source should begin http:// etc. This is also needed if you want the image to appear in the google search results preview.
The WebPage element does not have an image set: only the BlogPosting does. Consider setting the same image property using a meta tag inside the WebPage element if fixing the BlogPosting image's path does not resolve the structured data issue, e.g.
<meta itemprop="image" content="http://top10grocerysecrets.com/Top-10-foods-for-releiving-inflammation.jpg" nt-post-thumbnail wp-post-image" alt="Print" />
In the structured data there are two unrelated mistake
the BlogPosting has author set to a link with fixed IP address http://162.244.66.231/top10grocerysecrets/author/cyoung this will reduce the chance of it connecting the blog with C Young's profile on the website.
the file name http://top10grocerysecrets.com/Top-10-foods-for-releiving-inflammation.jpg has 'releiving' in it, which is not the spelling used in the text on the image itself. This doesn't matter a great deal.
I am trying to optimize a web site which is managed by typo3. There is a page on this website, let's call it seminars. When I ask google to search for this Website by entering "Big Company seminars", I receive a result which looks like that:
Logo Seminars - Big company
url://seminars.bigcompany.de
The string "Logo" should not be displayed there. So I checked the source code and found that:
<title>Seminars - Big Company</title>
and
<img src="BigCompanyLogo.png" alt="Logo Seminars">
It looks like Google takes the alternative text of this image and uses it as the title for their search results.
Any ideas?
Google Search may change webpage titles they show on their result page. You can’t control this.
About your alt content:
Is the page about "Logo Seminars", or does "Logo" mean that the image is the logo? In the latter case, you might want to remove "Logo" from the alt content (or place it, for example, in square brackets). Note that, if the image is the only content of the link, the alt content should describe the link target, not the image.
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.