The world wide web has come a long way since the days of ye old meta keywords tag.

The word “meta” in the context of web development can be defined as a way to provide more information about the current HTML document. This subject is much debated and has really evolved over the last 20 years, and even moreso in the last 3 years.

While some folks might be rolling their eyes at how basic this information is, to many people this information is new. I am even going to go as far as saying that this information is vital to the success of any website.

These meta tags are not here just for kicks and for “SEO.” The meta tags used within the examples of this blog post are very essential in the fact that they can make a post look either spectacular or horrible on social media or the search engines.

Generic Meta Tags

Meta description tag

This tag exists to describe the current document. As an SEO, you should really keep this to about 140-160 characters or take out your tape measure and make it about 923 pixels. This tag is also commonly used by search engines to display the description.

<meta name=”description” content=”An accurate description of your website”>

Title Tag

While technically it does not have the word “meta” within it, it still can be classified as one. I for one feel as though the title tag is one of the most important elements of a website, in terms of markup.

<title>The Title of Your Website</title>

Facebook Open Graph

Facebook has conceptualized and developed a standard for social sharing that has extended beyond Facebook and into other social networks such as Pinterest, LinkedIn and more. Markup your website (or blog, video, etc) with these tags for a better looking post on these social networks.

facebook meta tags open graph

OG:type

This can be anything from an article, blog place or product to more complex parameters such as a restaurant or game achievement.

<meta property=”og:type” content=”article” />

OG:title

Very similar to the <title> tag of an HTML document, this meta tag helps Facebook appropriately title your document when shared within its social network.

<meta property=”og:title” content=”Your Title Here” />

OG:description

Similar to the meta description tag, this property helps Facebook describe your document.

<meta property=”og:title” content=”An accurate description of your content” />

OG:URL

The URL of the page you are using. Make sure not to add any extra parameters such as session ID’s or Google Analytics parameters.

<meta property=”og:url” content=”http://www.example.com” />

OG:image

A url of an image for Facebook to use in a preview. Facebook recommends that this image should be at least 1200 x 630px or at minimum 600 x 315px.

<meta property=”og:image” content=”http://example.com/image.jpg” />

OG:site_name

This is more of a global property and ideally should be added site-wide.

<meta property=”og:site_name” content=”Your Company Name” />

article:author

This is kind of a new one. Facebook has recently enabled authorship similar to Google authorship. I personally haven’t meddled with this and don’t know if I will. To utilize this you should add a tag like this:

<meta property=”article:author” content=”https://www.facebook.com/patrickcoombe” />

Ideally this should also be a global property.

Please keep in mind again that most of the Facebook Open Graph meta tags will also “work” on other social networks. LinkedIn is a great example of this. Pinterest has also been known to use Open Graph meta tags when sharing “rich pins.” Google+ will also use Open Graph meta tags but it has also been known to just take random images, the regular <title> of the page etc.

linkedin meta tags

Twitter Card

By marking up your blog post, video, app or product with proper meta tags, you can enable your website to stick out amongst all the other posts on Twitter. One of the great things about Twitter’s meta tags is that they have a built in Twitter Card Validation tool so you can see if you are “doing it right.”

twitter:card

This one matters probably more than any other type of card. There are quite a few to choose from, so choose wisely. I personally like the “summary with large image” type because it takes up the most screen real estate but to each their own.

<meta name=”twitter:card” content=”card_type”/>

twitter:description

As you might have guessed, this will define the description of the post.
<meta name=”twitter:description” content=”Your description goes here”/>

twitter:title

Similar to the description, the title will show up above the description.

<meta name=”twitter:title” content=”The title of your post goes here”/>

twitter:site

Don’t confuse this part with the twitter:creator tag, this should represent your brands Twitter account.
<meta name=”twitter:site” content=”@CompanyTwitter”/>

twitter:domain

Contrary to popular belief, this is not a URL but rather the name of your website such as “Elite Strategies.”

<meta name=”twitter:domain” content=”Name of Your Website”/>

twitter:image

This is where it gets a tad hairy. Obviously this is the image preview for your post. Please refer to Twitter developer documentation for the appropriate size. Depending on the type of card you are using this will differ. Twitter will also try to crop your image if it isn’t perfect.

<meta name=”twitter:image:src” content=”http://example.com/image.jpg”/>

twitter:creator

The Twitter account beginning with the “at” symbol of the person who created the content.

<meta name=”twitter:creator” content=”@AuthorTwitter”/>

twitter card meta tags