Lukas Z's Blog

Twitter Cards and Open Graph Metatags in Octopress

To continue on the topic from the last post, here is how I added Twitter-cards and open graph metadata to this blog.

It runs on Octopress so to add the new html-tags I edited source/_includes/head.html like this:


<!-- ... omitted beginning of head.html -->

<head>
  <meta charset="utf-8">
  <title>{% if page.title %}{{ page.title }} - {% endif %}{{ site.title }}</title>
  <meta name="author" content="{{ site.author }}">

  {% capture description %}{% if page.description %}{{ page.description }}{% else %}{{ content | raw_content }}{% endif %}{% endcapture %}
  <meta name="description" content="{{ description | strip_html | condense_spaces | truncate:150 }}">
  {% if page.keywords %}<meta name="keywords" content="{{ page.keywords }}">{% endif %}

  {% capture canonical %}{{ site.url }}{% if site.permalink contains '.html' %}{{ page.url }}{% else %}{{ page.url | remove:'index.html' }}{% endif %}{% endcapture %}
  {% capture ogtype %}{% if page.title %}article{% else %}blog{% endif %}{% endcapture %}

  <!-- twitter card -->
  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="@lukaszielinski">
  <meta name="twitter:creator" content="@lukaszielinski">
  <meta name="twitter:title" content="{% if page.title %}{{ page.title }} - {% endif %}{{ site.title }}">
  <meta name="twitter:url" content="{{ canonical }}">
  <meta name="twitter:description" content="{{ description | strip_html | condense_spaces | truncate:150 }}">

  <!-- open graph -->
  <meta property="og:title" content="{% if page.title %}{{ page.title }} - {% endif %}{{ site.title }}"/>
  <meta property="og:type" content="{{ ogtype }}"/>
  <meta property="og:url" content="{{ canonical }}"/>
  <meta property="og:site_name" content="Blog of Lukas Zielinski"/>
  <meta property="og:description" content="{{ description | strip_html | condense_spaces | truncate:150 }}"/>

  <!-- ... omitted rest of head.html -->
</head>

If you are using a theme you will probably have to edit the file .themes/theme_name/_includes/head.html.

P.S.: You can follow me on Twitter.

Comments

Webmentions