Social Media Meta Tags: Cheatsheet

Social Media Head Tags

Have you ever copied a link into Facebook or Twitter to find that the image accompanying the URL has absolutely nothing to do with the content of that was on the page? Or maybe it was the description? Here’s how you can control how your content looks when it is being shared on social media by using meta tags. In this article, we’ll be sharing with you a cheatsheet we generated for social media meta tags.

What Are Meta Tags?

Meta tags are small descriptors, that allow easy communication between your site and others, such as search engines and social media sites. The meta tags can provide information in a number of ways, whether it’s providing an more accurate description of your website, or enhancing the way your content looks when shared on social media.

Social Media Meta Tags: Facebook Open Graph Example

Facebook Open Graph

Open Graphs was a technology introduced by Facebook in 2010 and has since been widely adopted by many social media platforms. By including Open Graph meta tags into your webpage, you can identify information to social media that you would like to be shown if your page is shared.

As you can see below this is a fb:app_id property, if filled in with your unique Facebook App ID, you can use Facebook’s analytics tool to track your metrics.

<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="">

 

Facebook Instant Articles

Instant Articles is another Facebook initiative that allows the user to view an article / publishing content by you the user, within the Facebook app.

<meta charset="utf-8">
<meta property="op:markup_version" content="v1.0">

<!-- The URL of the web version of your article -->
<link rel="canonical" href="http://example.com/article.html">

<!-- The style to be used for this article -->
<meta property="fb:article_style" content="myarticlestyle">

 
Social Media Meta Tags: Twitter Card

Twitter Media Cards

Twitter Cards work in a similar way to Facebook. You can attach rich content (photos and videos) to tweets, helping to engage more users and drive traffic to your content. Below, in the source, I have added a link to the Twitter Card Validator, which allows you to test your meta tags are working correctly.

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">

 

Google Plus

Google uses Schema meta tags, it’s basically a community that helps promote structured data schema’s. If you would like to keep your meta tags to the minimum, Google Plus will use the Facebook Open Graph meta’s as fallbacks.

<link href="https://plus.google.com/+YourPage" rel="publisher">
<meta itemprop="headline" content="Content Title">
<meta itemprop="description" content="Content description less than 200 characters">
<meta itemprop="image" content="https://example.com/image.jpg">

 
Social Media Meta Tags: Pinterest Rich Pins

Pinterest Rich Pins (Prevent Pin)

Pinterest will quite happily scrape data of your webpage with or without meta tags. However, if you wish to exclude users from pinning your content, you can add the meta below on either a single webpage or your entire site.

I have attached a link in the source below for “Rich Pins”. These allow you to include data via Open Graph for an enhanced user experience, such as recipe instructions, product prices, and app store information.

<meta name="pinterest" content="nopin" description="Sorry, you can't save from my website!">

 
Social Media Meta Tags: LinkedIn Card Example

LinkedIn

LinkedIn uses the same protocol as Facebook, Open Graph. So if you have your meta tags entered for Facebook, then this will be more than adequate for LinkedIn.

 

Social Media Meta Barebones

If you’re looking for the absolute barebones with basic functionality, this is it. This is optimised to work across Facebook, Twitter, Google Plus, Pinterest and LinkedIn. We would however recommend that you use the information above to maximise user engagement and content viewing on your site.

<title>Page Title. Maximum length 60-70 characters</title>
<meta name="description" content="Page description. No longer than 155 characters." />

<!-- Twitter Card data -->
<meta name="twitter:card" value="summary">

<!-- Open Graph data -->
<meta property="og:title" content="Content Title" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Content Description" />

 

Where Do I Place Meta Tags?

Meta tags are always placed in the <head> part your HTML document. If you’re using a CMS (Content Management System), such a WordPress,
you can simply find a plugin which you can edit the <head> or find a plugin that takes care of it for you.

If you have any good suggestions for WordPress plugins that may be useful to our readers, please let us know below in the comments section.

Comments

comments

Shares