Site Moved

This site has been moved to a new location - Bin-Blog. All new post will appear at the new location.

Bin-Blog

Removing Description and Keyword Meta Tag Considered Harmful

Many in the SEO field have commented on the uselessness of the meta tags - primarily of the Keywords meta tag. Many have even recommend it be removed as most of the Search engines ignore it completely. This is because many SEO 'experts' have abuse it a lot trying to game Google. But I will not recommend removing either of these tags. Both have great use - if your visitors are using any of the popular social bookmarking tools like Del.icio.us or Furl.

SEO and Meta Tags

The phrase 'meta tag' became a synonym for SEO.

Earlier, the primary use of these tags were for the SEO benefits it had. It was used so much that the phase 'meta tag' became a synonym for SEO. But lately, most search engines are ignoring it. Now most of the SEO heavy weights do not recommend using these meta tags.

The description tags are still in use as they appear in the SERPs. But most people ignore the keyword meta tag.

The description meta tag appears in the Google search result pages.

Bookmarking Tools and Meta Tags

Social bookmarking services like Del.icio.us or Furl have seen a huge popularity boost in the last few years. Most of us are familiar with the bookmarklets they have provide us. These bookmarklets(or favelets) make it easier to bookmark a page.

Let us take a look at the case of del.icio.us - easily the most popular social bookmarker(is that a word?). It requires 4 inputs about a page...

  • URL(Mandatory)
  • Title(Mandatory)
  • Description
  • Tags

The bookmarklet will try to fetch these data from the page automatically. The URL will be the value of 'document.location.href' and Title will be 'document.title'. So these will be automatically filled out for you.

But what about the rest? Not using tags when bookmarking is a sin against man and nature! I mean, that is the whole point of 'Web 2.0' social bookmarking.

The description field is just as important - if you wish to search through you bookmarks, nothing helps more than the data given in this field.

Description meta Tag

One option is to manually enter the data into these fields. Tags, one can fill out - but what about the description? Are you willing to type out a good description every time you bookmark a page? Not me! The best approach to get this field automatically is to use the meta description field. Just use DOM to get the data and pass it to the posting url.

del.icio.us

Del.icio.us logo

Unfortunately, del.icio.us's bookmarklet don't support this tag. I cannot blame them for that - as usual I place the blame on Microsoft. To be more precise, the blame falls on IE. To be even more precise, it is the fault of IE's inability to handle bookmarklets(or favelets, as it is known in IE) that is more than 488(it differs in different versions) characters in length.

It is not possible to compress the meta tag searching feature in 488 characters - so del.icio.us has left this feature out.

Furl

Furl Logo

Fortunately, furl don't have any such limitations. In the grand tradition of AListApart, furl created a bookmarklet that is just shy of 2000 characters. But this don't support the description meta tag either. What this does is capture the selected text and use it as the description.

Most sites don't have this(description meta) tag. In the sites that have it, it is not properly implemented. They just use the same description through out the site.

There is a good reason as of to why the description meta tag is not supported in the bookmarking bookmarklets(hey, that rhymes). It is because the majority of sites don't support it. Most sites don't have this tag. In the sites that have it, it is not properly implemented. They just use the same description through out the site. Yes, its a sad world we live in.

Anyway, it is not so hard to modify the bookmarklet to include this feature - the hard part is decoding the bookmarklet. You can use some JavaScript beautifier to do that. After that, it is a trivial matter to insert the code to fetch the meta tag. However, this bookmarklet will only work on good browsers - which is a good thing - it will force you to abandon IE. Hey, I can hope, can't I?

Keywords = Tags

Since I spent this much time rambling about meta description, you must have guessed the use of the 'other' meta tag - keyword. Yes, they can be used to tag the page. As you might have known...

Web 1.0 : Keywords
Web 2.0 : Tags

If you think descriptions were bad, keywords are doubly so.

If you think descriptions were bad, keywords are doubly so. They were abused by SEO practitioners everywhere. It is very difficult to find a page with keywords that can act as tags. Anyway, when creating pages, please use keyword that can be used as tags when bookmarking the page.

As it the case of description, keyword can easily be fetched and given to the bookmark posting url. You still have to modify the script as no social networking sites have included this feature in their bookmarklet(with very good reason). A thing to note here is that all ',' must be replaced with a 'space'.

In Conclusion

In this age of sharing data, the description and keyword meta tags have great importance. So use them in your sites - even if you are adviced against it. And when you do use it, don't use it to target search engine spiders. Create it in a way that would be useful to human beings.

Read More...

Semantic Pullquotes

"Pullquotes are basically some important text in the content that is repeated on a side with emphasis"

Roger Johansson of the 456 Berea st. recently wrote an article on how to make pullquotes using javascript. Pullquotes are basically some important text in the content that is repeated on a side with emphasis so that people will notice it sooner. This is often seen in magazines. Example to the right...

The method he used is to give the needed text a class, pull out the text using javascript and show it in the side. See original article for more details and code.

Advantages of this method

Avoids redundancy

This approach avoids having to enter the same content twice in the page. If you are using a pullquote, you will already have that text somewhere in the page.

A few problems with this approach

JavaScript is used for structure

JavaScript is used to create the pullquote - basically doing the job that rightfully belongs to (X)HTML. However, this don't really bother me - I am not that much of a purist. This feature also avoids redundancy of the text - which brings me to my next point.

Misses out on SEO advantage

The redundancy in the quote, propably containing some of our target keywords, is a good thing from an SEO point of view. Using this method will eliminate that advantage.

Not semantic

The 'span' tag is free of any semantic meaning - and frowned on in many purist circles. But, as I said earlier, it don't bother me much(I use spans liberally). But in this case, there is an opportunity do this right - using semantic markup is very easy...

<blockquote class="pullquote"><p> ... pullquote ... </p></blockquote>

...if you don't have issues about quoting yourself.

Text can't be changed

You will have to use the text exactly as it appears in the body - you will not be able to make any changes to it. Often you want to make cosmetic changes to the text before you make it a pullquote.

Don't need javascript

If someone who has a good browser(supports CSS) is surfing with Javascript turned off, he will not be able to see the effect.

Purely Semantic Method

A much simpler method of doing this is to just the proper markup to insert the quote and using CSS to position the text wherever you want. You don't really need JavaScript for doing this.

(X)HTML

<blockquote class="pullquote"><p> ... pull quote ... </p></blockquote>

CSS

This code is taken from the original article. Change it to fit your design.


.pullquote {
 float:right;
 width:10em;
 display:block;
 margin:0.25em 0.75em 0.25em 1em;
 padding:0.5em;
 border:3px double #ccc;
 border-width:3px 0;
 color:#333;
 background-color:#f0f0f0;
 font:italic 1.3em/1.3 Georgia;
}
.pullquote p {
 margin:0;
 text-align:center;
}
Read More...

Subscribe to : Posts