Tuesday, April 10, 2012

Adding meta-tags to your blog or to a blog-post

This article describes meta-tags: why and how to add them to your blog.  


It applies to any type of meta-tag except the description-tag:  Blogger introduced special editing tools for them in late March 2012, so they are covered separately.


What is a meta-tag, and why would you use one

A meta-tag is a piece of HTML code that is found inside a webpage, and contains information about the page.

When HTML was invented, meta-tags were used for data about who made each page, what it's about, and what keywords apply to it. Originally search-engines used these tags to build indexes (ie databases) about where to find things.  However this doesn't often happen now: spammers used meta-tags to lie to the search-engines, so the search-engines got smarter and ignored meta-tags.

Today, however, meta-tags are still used to give "information" about websites to electronic visitors, for  many purposes.

For example, a search-engine or directory may ask you to prove that you do own a website which you claim to own, by adding a meta-tags of their choice to it. PInterest lets website-owners opt out of having their sites shared / pinned by adding a specific meta-tag that effectively says "Nope, you're not allowed to pin this one". And Facebook uses (still? maybe it's used now) open-graph meta tags to let us set the picture and text that are shown when a page is shared.

There are a wide variety of meta-tags still in use on the web today.  And they are a clever idea: no one needs to set the "rules" about what meta-tags are allowed - they just need to be available to whatever electronic-visitors see them on a website.


What does a meta-tag look like

These are some example meta-tags:
<meta name="description" content="Adding pictures to your blog without using gadgets" />
<meta name="keywords" content="HTML,images, filestore, picture" /> 
<meta name="author" content="Mary Smith" />

Each one has two parts (in technical terms, this arrangement is called a "name/value pair"):
  1. some text that says what the meta-tag is about  (eg description, author)
  2. some text that contains the value for this case (eg  "Mary Smith")

This idea has been used in other ways too - instead of "name" some meta-tags use other values, like
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />  

If you look at your blog's template, you may find that there are already meta-tags there, which Blogger added to every post and page.   For example in Blogger-HAT's template I can see:
<meta content='some-verification-codes-from-Google' name='google-site-verification'/>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
      <meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>
<b:else/>
The first is a verification tag from webmaster central that I added a long time ago, while the others are meta-tags that Blogger developers decided would be good to have.


What does each meta-tag apply to


Spot the odd one out, North Bishopden Wood - geograph.org.uk - 1209764
Odd One Out
Nigel Chadwick [CC-BY-SA-2.0],
via Wikimedia Commons
Before adding a meta-tag you need to decide whether it applies to every screen (ref:  Blogger, blogs and bloggers, Posts, Pages and screens) that your blog shows, or whether it only applies to an individual post.

As a general rule, think about what the content of the meta-tag means:  unless you can see how it specifically relates to material in a post, then you are probably best adding it to your whole blog.


How to add a meta-tag to a blog-post

Description meta-tags are a special case, and I'll be publishing a separate article about them another day.

But for all other types of meta-tag, Blogger's Post-editor doesn't allow any other sort of meta-tags: even if you go into HTML mode and type them in, they will be automatically removed when you publish the post or look at in again in Compose mode.

So to add other tags to specific posts, you need to


1)   Edit your template - don't expand the widgets.


2)   Find this text:
<head> 
You may need to look for <head SOME-OTHER-STUFF>, depending on what template you are using. Usually I  search for "<head", ie without the closing bracket, and make sure that I do what is needed after the closing bracket >.


3)   Add this line of code after the <head> tag:
<b:if cond='data:blog.canonicalUrl == "PUT-THE-POST-URL-HERE"'>
< THE META-TAG YOU WANT TO ADD>
</b:if>
replacing:
  • <THE META-TAG YOU WANT TO ADD> - with the actual meta-tag details, and
  • PUT-THE-POST-URL-HERE with the full address of the post. 

This means you cannot add the meta-tags until you know the post's URL, ie after the post has been published for the first time. This is a little tedious, but not impossible. You just need to publish the post, get the URL, and then edit your template and add the meta-tag info for the post

Alternatively, you could just apply the tag to your so-called home page by adding the tag with a "home page only" conditional, eg
<b:if cond='data:blog.canonicalUrl == data:blog.homepageUrl'>
THE CODE FOR YOUR META-TAG(s) GOES IN HERE
</b:if>


Adding meta-tags to your whole blog

This is most appropriate for tags that genuinely should apply to every single page on your blog:   what these are depends on how your blog is organised, and what you expect the meta-tags to be used for.

Again, description meta-tags are a special case, and will be covered separately.

You can add non-description meta-tags by editing your template and putting the meta-tag statement somewhere in the header, ie
after  <head  SOME-OTHER STUFF>
before  </head>

Make sure that you put the meta-tag statement in-between the other HTML statements in the header, ie after a closing > and before an opening one>


What your readers see

People who visit your blog won't see anything different provided you've installed the meta-tags properly.

But search-engine-spiders and other computer-based visitors will read the contents of the meta-tags. This may cause them to display things about your blog differently at their end (eg a description within Facebook), but won't make any difference when a human visitor is looking at your blog.


Is it worth it?

Only you can decide if it's worth the trouble of adding meta-tags to your blog.

If you're doing it so your site ownership can be verified, then it's almost certainly worthwhile.

And obviously Blogger thinks that description tags are worthwile - because they've given us a way to edit them inside the post-editor.

But if you're doing it for SEO, so that your blog ranks higher in search results, or looks more attractive / clickable on the result-pages, then the only answer is "it depends". There area a lot of unknowns about SEO: there are experts who are adamanent that certain meta-tags are essential for your blog to do well in search. They may be right.  They may have been correct - for a few weeks or even months or years, but some people believe they are not correct now.   Others say that meta-tags still matter, because tags, especially description tags, influence what body-text is shown in seach-engine-result-pages (SERPS).   But really, only the search-engine makes know the real answer.   And even then, their answer may change tomorrow if a new search-algorithm change is applied.

What do you think?

Do you have specific examples where adding a meta-tag has made your blog better in some way?




Related Articles

Post snippet and post-thumbnail:  summaries of your blog post

Blogger, blogs and bloggers, Posts, Pages and screens

Giving your blog a home page

How to edit Blogger posts that have already been published

Share this Article

URL:

HTML link code:

BB (forum) link code:

Subscribe to Blogger-hints-and-tips

FeedBurner will send a confirmation message. Click the verify link in it to start your subscription.

Follow Me on Pinterest Subscribe to Blogger-HAT on Google + RSS subscription icon Follow BloggerHAT on Twitter

19 comments:

  1. Hi, this is not related to your post, but I want guidance to how I get a gadget for the subscribe options such as you have in the top right. Can you advise?

    Barry

    ReplyDelete
    Replies
    1. Hi Barry, good question. Most of the tutorials that I've seen have instructions about adding various fancy gadgets, that I really don't like. So I've started an article about how to make an ultra simple gadget, it's about 1/2 done, but I've got a lot on at the moment so it may be a week or so before I get it finished. Keep an eye on the blog for it.

      Delete
  2. Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The content of elements must consist of well-formed character data or markup. this is what i got

    ReplyDelete
    Replies
    1. I got a similar message the first time. Then I took the <> off the second line ( < THE META-TAG YOU WANT TO ADD> ) and it worked fine.

      Delete
  3. Very good article. Correctly said, "If SEO algorith changes tomorrow, all this exercise go useless. And who know that might have changed already!"

    ReplyDelete
  4. thank for this from bosnia

    ReplyDelete
  5. Such a wonderful article. I was searching about adding meta tags in blogger and finally I found your blog.

    I have a little question if you don't mind to answer.

    If you blog description is showing in below title tag in your main blog header section but you still put description in meta, will Google Bot assume it duplication meta tags?

    ReplyDelete
    Replies
    1. Hi

      It really does depend on how your template is set up, but in general I don't think so: the description put onto the Description section does not get used in a meta-tag in most templates.

      Delete
  6. hi, I am really desperate. I do not really now HTML but I put some meta tags into it and I think is broken. When I cjeck there are not mega tags on my blog even I had put many tags into the main page and seperatly to my posts.
    Maybe you could help me?

    ReplyDelete
  7. please post an image of what you did after <head in this article, it will be very helpful for me and other users...

    ReplyDelete
  8. during adding meta tag to whole blog, we must add ">" after <head which u havenot showed in article.check pls..

    ReplyDelete
  9. Thank you so much! I needed to verify my blog on Pinterest and your "How to add a meta-tag to a blog-post" steps worked like magic. Perfection!
    Grateful
    Elizabeth

    ReplyDelete
  10. This one was really helpful...especially the adding tags to posts..

    ReplyDelete
  11. Just what I was looking for.

    As for meta tags, I think it still does matter in SEO. Google still does have it in their SEO guide. Even with the advent of rich snippets it was described that the content displayed in SERPs are based on data collected from your page content, meta tags, profile page, other citations, etc. and it displays the information that best fits with the search query.

    ReplyDelete
  12. thanks so much, I can however see the meta tag of my blog displayed in black at the very top of my blog, and I wonder how to keep it, but make it invisible? I have tried adding the colour information, but it did not change a thing. Can you please help? Thanks so much.

    ReplyDelete
  13. This comment has been removed by the author.

    ReplyDelete
  14. Hi,
    I have a question about metatag, that I want to add some post details like post authors (mentioned in a post body) to the meta tag, each post has a different author. How can I do that?

    if I write the author's names with class="authors" then link this in meta tag?

    ReplyDelete