Facebook Open Graph META Tags

It's no secret that Facebook has become a major traffic driver for all types of websites. Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly. And of course there are Facebook "Like" and "Recommend" widgets on every website. One problem I've always found with sharing URLs on Facebook is that you often have no control over the image and description text that accompany the URL. Had I known about Facebook Open Graph API, I would've known the solution to that problem.

Facebook's Open Graph protocol allows for web developers to turn their websites into Facebook "graph" objects, allowing a certain level of customization over how information is carried over from a non-Facebook website to Facebook when a page is "recommended", "liked", or just generally shared. The information is set via custom META tags on the source page. Let's take a look at the different META tags Facebook uses to allow you to customize how your website is shared.

All of Facebook's Open Graph META tags are prefixed with og:, then continued with more specific the specific property to be set. The data relative to the property set goes within the content attribute:

<meta property="og:{tagName}" content="{tagValue}"/>

Using this simple META tag strategy, you can tell Facebook what images, text, and more to use when sharing your webpage. Let's review a few key META tags!

Facebook Open Graph Meta Tags

image

The image META tag directs Facebook to use the specified image when the page is shared:

The Open Graph protocol is a great way to not only share a page's information but to also control how your site's information is shared. Using these META tags could be the difference in attracting just a few visitors from Facebook or attracting loads of visitors because your shared links provide useful keywords and imagery!

For maximum performance, we all know we must put our assets on CDN (another domain). Along with those assets are custom web fonts. Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements. CSS gradients are another step in that direction. Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome,...

Developers everywhere seem to be looking for different ways to make use of JavaScript libraries. Some creations are extremely practical, others aren't. This one may be more on the "aren't" side but used correctly, my TextOverlap plugin could add another interesting design element...

Keeping equal heights between elements within the same container can be hugely important for the sake of a pretty page. Unfortunately sometimes keeping columns the same height can't be done with CSS -- you need a little help from your JavaScript friends. Well...now you're...

Nice guide. I’ve been using these for a while now as they help convert quite a bit, and it’s one of those little things clients like a lot.

A cool thing is to make custom video players appear whenever your pages are shared on Facebook. Just like YouTube and Vimeo. I wrote a short tutorial on that if anyone’s interested: http://ahrengot.com/tutorials/custom-video-player-on-facebook/ – The tutorial has a working demo that shows the custom player embedding on Facebook.

The video player must be flash-based, but you can use a HTML5 fallback that will work on iPhones, iPads etc. The demo above shows that functionality as well :)

i see no part of that code that support HTML5 there is no information in the meta tags about another URL or even direct link to the video file (in this case the .mp4 file) for HTML5 to work with so how does this provide a HTML5 fallback?

Hey, I just tried your example, with some changes. I added a title and changed the description text and my changes were not reflected on my facebook page when I clicked the like button. Has anybody had problems with this?

Things you post to the wall are permanently cached. If you were to share again, after linting, it should be reflecting the new information. But changing it and re-linting it doesn’t have any affect on an already-shared item.

Hi there David,
I am an Attorney (sorry) and responsible for our small firm’s website. The site is written with ASP and so far is working fine. I added FB API to enable visitors to comment on Legal related news that I post in a News section.
The Facebook API however says “Warning: http://www.mwillers.co.za/lawnews.asp?newsID=245 is unreachable.” (for example) for any specific article selected.

Now as I understand this has to do with the Open Graph code of Facebook and how the tags are described on that page.

The OG tags will also populate the google+ snippet, they recommend using the schema.org format but they will pull either way. It’s always helpful to know you don’t have to do this for every single social media button…lol. And remember that your like button doesn’t have to be on the actual page that you want your users to actually like…if that’s not to confusing.

Jochem Stoel

Hi David Walsh,

Thanks for another useful post! Not sure if this is a small mistake but I’m commenting just to make sure others won’t do the same if it is.

On your demo page, you are using double quotes in the value of your meta tag around the word “graph”.

Are you sure this is valid? Shouldn’t these characters be escaped or perhaps should people use the HTML equivalent of the symbol?

hello David, i am hoping you could help me with this issue related to your post.i created a page and used it as a facebook application.this pages contains articles and i added a comment box under each article.so when a user puts a comment, the comment appears as a feed post on their wall. but facebook is choosing a random image from the page and using it as the thumbnail image of the post.i used

but these meta didn’t affect the post of the comment. , the thumbnail image is not changed and this title and description in the meta are not changed.

hello David, i am hoping you could help me with this issue related to your post.i created a page and used it as a facebook application.this pages contains articles and i added a comment box under each article.so when a user puts a comment, the comment appears as a feed post on their wall. but facebook is choosing a random image from the page and using it as the thumbnail image of the post.i used

but these meta didn't affect the post of the comment. , the thumbnail image is not changed and this title and description in the meta are not changed.

please feel free to test it yourself https://apps.facebook.com/ids_newsletter/ and give me some clue of what should be done. Thanks in advance.

zeinab marji

i am wrapping the code with tags!! why aren't they showing up ?:-/ anyway ,sorry for repetitive posts. i was trying to tell you i used the image and title and description meta tags but they had no effect.

zeinab marji

Sorry for disturbance, i figured it out. you should consider adding the ability to delete the post that we add :)

This stuff is really getting on my nerves. I’ve been trying to get my images and info to show on facebook shares and links for three (well over midnight) days but I just can’t get it to work. I’ve found serveral examples of code, tried them all and still computer says “no”. Anyone that can help me out? I actually dont know any coding, I use webplusX6 to do the hard part for me. Probably you’re farmiliar with it but just in case, it’s a WYSIWYG editor. Some of the coding I tried is still in there. Hope some one can point me in the right direction.
Thanx in advance!
Paul

I am using a like button in my website soo that the user likes my link, however, on his timeline it is shown as a page. “XXX like a Page.” and a page with the title of that link is created.
Do you know the reason behind this ?

Hi! I have multiple problems of these meta tags.
1)Whenever i share my facebook page it doesn’t show the logo..
2)When i debug my homepage(toplistsmania.com) through this http://developers.facebook.com/tools/debug it is fine. but when i debug the posts it gives multiple og values error..
plz i need help!

This is my blog toplistsmania.com

jinal trivedi

i am facing problem with <meta property="og:title" content="">
<meta property="og:image" content="">
this is not working… and i am using .
why this image and title is not working? any idea?

i am wrapping the code with tags!! why aren’t they showing up ?:-/ anyway ,sorry for repetitive posts. i was trying to tell you i used the image and title and description meta tags but they had no effect.

Hi! The problem with open graph protocol is that it makes the images have the same functionality as any other object on Facebook and this way large images on my site are cutted when the link to the post goes to the fan page on facebook. Do you know a way to show large images on facebook without cutting them?

I think this will help solve my problem. Everytime I post a link to my website it populates the exact same information it is grabbbing from my meta tags. I would like it to populate with the most current information. For instance, on a new item page. I want it to post with the most current headline and first few sentances of my news item. Is there a way to add these tags and tell it to grab the content from “header” and “mainbody” so that I don’t have to fix the og tags each time I post a new news item?

Am I correct that this will help my Google+ issue too?

Why can’t they be like LinkedIn and allow for custom edits of each post. That would make my life easier. :)

Hi! The problem with open graph protocol is that it makes the images have the same functionality as any other object on Facebook and this way large images on my site are cutted when the link to the post goes to the fan page on facebook. Do you know a way to show large images on facebook without cutting them?

This is a great article – we’ve used this and still had the wrong images appearing from a cached page that used the same URL – the website product image was updated but facebook seemed to show the old image for another 24 hours – anyone had this issue before?

Thanks for the guide, I’ve been looking for some help with facebook tags like this.

Manny

Hey David, awesome blog and article (I use it a lot as a cheat sheet!) I have one question, I noticed recently that when you share a link to some pages (Like from Mashable) and if the person sharing the link isn’t a fan, they see a “Like” button below the post. Is this also a Facebook meta tag function or something else? Here’s an example: http://4stor.com/vzAEI

Just a note about the image – it needs to be at least 200×200 (not 50×50 as stated in the article), otherwise Facebook will do its usual thing and show the other images on the page first in the selection dialog, and your open graph one last.

If you’ve changed the image (or other details) use this tool https://developers.facebook.com/tools/debug to refresh the cached data as Facebook. It will also tell you anything that’s wrong with your og data. It won’t change cached values already displayed in FB.

Is there a way to call up the original URL of the image? I’d like to link to the original image through a manual implementation of YAPB. Currently I only know of that the automatic inserted version of YAPB links this by default.

Nicely done – a sound guide to Facebook open graph meta tags. I’m just searching for how to add my site title to sharing tools like Hootsuite when people share my posts. When they share pages it’s there. I’ll keep searching…

Hi!
I have a lot of pages with posts…each new page – it is new article…
I added all the meta tags…in article(page) template, then used Debugger… after that I tried to like the article, and Yes I have good result, but if I go to second or third article (of course with all meta already inside) there is no effect, so if I have 10000 articles I need to manually do Debugger?
Is there any Debugger @ Facebook to update all the meta cache?
Thnx

Can i add social meta tags (Facebook, Twitter etc) on all pages? Or these tags are only for homepage?

Deb

Hi, thank you for your article.
I would like to ask a question about Facebook. When you share a link to a website, you’ll have the title and image of the site in your post, does anyone know how? Facebook that script uses?
Thank you in advance

Arindam Mojumder

Not happy with the new process.
The new style is completely static one. How can a developer post a dynamic content throught this process. facebooksharer.php had this facility to post any custom message with custom thumbnail image.

Can anyone guide me how can I post custom thumb image dynamically staying on a same page. Suppose it is a cosmetic site now if I want to share each cosmetic with its details and thumb image how can I share it in Facebook???? Any idea????

Hey if you’re implementing open graph meta tags via Javascript for convenience, you’ll hit problems since the facebook crawlers don’t execute javascript. I suggest using SnapSearch https://snapsearch.io/ which can help make sites using javascript more crawlable.

It seems that open graph has become a must meta tags for all websites. We will definitely implement these tags on our kids clothing online store. Thanks for the detailed info you have provided here, it helps a lot.

Regards,

Ivan

esqo

Hey guys. I m using the go:image property, is it working just with external links ? in the content, i have the path to the image from my local repository ( on the server ), maybe thats the problem ? Its not displaying the right image, but a default selected one :/

Hey guys. Can I please get some help..? I used a comment plugin with FB and it added the property tags to my site but I have since changed the focus on this blog.

My problem is I don’t know how to remove these tags or edited them to show the proper information. Plz can I get some guidance. I don’t know crud about coding so please be specific. I’m a drag and drop kind of fella. http://www.joeleavers.com.

Hi, if the facebook like and share button is on every page, but the link will eventually be towards the index page. Should I then copy the meta tags to all my pages? Myabe a stupid question, but I’d like to know.

I have this code at the footer of the page in jQuery that appends the Facebook Open Graph tags to my page dynamically. Problem is that on the page it appends the tags well but when I run the Facebook Object Debugger, it doesn’t.

So my question is, how does Facebook scrape for this information or are there some changes I can make to my code that will help me sort out this issue.

Hi, I have added og tage for image and it shows correctly if I hit directly but when I put http://www.ingo.dk in status in FB then it still shows me old image. how much time it will take to refresh that image in fb or I have to do something to refresh it FB. MY logo is changed so I updated the image in my server but when I try to put url in FB then it still show old logo in thumbnail, I lose my brand value in this as costomer getting confused. Kindly help

Chaitralee

Can I set dynamic data(which is fetched through url using id) to metatag?

Ernest

Hi there,

It’s does not work for facebook. It works nice for google+ and other social networks…

Keith

QUESTION:
Can “meta tags” be added to a facebook page (similar to website)… and how is that done?

Here’s the problem:
I thought my facebook page (https://www.facebook.com/TheaterPipeOrgan) would be listed in the menu when “theatre” or Theatre Pipe Organ” was entered in the search box. Not so. Folks can’t find my page when searching just for theatre or pipe organ.

Are there meta tags (such as “theatre’ “theatre organ” “pipe organ” etc) I can add to my facebook page (similar to meta tags added to a website) to capture search engine results I need?