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.
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.
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.
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.
OG:type
This can be anything from an article, blog place or product to more complex parameters such as a restaurant or game achievement.
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.
OG:description
Similar to the meta description tag, this property helps Facebook describe your document.
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.
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.
OG:site_name
This is more of a global property and ideally should be added site-wide.
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:
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.
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.
twitter:description
As you might have guessed, this will define the description of the post.
twitter:title
Similar to the description, the title will show up above the description.
twitter:site
Don’t confuse this part with the twitter:creator tag, this should represent your brands Twitter account.
twitter:domain
Contrary to popular belief, this is not a URL but rather the name of your website such as “Elite Strategies.”
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.
twitter:creator
The Twitter account beginning with the “at” symbol of the person who created the content.
