Social Meta Tags Checklist
November 11, 2017 by Andreas Wik
Do you have the necessary social meta tags included on your site? Do you know how your content looks on different social platforms when somebody shares a URL to your website?
This thing with meta tags is pretty boring, I know, but we all know it’s necessary. And while it can feel like quite a jungle, once you just go through the process once and add the bare minimum social tags, it won’t be scary at all anymore. It’s a quick fix! Not to mention you are in a way better position than before when it comes to getting traffic from sites like Twitter, Facebook and LinkedIn.
The way it works is that when you post a URL on social platforms, their system visits the URL and scans the HTML to see if they can find specific meta tags containing information like title, featured image, page description, or maybe the date that the article on the page was published.
Let’s go through what tags are needed in order to make your content look good when people share your content.
Here, for example, is what a tweet looks like when someone posts a URL from my old blog gurksaft.com:
Open Graph (Facebook, LinkedIn, Google+ and more…)
Let’s start with the Open Graph Protocol tags. These are used by tons of different sites. Here are the most necessary ones, pretty straightforward. Just title, description and image:
<head>
<meta property="og:title" content="My page title" />
<meta property="og:description" content="My page description, for example excerpt of article" />
<meta property="og:image" content="image.jpg" />
</head>
If you have more information to share, then do go ahead and add some more tags. Here is a full list of the tags used here on Gurksaft (automatically generated by a WordPress plugin, more on that later in this article):
<meta property="og:locale" content="en_GB" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Article headline" />
<meta property="og:description" content="Article excerpt" />
<meta property="og:url" content="http://gurksaft.com/social-meta-tags-checklist/" />
<meta property="og:site_name" content="The Gurksaft Journal" />
<meta property="og:updated_time" content="2017-02-06T18:33:45+00:00" />
<meta property="og:image" content="article-featured-image.jpg" />
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="300" />
You can see og:site_name with the title “The Gurksaft Journal” which is the name of this site (no shit) and og:type to let them know that this is an article. The dimensions of the featured image are also given, using og:image:width and og:image:height.
You can read more about this on the Open Graph Protocol website.
Twitter Meta Tags
These are the meta tags specific for Twitter:
<meta name="twitter:card" content="summary" />
<meta name="twitter:description" content="Article excerpt" />
<meta name="twitter:title" content="Article headline/title" />
<meta name="twitter:site" content="@gurksaftjournal" />
<meta name="twitter:image" content="article-image.jpg" />
<meta name="twitter:creator" content="@AndreasWik" />
The first one – twitter:card – can have three different values: summary, summary_large_image, app or player. A video site, for example, might use player. The rest of the meta tags here are very self explanatory: title, description, image… All the same as for Open Graph. We have also added the Twitter username of the author of this article (twitter:creator – @AndreasWik).
Read more on Twitter’s dev site.
WordPress Plugin – Yoast SEO
If you’re running a WordPress site, then I can warmly giving the Yoast SEO WordPress plugin a go. It creates all the meta tags you need for good Search Engine Optimization, plus a lot of other goodies. It’s really awesome.
That’s it for now.
Take care, have a good one!
Share this article
