Skip to content
Sitemason - Build on Us

Get Your Content Noticed on Social Media

Or, I Never Metadata I Didn't Like

Content Validation Illustration by Kevin Kennedy, strazi.org

Illustration by Kevin Kennedy, strazi.org

How do you make your blog post or promotional event look great and get more clicks in all those social media platforms? We're talking about the nice image, title, summary and link you see in Facebook posts, Twitter cards, and Google search results. We're going to explore how to get your posts looking fantastic like the below images related to a previous Sitemason blog post:

 

Screenshot of a Sitemason article as a Facebook post Screenshot of a Sitemason article as a Twitter card
Facebook Post Twitter Card

 

Screenshot of a Sitemason article in Google's SERP
​Google Search Results

It's all about the meta

These services all look for meta tags in a page to determine how to present the material. Meta tags are HTML tags that describe and provide information about other data, also called metadata. Meta tags appear in the <head> of a document and are not displayed anywhere on the page. At a minimum, your page should always have Title and Description meta tags. These are essential for search engine indexing of your site.

Social media services and search engines look for meta details to populate posts (Facebook, Google+), more info cards (Twitter), and contextual structured data search results (Google). They all look for meta tags with specific attributes to populate content for their various needs. To varying degrees, they all expect use of their own custom meta attributes for displaying content on their networks. However, every web page should take advantage of generic general use meta tags like:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="generator" content="Sitemason">
<meta name="description" content="Sitemason considers design best practices for a project's ultimate success from the view of the client and web developer.">
<meta name="author" content="Billy White">

Learn more about basic HTML meta tags .

Facebook Open Graph

Facebook has engineered its own protocol for describing data called Open Graph, which is the software environment for accessing and distributing Facebook data. When posting a URL to Facebook, it will search the page for Meta tags with Open Graph elements in the "property" attribute. An example of this is:

<meta property="og:title" content="Designing for a Successful Web Project">

Notice the "og:" preceding "title". This is the format for Facebook Open Graph data when publishing a Facebook specific Meta tag. A subset of Facebook meta tags might then look like:

<meta property="og:image" content="/files/cQxT4Q/designer01.jpg/main.jpg">
<meta property="og:url" content="/about/news/designing-for-a-successful-web-project.696537">
<meta property="og:title" content="Designing for a Successful Web Project">
<meta property="og:type" content="article">
<meta property="og:description" content="Sitemason considers design best practices for a project's ultimate success from the view of the client and web developer.">
<meta property="article:author" content="https://www.facebook.com/billywhite4">

See a full list of Facebook's Open Graph object properties.

Twitter Cards

In 2012, Twitter began releasing "expanded Tweets" as a visual accompaniment to Twitter's historically restrictive 140 text characters. Eventually, the official and documented Twitter Cards emerged, and now publishers have a protocol for adding context to a page that is shared on Twitter, similar to Facebook posts. Using the same article in the Facebook example, below is example Twitter meta:

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@sitemason">
<meta name="twitter:title" content="Designing for a Successful Web Project">
<meta name="twitter:description" content="Sitemason considers design best practices for a project's ultimate success from the view of the client and web developer.">
<meta name="twitter:creator" content="@billywhite4">
<meta name="twitter:image:src" content="/files/cQxT4Q/designer01.jpg/main.jpg">
<meta name="twitter:domain" content="sitemason.com">

See a full list of Twitter Cards markup tags.

Structured Data and Schema.org

The world wide web wouldn't be the wild wild west if yet another service didn't have competing meta standards. Our friends at Google prefer microdata based on standard schemas published by Schema.org.

As an alternative to putting pertinent metadata in the <head> of a page, microdata is added to the content as it appears on the page, usually using itemscope, itemtype, and itemprop attributes. An example using the same Siteamson article example is below:

<body itemscope itemtype="http://schema.org/Product">
     <h1 itemprop="name">Designing for a Successful Web Project</h1>
     <img itemprop="image" src="/files/cQxT4Q/designer01.jpg/main.jpg" />
     <p itemprop="description">Sitemason considers design best practices for a project's ultimate success from the view of the client and web developer.</p>
</body>

You may recognize this method from Sitemason's article on Google Authorship, which uses microdata to link the authoritative author of an article to their writings elsewhere on the web.

The nice thing about Google+ however, is that it does recognize both Open Graph data as well as standard meta, though it of course prefers Schema.org microdata. Learn more about Google+ Snippets and schema documentation.

Testing with Validators

Before I post any articles to social media, I always run them through three validators for the major services we use. Google Rich Snippets, Facebook Debug, and Twitter Card Validator.

This takes less than five minutes, and will alert me to any formatting or code errors I may have on the page. Twitter's validator will even give me a nice preview of how I can expect my article to look when posted on Twitter.

Moz has an excellent recent article on their blog that includes meta templates as a starting point for making your posts meta-rific. 

Billy White headshot thumbnail

Billy is a web developer and Chief Product Officer (CPO) at Sitemason, and has been with the company since 2006.  Read more about Billy White.

Contact Billy:

Recent Forum Posts

Warning: file_get_contents(https://sitemason.zendesk.com/forums/279545/entries.json): failed to open stream: HTTP request failed! HTTP/1.1 404 Not Found in /mnt/files/s/sitemason.com/www/smTemplate/inc/support/zendesk-pull.php on line 11 Warning: usort() expects parameter 1 to be array, null given in /mnt/files/s/sitemason.com/www/smTemplate/inc/support/zendesk-pull.php on line 14 Warning: Invalid argument supplied for foreach() in /mnt/files/s/sitemason.com/www/smTemplate/inc/support/zendesk-pull.php on line 17