Black Glasses

Thinking and solving, traveling and seeing.

Twitter Cards, Facebook Open Graph, and Octopress

With the internet so inundated with content, it’s important to grab a user’s attention and drive the traffic to your content. I’m not a marketing guy, but being able to stand out on a page, especially social media pages, seems more important than search engine optimization to me. Nowadays it’s vital for a user to be able to differentiate your content from the rest of the noise when scrolling through their various feeds.

Content and pages embedded with meta tags isn’t a new discussion. People have debated its effectiveness for years, which tags work, which tags don’t, what’s best for Google, on and on. Like I said, I’m not a marketing guy, just an engineer, so we’ll be focusing on providing structured data to the various services which are generally used to distribute content. Structured data makes it easier for automated services (Google crawler, Facebook content crawler) to understand your content. For the social media sites, having this structure on your page can radically improve how your content looks when a link is embedded or shared.

Twitter Cards

A "summary" Twitter Card on twitter.com with content attribution. Twitter cards provide a way for you to link to your content on Twitter, while also providing a first-class media experience from within Twitter.com or through their mobile apps. If a user Tweets a link to your content, a ‘card’ will be displayed to their followers as well.

At time of writing, there are 7 different types of cards which you can use for your content.

  • Summary Card: Default card, including a title, description, thumbnail, and Twitter account attribution.
  • Summary Card with Large Image: Similar to a Summary Card, but offers the ability to prominently feature an image.
  • Photo Card: A Tweet sized photo card.
  • Gallery Card: A Tweet card geared toward highlighting a collection of photos.
  • App Card: A Tweet card for providing a profile of an application.
  • Player Card: A Tweet sized video/audio/media player card.
  • Product Card: A Tweet card to better represent product content.

In order to use the Twitter Cards for your content, you’ll just need to add some meta tags to your page. If it’s a blog, you’ll want to add these tags on a per-post basis, so that they handle the content dynamically. Twitter provides a tool for testing and validating the markup on your pages.

Facebook Open Graph Tags

Facebook provides various utilities to maximize the engagment potential of content. Facebook Insights lets you view the reach of your content, as well as research demographics about the users who have engaged your content. Similarly to Twitter’s cards, Facebook provides a way to better have your content displayed within your page’s timeline, as well as those who share your links. You can control these attributes through their open graph tags. Through these tags you can specify authors of content, publishers, which image should be in the preview, content description, and a whole lot more.

Facebook also provides other methods for optimizing the potential of your content distribution. They provide tips and examples for everything from what size images work best in their embedded previews to making sure your server has their Facebook Crawler properly whitelisted so they can index your content.

We won’t get into configuring the Facebook Crawler, but we’ll talk about getting Insights set up, and using the Open Graph meta tags to provide Facebook with the proper metadata about your content.

Integration

We’ll be integrating these meta tags with with Octopress templates in this example, I’ve made some Octopress specific tweaks to make things nice, but it will fundamentally work on any site or CMS.

For Octopress, there’s a few things I’ll want to add to my _config.yml file, just to make things easier for the metadata generation, and because Facebook requires some fields.

_config.yml
1
2
3
4
...
# Facebook Insights / Open Graph
facebook_app_id: xxxxxxxxx
facebook_page: https://www.facebook.com/xxxxxxxxx

The App ID can be an App ID for a business page, or personal account. You can get one here, by clicking the green button and verifying your domain. I’ve also added the full URL to my Facebook page, Facebook uses this to attribute author information.

I find it easiest to add the Facebook and Twitter markup to the header of the HTML page. This way it associates the metadata with the page, but stays out of the body. For Octopress, we’ll modify the source/_includes/custom/head.html file. Adding some simple logic and our metadata declarations to the bottom of the file.

source/_includes/custom/head.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
...
<!-- Social media content metadata -->
{% if site.facebook_app_id %}
<meta property="fb:admins" content="{{ site.facebook_app_id }}" />
<meta property="og:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}" />
<meta property="og:site_name" content="{{ site.title }}" />
<meta property="og:url" content="{% if canonical %}{{ canonical }}{% else %}{{ site.url }}{% endif %}/" />
<meta property="og:description" content="{{ description | strip_html | condense_spaces | truncate:200 }}" />
<meta property="og:author" content="{{ site.facebook_page }}" />
{% if page.facebook.image %}<meta property="og:image" content="{{ page.facebook.image }}" />{% endif %}
{% endif %}
{% if site.twitter_user %}
<meta property="twitter:card" content="{% if page.twitter_card.type %}{{ page.twitter_card.type}}{% else %}summary{% endif %}" />
<meta property="twitter:site" content="{{ site.twitter_user }}" />
<meta property="twitter:url" content="{% if canonical %}{{ canonical }}{% else %}{{ site.url }}{% endif %}" />
<meta property="twitter:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}" />
<meta property="twitter:description" content="{{ description | strip_html | condense_spaces | truncate:200 }}" />
<meta property="twitter:creator" content="{% if page.twitter_card.creator %}{{ page.twitter_card.creator }}{% else %}{{ site.twitter_user }}{% endif %}" />
{% if page.twitter_card.image %}<meta property="twitter:image:src" content="{{ page.twitter_card.image }}" />{% endif %}
{% endif %}

The first block is for Facebook. Our conditional just checks to see if a Facebook App ID has been added to our Octopress _config.yml. If a Facebook App ID does exist in our configuration file, we generate the metadata that we need for the post that’s being rendered by Octopress. You’ll also want to put the full url to your Facebook page/profile into your configuration file as well, Facebook uses this to generate it’s content author information. The markup will also include my posts description (set in the YAML Front-matter) as the description of the link. I’ve also added an optional Facebook image tag, that can be specified optionally in your post by including some options in the YAML Front-matter of your post. As an example:

/path/to/post.markdown
1
2
3
4
5
6
7
8
9
10
---
layout: post
title: "An example post"
description: This is my post, there are many like it, but this one is mine.
date: 2013-09-19 18:02
published: false
comments: true
facebook:
    image: http://example.com/path/to/image.png
---

If the image variable exists in the Facebook attribute, the generation logic will include it in the metadata of the page. Facebook will use this as the image that they pull as a preview for your linked content. This is optional, since some posts don’t have pictures, so it doesn’t need to be included.

The second block is for the Twitter Cards. In order to use Twitter Cards, you’ll need to apply as they are still rolling it out. You can apply here by clicking ‘Validate & Apply’. When I applied, acceptance was instantaneous, so just check your email.

For Twitter Cards, we initially check to make sure that a user is specified in the configuration file for Octopress. In Twitter Cards there’s the option to attribute a different author to your content, so I’ve made that an available option. The markup will also include your posts description (set in the YAML Front-matter) as the description of the link. If an author isn’t set, it will just default to whatever user is specified in the _config.yml file. You can set this alternative author in the YAML Front-matter, just like for the Facebook attributes.

/path/to/post.markdown
1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
layout: post
title: "An example post"
description: This is my post, there are many like it, but this one is mine.
date: 2013-09-19 18:02
published: false
comments: true
facebook:
    image: http://example.com/path/to/image.png
twitter_card:
    creator: chamzord
    type: summary_large_image
    image: http://example.com/path/to/image.png
---

This would set Twitter user @chamzord as the creator of the content. This is great if your site has multiple authors. I’ve also provided a way of changing the type of card, since there are a few options, you can reference the proper formatting in the Twitter Cards Validator, by default I use the summary card. Again, just like with the Facebook metadata, I’ve also included a way that I can point to a specific image to generate with the Twitter card.

The whole process is pretty easy, and results in some great looking embedded content on Twitter and Facebook. I’ll probably do a future post about Schema.org tagging and Google+ author integration.

Further Reading

Comments