Photo of Joakim Hedlund

Joakim Hedlund

Web enthusiast

Compressing your social meta tags

Last updated

We've all been there. Adding the Twitter card tags, the Open Graph tags, the Google+ tags; you end up with so much duplicate content in your header that your head starts to spin.

Your SEO (surprisingly) will not take damage from it, but it looks silly and we've all been taught to keep our code DRY.

Normally, your code will look something like this:

<meta name="description" content="This page is about things, and this text summarizes them.">

<meta itemprop="name" content="My page">
<meta itemprop="description" content="This page is about things, and this text summarizes them.">
<meta itemprop="image" content="https://placehold.it/128x128">

<meta name="twitter:card" content="This page is about things, and this text summarizes them.">
<meta name="twitter:title" content="My page">
<meta name="twitter:description" content="This page is about things, and this text summarizes them.">
<meta name="twitter:image:src" content="https://placehold.it/128x128">

<meta property="og:url" content="http://example.com/my-page">
<meta property="og:title" content="My page">
<meta property="og:description" content="This page is about things, and this text summarizes them.">
<meta property="og:site_name" content="My site name">
<meta property="og:image" content="https://placehold.it/128x128">

What if I told you these could be combined into one group of tags? We can do this because of the different name, itemprop and property attributes used by the different schemas. Take a look:

<meta name="twitter:card" content="summary"/>
<meta property="og:site_name" content="My website name"/>
<meta name="twitter:image:src" property="og:image" itemprop="image" content="https://placehold.it/128x128"/>
<meta name="twitter:title" property="og:title" itemprop="name" content="My page - My website"/>
<meta property="og:url" content="https://example.com/my-page"/>
<meta name="description" content="This page is about things, and this text summarizes them."/>
<meta name="twitter:description" property="og:description" content="This page is about things, and this text summarizes them."/>

These combined tags will work just fine, but I should mention that they are technically not allowed due to the Microdata specification.

For a working example, see https://klr.nu/ports/grand-anse

Update (2016-06-21)

Turns out Twitter actually falls back to using Open Graph when their own format is missing, so you should be able to use this instead:

<meta name="twitter:card" content="summary"/>
<meta property="og:site_name" content="My website name"/>
<meta property="og:image" itemprop="image" content="https://placehold.it/128x128"/>
<meta property="og:title" itemprop="name" content="My page - My website"/>
<meta property="og:url" content="https://example.com/my-page"/>
<meta property="og:description" name="description" content="This page is about things, and this text summarizes them."/>

Related: The Essential Meta Tags for Social Media | CSS-Tricks