Are there metadata tags for sharing content on Tumblr? For example, Facebook uses Open Graph, there are Twitter cards, and Pinterest has Rich Pins. How can I specify the title and subheading that appear when someone shares content from my site on Tumblr?
It seems that Tumblr use Facebook Open Graph Protocol to scrape pages
Things to remember:
Title is scraped from <title>
Description is scraped from <meta name="description" content="{content}" />
No matter what the size of og:image is, Tumblr will resize it and save a 500px by 500px image on its servers and use it in {Thumbnail} theme operator.
Tumblr OG scraper gets more than title, description and thumbnail, it gets most of the OG tags so refer to the Documentation of Open Graph Protocol
Related
I have generated the following url to share the page into facebook,
https://www.facebook.com/dialog/feed?app_id=195106440518444&link=https%3A%2F%2Fwww.capella.edu%2Fcapella-experience%2Fflexpath%2F&picture=https%3A%2F%2Fi.pinimg.com%2Foriginals%2Fdd%2F56%2F37%2Fdd56376f6bb3f69130ec3216a13ec99c.jpg&name=Capella+FlexPath&caption=FlexPath%3A+Your+degree.+Your+pace.&description=With+FlexPath%2C+you+can+still+build+the+career-advancing+skills+and+knowledge+you+need%2C+but+with+a+class+schedule+entirely+controlled+by+you.&redirect_uri=https%3A%2F%2Fwww.capella.edu%2Fcapella-experience%2Fflexpath%2Fflexpath-trial-course%2F&ext=1519158959&hash=AeY6NpBp29iik5NI
While hit on the above link, I couldn't see the picture. And I know the picture attribute is deprecated. Then I have tried to use the other way,
I can achieve the same thing with the help of meta tag,
<meta property="og:image" content="https://static.xx.fbcdn.net/rsrc.php/v3/ye/r/lWB96Z8sFtt.png" />
If I have include this meta tag in my page the image will display.
But I would like to display the picture dynamic also same page I would like to use different image on different shares.
Please provide suggestions If you have a idea.
For some reasons the addthis widget on my page is not sharing the latest image - which can be deceiving.
This is the one example of the page - http://www.starbucks.com.sg/menu/beverages/chocolate-black-tea-double-chocolate-green-tea-frappuccino
Any help?
Facebook and many other services use Open Graph meta tags to know which image should be shared, along with the title and description.
Here's some more information on Open Graph tags:
http://support.addthis.com/customer/portal/articles/381222-optimize-facebook-sharing
Since the page you mentioned already has og:title and og:description meta tags, you'll just need to add og:url and og:image.
The Facebook Debugger tool is also a great tool for determining which OG tags Facebook is currently detecting and it can also "rescrape" a page to pick up newly added meta tags.
https://developers.facebook.com/tools/debug/sharing/?q=http%3A%2F%2Fwww.starbucks.com.sg%2Fmenu%2Fbeverages%2Fchocolate-black-tea-double-chocolate-green-tea-frappuccino
quick question:
one tiny prob i have is when i try to share a page from my site on facebook (for example:http://pent-house.co.il/index.php/sale/52-2013-12-12-13-41-40), i cannot see thumbnails for the gallery. i see only the logo :\
is there any way that i can share the photos throw facebook?
thank you very much and have a damm nice day! XD
i wanted to shar a pic but i dont have enough reputation
You have to set an og:image meta tag like this:
<meta property="og:image" content="THE LINK TO YOUR IMAGE"/>
In the <head> of your document otherwise facebook bot uses (usualy) the biggest images he can fin. On the example page you linked to the biggest one is the logo.
Once you have set the og:image meta tag don't forget to delete facebook's cache by entering your page url on this page so you can see the modifications you make.
More information about thos meta tags and open graph here
One of the problems I face while sharing a link of my blogger post on facebook or linkedin is that the thumbnail shared is my picture (which is the only picture on the page). I would prefer no thumbnail being shared.I tried using
<meta property="og:image" content=""
I.e the content is kept as blank, yet it shows a thumbnail. How do i set it to no picture?
You can't. Facebook/Linkedin will crawl your site and decide on it's own what images to offer the user. The og:image meta tag is just a suggestion and not a directive.
The only way to share without image is for the user to remove it.
Update: there is another way. You could detect (on the server) FB/LinkedIns crawler and serve them HTML that does not contain any images. That way they wouldn't have anything to display (just text). I don't know if that's possible on blogger. And if you go down this path, check FB/LinkedIn's TOS if this is allowed (doing this with google, for instance, will get you banned).
When I wanna add a link on facebook wall, Facebook make search for photos under pasted link. But it gets only first 6 photos.
I'm curiouss if there is some class, id or rel atributte important for facebook which will indicate exactly what image we want to show?
You can define the og:image meta property to assign images to be used on liked and shared items on Facebook, like this:
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
It's described as:
og:image - An image URL which should
represent your object within the
graph. The image must be at least 50px
by 50px and have a maximum aspect
ratio of 3:1. We support PNG, JPEG and
GIF formats. You may include multiple
og:image tags to associate multiple
images with your page.
For more information have a look at the documentation here. You can use the Facebook URL Linter to inspect where it is fetching the different meta data, such as the images.