Basics of HTML Meta Tags You should know

Being a blogger user i strongly recommend to have meta tags for your website, page or content. This meta tags are playing increasingly important role in maintain SEO.

HTML Meta tags are officially page data tags that lie between the open and closing head tags in the HTML code of a document.

 The text in these tags is not displayed, but parse able and tells the browsers (or other web services) specific information about the page. Simply, it “explains” the page so a browser can understand it.

Here’s a code example of Meta tags:

<head>
<title>Not a Meta Tag, but required anyway </title>
<meta name="description" content="Description Here" />
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
</head>

Live Example
Just right click over any part of this webpage and click view page source and you will get to know that Meta tags are below head tag.

WHY USE META TAGS?
Meta tags can get your website description and all that for search engine.
The Description Meta Tag

This is what the description tag looks like:

< Meta name=”description” content=”Your Description Here” />

Ideally, your description should be no longer than 155 characters (including spaces). However, check the search engine results page (SERP) of choice to confirm this. Some are longer and some are shorter. This is only a rule of thumb, not a definite “best practice” anymore.

The “description” Meta tag helps websites in two important ways:

“Description” tells the search engine what your page or site is about: For the search engine to understand what your page is about, you need to write a good description. When Google’s algorithm decides a description is badly written or inaccurate, it will replace that description with its own version of what is on the page.
Wouldn’t you prefer to describe your site to potential customers or visitors using your own words rather than leaving it in Google’s artificial hands?

“Description” helps with click through rates to your site: Writing a good description not only helps keep Google from rewriting it, but also helps you get good more people clicking through to your site. A well-written description not only tells users what is on your page, but also entices them to visit your site. A description is what shows up here in the search engine results. It is like good window dressing. Sites with poor descriptions will get fewer clicks through and the search engines will demote your site in favor of other sites.
Two other quick Guides on Meta description tags:

Empty Descriptions:
Can a description be empty? Yes. When it is empty Google and Bing will fill it in for you. In fact, sometimes (e.g., for blogs) you may prefer Google’s or Bing’s version.
(Personally though, I always fill it in whenever possible, preferring my version to theirs, but if you have a small staff, this isn’t always practical.)

Quotes:
Don’t use full quotation marks (“”) in your description. It will likely cut off your description. Use single quotes to avoid this issue.
For your websites, write a Meta tag is easy these days.

Facebook’s OpenGraph tags
Facebook’s OpenGraph allows you to specify metadata to optimize how your content appears in a user’s timeline when they share your link. The added benefit of using this data is that by creating an “Edge” in Facebook you can obtain some fantastic data about the users checking out your content via Facebook Insights.

If you don’t use Open Graph tags Facebook will default to standard metadata.

  1. og:title –This is the title of the piece of content. You should use this as a headline that will appeal to the Facebook audience. It is completely ok to use a different title than the one on the actual site as long as the message is ultimately the same. You have 95 characters to work with

    Format:
    <meta property=”og:title” content=”Creative Blogging Tips is Awesome”/>

  2. og:type – This shows the type of object your webpage is. For your purposes it will usually be blog, website, article etc…

    Format:
    <Meta property=”og:type” content=”article”/>

  3. og:image -This is the image that Facebook will show in the screenshot of the content. Be sure to specify a square image to ensure the best visibility in a user’s timeline. If you don’t specify an image at all you are left to the mercy of the user to pick which image represents your content based on what Facebook can fetch. That is typically not good to catch attraction from viewers.

    Format:
    <meta property=”og:image” content=”Image Url goes here”/>

  4. og:url– This is simply the URL of the page. You should specify this especially if you have duplicate content issues to make sure the value of the edge in Facebook is consolidated into one URL.

    Format:
    <meta property=”og:url” content=”Url Goes Here”/>

  5. og:description -This is the description Facebook will show in the screenshot of the piece of content. Just like the standard Meta description it should be catchy and contain a call to action, but in this case you have nearly twice the number of characters to work with. Make sure this too speaks to the Facebook audience.

    Format:
    <meta property=”og:description” content=”Some Eye-catching description goes here”/>

  6. fb:admins – This metatag is critical for getting access to the wealth of data made available via Facebook Insights. You simply have to specify the Facebook User IDs in the metadata of those users you want to have access.

Link for Facebook Insights documentation.

Format:
<meta property=”fb:admins” content=”USER_ID”/>

For any doubts, Feel free to drop in comments below.

Share This Now:

Add a Comment

Your email address will not be published. Required fields are marked *