The Importance of Open Graph (OG) Tags
Open Graph (OG) tags are part of every page of your site. This article discusses why OG tags are important, and what each one does to help you and your visitors promote your site on social media sites.
Why OG Tags Are Important
The OG protocol allows you to turn your website into objects in Facebook’s social graph. This allows you to customize what and how the information moves from your site over to your visitors’ Facebook page, and from there to their friends’ pages.
In short, the tags let you decide what people will see about your site when they view a Like, comment or share in their Timeline.
If you’re wondering what the “social graph” mentioned above is, here’s what Facebook has to say about it…
“At Facebook’s core is the social graph: people and the connections they have to everything they care about.”
The “everything they care about” hyperbole aside, the social graph is about people and their connections to other people, web sites, products they like and use, etc.
OG tags help ensure that your site becomes a part of their connections. But only if the content you write for them makes them want to connect with your site.
In addition, since OG tags are now used by other services (ex., if a Google+ user clicks on a +1 button on your site, he starts a conversation about your site, and the information in the tags becomes part of the conversation), the tags’ importance just continues to increase.
Below is a discussion of each OG tag (in the order you’ll find them in the <head> section of your pages), the information it uses (and where that info comes from), and how that info shows up on a Facebook Timeline.
OG Site Name
The Site Name tag looks like this…
<meta property=”og:site_name” content=”Your Site’s Name” />
This one isn’t a mandatory tag, so people won’t see it in any information that appears with a Facebook Like, comment or share. However, as time goes on, other sites (ex., Google+, ShareThis) may start to use it.
OG Title Tag
The Title tag looks like this…
<meta property=”og:title” content=”Comes From the Title Tag of the Page” />
If you’re following SiteSell’s Action Guide and the accompanying help, we discuss how you need to create an engaging, compelling title and description (discussed next) because they appear in search engine results pages.
Now you have another reason that’s at least as important, and will become even more important in the future.
If you haven’t looked at your page titles recently, now is a good time to go back and judge them with a critical eye.
- Do they engage?
- Do they compel?
- Do they answer your visitor’s (and now social media user’s) “What’s in it for me?” question?
OG Description Tag
The Description tag looks like this…
<meta property=”og:description” content=“Comes from the meta description of your page. It needs to be compelling and engaging.” />
As with the title, the description needs to be as compelling and engaging as you can possibly make it to ensure that people seeing a mention of your page on their Facebook Timeline will want to visit. The same holds true for Google+ conversations. Make them want to visit your site simply because of what your description says about your page.
OG Type Tags
There are two Type tags: website and article. They look like this…
<meta property=”og:type” content=”website” />
<meta property=”og:type” content=”article” />
The home page is always a “website.” Every other page of your site is an “article.”
The main difference between the two is that a Like will say “[FB user] likes a link.” for a website (home page) and “[FB user] likes an article.” for the other pages.
OG URL Tag
The URL tag looks like this…
<meta property=”og:url” content=”http://www.yourdomain.com/” />
This tag is always the full URL of the page. In the example just above, this is for the home page.
Having this tag always ensures that Facebook, Google+ and others never have to guess at the URL. And this is the URL that links back to your page when a user wants to visit.
OG Image Tag(s)
The Image tag looks like this…
<meta property=”og:image” content=”http://www.yourdomain.com/selected-image.jpg” />
Choose an image you would like to be ‘featured’ with the post and don’t forget to set the image attributes (type, height and width). Facebook will handle images up to 5 megabytes in size. So don’t worry about uploading large size images. Facebook will automatically generate new images to an appropriate size for the display.
The image attribute tags look like this …
<meta property=”og:image:type” content=”image/png”>
<meta property=”og:image:width” content=”1024″>
<meta property=”og:image:height” content=”1024″>
Bottom Line About OG Tags
The bottom line is that these tags make writing quality titles and descriptions even more important than it was, when “all” they were used for was driving traffic to your site from search engines.
Now you can drive traffic from Facebook and Google+ using the information that you want people to read.
There’s never been a better time to start reviewing and improving your titles and descriptions. And there’s never been a better time to write compelling, engaging text the first time, so that you never miss the chance to turn a potential visitor into a happy visitor, one who then shares your site with all of her friends!
Check out open graph tags in action. Notice the image with the title and description below? These are defined by the open graph tags in the article and pulled automatically when someone shares the article link at Facebook.
Stay tuned! Subscribe to our newsletter so you won’t miss any new resources.