Add Open Graph markup to a Tumblr blog

Looking to increase the engagement with your Tumblr blog by adding Open Graph markup? Here’s how

Open Graph is a markup syntax that allows for a summary of the post- often used by social networks, such as Facebook and even Google Plus- to generate a preview of the post that Open Graph summarizes. When you share a post with Open Graph on one of these social networks, your friends/followers/circles will see more than just a link to your Tumblr post- they will see a preview of the post, making them more likely to click on the post from their feed and visit your Tumblr.

It’s a pretty easy copy-and-paste job. This is all you need to do:

1. While logged-into your tumblr account, visit the homepage for your Tumblr blog (not your dashboard, the publicly facing page that lists your posts.
2. Click on “Edit Theme” in the upper-right corner of your screen. It will look something like this:
   
3. Click on “Edit HTML”
   
4. Somewhere before the closing </head> tag, paste the Open Graph markup code (get it below).
5. Click “Update Preview” and make sure it seems to look correct.
6. If everything’s in order, click “Save”
7. Get out of the editing interface and back to your blog.
8. Validate it using a particular post (not your Tumblr blog’s homepage) at Facebook or Google.

Here is the Open Graph markup using Tumblr”s syntax for certain pieces of data that you’ll use to populate this:

{block:PermalinkPage}
<meta property="og:site_name" content="{Title}"/>
{block:Posts}
<meta property="og:url" content="{Permalink}"/>
<meta property="og:title" content="{block:PostSummary}{PlaintextPostSummary}{/block:PostSummary}"/>
<meta property="og:description" content="{MetaDescription}"/>
{block:Photo}<meta property="og:image" content="{PhotoURL-HighRes}"/>{/block:Photo}
<meta property="og:type" content="article"/>
{block:Date}<meta property="article:published_time" content="{Year}-{MonthNumberWithZero}-{DayOfMonthWithZero}T{24HourWithZero}:{Minutes}:{Seconds}+00:00" />{/block:Date}
{block:HasTags}{block:Tags}<meta property="article:tag" content="{Tag}"/>
{/block:Tags}{/block:HasTags}
{/block:Posts}
{/block:PermalinkPage}


Here are a couple notes on this markup:

• All this needs to be contained within {block:PermalinkPage} so they only render on individual posts.
• og:title needs to be {block:PostSummary} because not every post will have a title, and this will compensate for that. I’ve used the PlainText modifier to account for encoding issues.
• Since og:description should be different than the og:title, use MetaDescription there.
• surround the og:image with block:Photo in case there’s not a photo, so you don’t have a blank og:image.
• A properly formatted syntax uses og:type. Which type should we use? Article- is my best guess.
• Include a publication date for the article. Here I’m parsing data into the right format for Open Graph.
• Should we include the tags- why not? Probably doesn’t do anything but can’t hurt.

Advanced: add the fb:app_id – The unique ID that lets Facebook know the identity of your site.

If you’re using this on your Tumblr, tell us how this affected your engagement with visitors: visits, likes, reposts, etc. in the comments below.