HyperDrive Interactive

How To Take Advantage Of Open Graph (“OG”) META Tags On Facebook, Twitter, and Google+

Posted on by Marcdavid

Open Graph protocol allows web developers to turn their websites into “graph” objects, allowing a certain level of customization over how information is carried over from your website to Facebook or other social entity. Tightening down the OG code will deliver greater impact. (Note that LinkedIn and Google+ also use a form of “forced” tagging, read this article for tagging information and best practice tips. Other social networks may follow suit. For general purposes, only facebook OG code is discussed in this article)

open-graph-code-facebook

All Open Graph META tags are prefixed with og:, then continued with 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 use OG code that dictates what images, text, and other items to use when sharing any webpage.

Open Graph Sample Meta Tags The page used for this example is fictitious but will help you understand how OG works. There are other OG tags not explained in this article, see here for additional tags you may consider using.

Image The OG image META tag directs Facebook to use a specified (or featured) image when the page is shared. If this tag is not used, facebook will tend to pick up the first usable graphic on the page, or provide a graphic that does not quite fit with the story. OG-driven graphic choice fits the topic and disables a poster choosing an inappropriate or less than desirable graphic. The same goes for text…provide no OG code and the share will pick up whatever characters will fit. Instead of giving the sharethis user a choice, OG allows the use of a graphic and text the brand desires:

<meta property=”og:image” content=”http://www.sitename.com/photos/graphic.jpg” />

It’s best to use a square image. That image should be at least 50×50 pixels in any of the most popular image forms (JPG, PNG, GIF, etc.). Suggested size is 200×200, but can range up to 1500x1500px depending on image used (smaller sizes recommended, Facebook says 120×90 is optimal, all graphics automatically shrink to the default thumbnail size). Choose a graphic that is both functional and eye-catching enough to make viewers click thru to your website or landing page.

Title The OG title will accompany the URL, this is similar to the standard META tag <title> and is also shown as the sharethis Headline. This should be the article or page title or the primary headline on the page. This tag also doubles as an anchor text for the URL that is being shared. Improved headline clarity with a distinct ‘call to action’ has been shown to create higher reading and/or conversion rates.

<meta property=”og:title” content=”Browse The Largest Collection of Stuff” />

Url The OG URL should be the address for the given web page, where we want people to click to. It is the specific URL for the content being shared. In the example below, the content being shared is a specific frying pan in the cooking section of the website

<meta property=”og:url” content=”http://www.sitename.com/A-Z-stuff.php?item=frying-pan&category=cooking” />

Site_Name Provides Facebook the name that you would like your website to be recognized by, this can be seen as visible text depending on where the code is displayed. It is also used behind the scenes by google and other search engines:

<meta property=”og:site_name” content=”Company Name” />

Site_Description The site description is one or two short sentences of body text you will place under the og:title meta. If you leave this tag blank, facebook will pick up visible copy from the page, no matter what the copy says. You should strive to make your text 300 characters or less. (225 for LinkedIn and 200 for Google+). The body text (description) is to be a complete thought displayed in simple sentence format. Load your most important marketing words at the beginning of the description for best results.

<meta property=”og:description” content=”Save money at the only online rewards website that pays you to shop at your favorite stores” />

Reasons To Always Include OG Tags

  • Non-descript Title (aka OG title) offers little insight into what the share is related to.
  • Existing OG code gives the sharer the opportunity to choose among nine images…it is best to have control over this so a less desirable graphic does not get used. For example, if a poster chooses to use the company logo, it can be less effective that using a graphic of one of the company’s products.
  • When a site description (body text) isn’t hard-coded into a page, it takes a direct lift from the page in question – since no code was provided, facebook grabs what it can, and it results in text that may not be in a complete sentence and instead a long list of disjointed words. If the text is very long at the beginning of a page, this is something that can also be managed with OG code.

_DSC5407

Note: Testing of display results can be done at any time by “sand-boxing” various code combinations in your facebook account. Simply adjust the website page code and share it on facebook until the desired look, feel, and copy are achieved. We suggest opening a new FB account for your sand-boxing needs.

Back To Blog