How to Implement OG TagsOG Tags go in the <head> section of your website coding, just like other meta tags, and like other meta tags they will not be seen by users, only web crawlers. For any given OG tag, you first define its property (the actual tag) and then the content (what the tag is saying or defining). So for example if you wanted to set the title that Facebook displays to 10 Reasons Vertical Rail is the Best eCommerce Marketing Choice it would look like this:
<head> <meta property="og:title" content="10 Reasons Vertical Rail is the Best eCommerce Marketing Choice"/> </head>This tells Facebook and any other Open Graph channel that the title to display is 10 Reasons Vertical Rail is the Best eCommerce Marketing Choice no matter what the actual <title> tag of the page is. Similar tags let you define a description, what images will be shared, the display URL, and a host of other elements of your content when it is shared. You can find a complete list of OG tags and their purposes here and here, but let’s take a look at the tags from our first OG tag post for an example of how to properly implement them.
- All of your OG tags work synergistically to get your content shared and to determine how it’s shared.
OG Tags in Action
<meta property="og:type" content="article" />This defines the display format for the link, in this case an article, but other options include music.song, product, and place.
<meta property="og:title" content="How to Optimize Your Content for Facebook Sharing" />This is defining the title that will be displayed on Facebook. Changing the title from what is on the article can sometimes be useful for targeting specific audience segments you want to reach through social media channels. Make sure not to include any branding or extraneous information.
<meta property="og:description" content="Tools and tactics to optimize your content for sharing on the worlds largest social media channel, Facebook. Learn how to choose what content is displayed when shared and how to choose the right image in the right size to get the most out of Facebook link sharing." />Here we have set the description that will be displayed on Facebook. Without this, Facebook will sample from your on page copy which can lead to inaccurate, confusing, or just plain unreadable descriptions. It’s recommended to have two clear, concise sentences for your description that tell the reader what the link is and why they want to click/read it.
<meta property="og:url" content="https://www.verticalrail.com/kb/how-to-optimize-your-content-for-facebook-sharing/" />The identifying URL for your content that all shares on Facebook will use and display. Make sure there are no session ID’s or extraneous parameters in the URL.
<meta property="og:site_name" content="Vertical Rail" />This sets the site name (not URL) that will be displayed. You can use this to further brand your site, or to focus on specific areas of your site or business and the audiences relevant to them.
<meta property="article:publisher" content="https://www.facebook.com/verticalrail" />This tag, and its companion tag “article:author”, are often overlooked but important tags. These will make sure that the publisher and author of the content are displayed and that clicking on them will bring you to the Facebook page for each.
<meta property="og:image" content="https://www.verticalrail.com/wp-content/uploads/2015/08/Sharing-is-caring.png" />Finally, here we have set the image to display with the shared link. Without this, Facebook will default to the first image it finds on the page, and if there are multiples it will allow the user to choose which image they are sharing; both of those scenarios can lead to badly cropped or irrelevant image’s, or ones which don’t display well on all platforms. With this tag you can ensure that the image you want associated with your content and which you think will entice the most viewers to come to your site is always what is displayed when your page is shared and re-shared.