This is an easy tutorial to add proper HTML meta tags to your website pages and particularly your blog. This is important to not only help search engines index your site pages properly, it also affects the way your links are shared across the various social media sites like Facebook and LinkedIn.
With proper meta tags you can include things like a thumbnail image, title and description as well as share embed video. Each time someone likes or shares your page, the information about the page is automatically pulled from the source. You are that source, and we'll show you how to control what other sites pull from your site. It's easy! let's look at how starting with the basics.
The 2 main concerns we are looking to address in this blog are meta tags for search engines and meta tags for sharing. They are each handled by their own group of HTML tags that are found between the head tags in your HTML document.
As an example, I am going to break apart the meta tags for this blog page, starting with the standard tags.
The title is typically the first thing people see before even getting to your site. Spending the time to write a good title is an important part of good website design. The title tag is what shows up not only in the top left corner of your browser, but it is also the line Google will show in search results.
The author tag has recently become a very important meta tag since the invention of Google plus. If you have a Google plus profile, which you should, by including this tag with the correct name and email that matches your profile, will be listed as the "author" in some search results. This would include a small thumbnail of you if you have one on your Google plus profile. If you also include a link to your Google profile in your blog, as well as a link back, you'll find this process goes very quicklyStart with the basics
These first meta tags are standard and should be on all pages of your website. You’ll notice how the title, subject and the description all describe the content in this blog. The title is a very important part of optimizing your site for search engines. If you are trying to optimize for a particular keyword, like create meta tags , you should definitely include these words in your title, subject and description.
The robots tag is a somewhat depreciated tag, but I like to include it just to be sure my intention for this page is clear to any robots that may crawl my site. It simply says that I want this page indexed, and that the links on this page should be followed. You don’t specifically need this tag, but if you see a noindex or nofollow robot tag in your source code, you should remove it if you want the page to be listed.
Make your shares and like stand out from the rest Have a look around some of the LinkedIn groups and you’ll notice some post really stand out from the others. Not only do they have appropriate eye catching thumbnails, they have good titles and a great first paragraph that are all neatly tied together.
The next tags are specifically for the purpose of sharing across social media platforms. Each tag resembles the standard tag with a few slight differences in their properties. These tags are called OG or Open Graph tags and are meant to be a standardized way to share your information with pages like Facebook, Twitter, Reddit, Stumbledupon and LinkedIn.
These meta tags closely resemble the standard tags with a few slight variations on title and description tags. You will notice the og:type tag is set to article. This is important unless you want facebook to create new fan pages for each of our blog posts. If you want facebook and other sites to treat a blog post as an article in a website and combine the likes to one fan page, use the article value for this property.
The og:url should be the exact URL for the page, not the home page or another page of your website or some social media sites will not be able to pull the correct content. Instead they may try to pull the meta tags from the wrong page and distort your results.
To display a small thumbnail image with your posts and shares, the og:image meta tag can be set to the exact URL of your thumbnail. This works best if your thumbnail is exactly square or very close to square, as most sites will attempt to crop your image square for you. This rarely works out well, so prepare your image ahead of time for best results. Also, Facebook recommends a size of at least 200px. Images of other sizes do work, but to be safe I try and make my images about 250px wide and 250px tall.
The next 2 tags are specifically for Facebook.
These meta tags tell Facebook who the administrators are and where the Zestimedia Facebook app I created for adding Facebook comments to my website.
Facebook has blessed us all with a free tool that analyzes and displays the results of what the robot sees when it crawls your site. It also highlights any errors or missing tags, making it easy for you to write perfectly formed OG meta tags. In addition, Facebook will cache or store the information it scrapes from your page the first time it is shared or liked. If your content should change, using this tool will also clear the Facebook cache and re-scrape it for you. Try it out with this page and compare it with other pages. Which would you rather have on your website.http://developers.facebook.com/tools/debug
The great thing about meta tags is how we can carefully control what people see BEFORE they actually get there. All of these meta tags in some way or another make it easier for automated systems to gather information about your page and then use them for others to find and click on. By perfecting the use of meta tags you should not only increase your visibility but also increase the likelihood of someone clicking your link and adding traffic to your page.