Utilize Favicons and Meta Tags to Boost Your Website’s Visibility

Jun 7, 2012
HTML HTML5
By

A memorable Al Pacino line from the popular sports movie “Any Given Sunday” states that, in essence, “Life is just a game of inches”. In other words, success in any endeavor can depend on the smallest details, because they can end up having a major impact.

When it comes to SEO, I am constantly amazed at how paying careful attention to tiny, often overlooked factors can significantly assist in boosting a website’s online presence, thus gaining its owner a competitive advantage.

As web developers, these are some simple steps we can take to help the web sites we build find a good home in the search engine results pages.

Favicons

Speaking of ‘tiny’, the favicon — perhaps the smallest component in any website — is a 16×16 px image that appears next to the URL in your browser’s address box; also alongside the page title on a browser tab, and in front of the website name or description on your bookmarks menu.

Try taking a quick look at your bookmarks to see how much more attractive a site link appears when paired with bright, vibrant favicon. While scanning the menu, your eye will instantly gravitate to the favicons, rendering a link more visually appealing than for a site without one. The same goes for its placement on a browser tab.

A quick online search will ferret out many sources offering free favicon images. You can also create your own with Adobe Photoshop or another graphics software package.

To incorporate a favicon into your website, add the following line to the Head section, typically just below the meta tags:

<link rel=”shortcut icon” href=”http://www.domain.com/favicon.ico” />

In the above example, the favicon image has been uploaded to the website’s root, on the same hierarchical line as the index (Home Page) file. It can also be placed in the /images/ folder, if desired.

Favicons can be utilized in the following file formats: ICO, PNG, GIF, animated GIF, JPEG, animated PNG (APNG), and SVG. The formats are supported, in descending list order, by the latest versions of Firefox, Chrome, Internet Explorer, Opera, and Safari.

Faviconize Google Search Results

The latest news about the small icons is that you can add a ‘Faviconize Google’ extension to either Firefox or Chrome. The add-on not only spices up the search engine results page (SERP), but it also allows you to quickly scan results to determine where site links originate.

Meta Description Tag

The meta description tag is now widely disrespected. This Head section component is positively ancient by web building standards, and has erroneously been judged irrelevant by many web designers and online marketers.

To the contrary, proper meta description tag utilization can have a huge impact on drawing in potential visitors by dictating how your website listing appears in SERPs.

Check this out by going to any search engine and typing in a random term. A few of the results will likely have compelling text content appearing beneath the active link and URL lines. Most, however, show random bits of text that the search engine simply lifts from a given page.

Not surprisingly, the listings for sites in the latter category are not as attractive as those that have placed tailored messages into the meta description tag.

The tag, when incorporated into the Head section of a given page, is typically located just below the page Title.

The customized description should be limited to 200 characters or less. Careful consideration must go into crafting the text, which ideally will present the most broad, yet pithy portrayal of your website’s contents. It should be keyword-laden, and constructed so as to instantly entice a would-be visitor.

Title Tag

Equally important is your Title tag, which appears in the top line of a search engine listing as the active link. To ensure that the entire title is presented, make sure to keep the entry at 70 characters, or less.

Again, utilize as many important keywords as possible. Search engines will bold the keyword that a person has queried for in the active link text. When you have that particular word displayed prominently in your link, it just adds to the overall ‘clickability’ of your site.

Another look at any SERP will graphically show which sites are doing a good job of controlling their online title tag ‘introductions’ to potential visitors.

Conclusion

The discussed features do not require major efforts to incorporate into your website, but can pay big dividends if done properly. As noted earlier, it is the small details that often mean the most.

Author: David Elliot
David is a long-time journalist and editor, who also has over 10 years of experience as a freelance Web developer, specializing in online newspaper design and maintenance.
  • http://twitter.com/AlexSadler Alex Sadler

    I know they don’t count for much with Google but does the keyword tag still have any swing with other major search engines?

  • http://www.paulund.co.uk/ Paul

    If your running a personal site it can be a good idea to display your gravatar as your favicon.

    • jeff_DD

      Great point Paul, that can be great for creating a brand.

  • http://www.think360studio.com/ Think360 Studio – Web Design

    Hi. Great work you had done. Favicon, Meta tags, and Title tags are really very important, because without these we can’t boost our website. I must say thanks for posting this article.

  • http://twitter.com/SEODave Dave Colgate

    Title tags are very important in terms of SEO, arguably the most important on page factor. Meta descriptions carry little weight for SEO impact, but as you rightly point out, serve a different purpose in differentiating from other listings on SERPs. The favicon carries no SEO weight to my knowledge. Meta tags is pretty redundant now, apart from some small meta orientated search engines that are knocking about. No weight is given to them in terms of rank determination. Nice post!