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”>
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.
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” />
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” />
Similar to the meta description tag, this property helps Facebook describe your document.
<meta property=”og:title” content=”An accurate description of your content” />
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.
This is more of a global property and ideally should be added site-wide.
<meta property=”og:site_name” content=”Your Company Name” />
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:
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.”
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”/>
As you might have guessed, this will define the description of the post.
<meta name=”twitter:description” content=”Your description goes here”/>
Similar to the description, the title will show up above the description.
<meta name=”twitter:title” content=”The title of your post goes here”/>
Don’t confuse this part with the twitter:creator tag, this should represent your brands Twitter account.
<meta name=”twitter:site” content=”@CompanyTwitter”/>
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”/>
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.
Hello I'm Patrick Coombe and I'm the CEO and Founder of Elite Strategies, an agency I started in 2009. One of the main reasons I love blogging about SEO is the research it takes to come up with the posts. It allows me to not only write about what I love, but to learn more about the industry in the process. I hope you enjoyed this post, if you did consider sharing it or even better linking to it!
Now, one common misconception that's been floating around the inner-tubes over the last few years is this: When Google displays your page / snippet in the search engines, it uses the meta description as the snippet description. While this used to be a cold hard fact, it started to become…
Before we go any further, let's define what exactly is a breadcrumb in web design. Breadcrumbs are contextual and navigational links usually placed at the top of the website, normally below the main menu but above the main content section. Here is a closeup illustration we've made to illustrate what…
Unsplash is a great source for free images that you can do whatever you want with, and not have to worry about licensing or attribution. Over the past year or so, I've used Unsplash amongst a number of other websites for stock images, blog post featured images and other uses.…