Saturday 7 May 2011

HTML Elements (Page Areas) That Matter

Since spiders see your page as HTML code instead of what is directly visible through a browser, optimizers must gain a solid understanding of the structure of a typical HTML document.
This lesson will guide you through some HTML basics and then show which elements are critical for optimization and why.
First, we recommend that your HTML documents comply with the XHTML standard. XHTML is the strictest standard of HTML (hypertext markup language). By following this standard you ensure that your pages are easily readable for search engine spiders. You can learn more about XHTML at the official resource of the World Wide Web consortium:
http://www.w3.org/
Every HTML document that complies with the standards has two principal sections: the HEAD area and the BODY area. To illustrate this we can open the source code of any HTML page found on the Web. Open it in your browser, right-click on the page and select "view page source" or "view source".

The HEAD section is everything you see between the <head> and </head> tags. The content of this section is invisible when viewing the page in a browser. As you can see, one of the elements it includes is the title tag (between the <title> and </title> markup). This is what is shown in the caption bar of the internet browser when this page is displayed in a browser. The title will also represent your page in the search engine results. As such, the title tag is a very important element.
The head section also includes various META tags. In the w3.org example we see the META keywords tag and the META description tag:
<meta name="keywords" content="…">
<meta name="description" content="…">
After the <head> tag is closed, the <body> tag opens. Everything that's within the body tag (i.e. between the <body> and </body> markup) is visible on the page when viewed in the browser.
In the body text of the w3c.org example, we see the <h1> and <h2> tags. These are called HTML headings and range from the 1st (h1) to the 6th (h6) level; initially, they were meant to mark logical styles for different levels of heading importance: "h1" being the most important heading and "h6" being the least important. Usually browsers display the tags from the largest to smallest. The <h1> tag displayed with the largest font size, and on down respectively until <h6> which displays the smallest font size. The search engines treat the heading tags the same way.
The links tag is another important body element, and is delimited by <a> and </a> markup.
The image tag <img> is responsible for displaying an appropriate image whenever a browser sees it in the source code.
Schematically, an HTML document in an optimizer's eyes (as well as in the search engine's eyes) looks like this:
<head>
<title>My title goes here</title>
<meta name="keywords" content="keyword 1, keyword 2, keyword 3">
<meta name="description" content="site description">
</head>
<body>
<h1>This is the first level heading which is important to search engines</h1>
<h2>this is a kind of subheading which is also important</h2>
This is a simple text in the body of the page. This content must include a minimum of 100 words, with keyword density around 3% to 7%, maximum keyword prominence towards the beginning, middle and end of the page, and maximum keyword proximity.
<b>This text will show in bold</b>
<a href="http://www.somesite.com" title="some widget site">Link to some widget site</a>
<img src="http://mysite.com/image.jpg" alt="and this is my image" />
</body>

Let's go through all the HTML elements and get some in-depth insight into how we can optimize each of them.

The title tag

The Title tag of your Web page is probably the most important HTML tag. Not only will search engines consider it when estimating your pages' relevancy towards certain keywords, but also when your title tag finally shows up in the SERP (search engine result pages). A lot depends on how attractive the title is to Web surfers and whether they are compelled to click on your link.
All search engines consider the keywords in this tag and generally give those keywords a great deal of importance in their ranking system. It is as important as your visible text copy and the links pointing to your page.
Always use your primary keywords in the title tag at least once. Try to place them at the start of the tag, i.e. make their prominence 100%. The minimum keyword prominence for the title is 60%.
Don't use several title tags on one page. Make sure the title is the first tag in the head section and that there are no tags before it. Avoid listing the same keyword multiple times in the tag, some engines may penalize for this. Avoid using the same title throughout your site. Try using a unique title tag for each Web page and use key phrases that are thematically relevant to that page. You can use variant forms of a keyword when possible or applicable.
For instance, if you use "Designer" in your Title tag, a search on "design" will give you a match on most engines. However, words like "companies" will not always yield a match on "company" since "company" is not an exact substring of "companies".
Longer titles are generally better than shorter ones. However the recommended word count for a title is only 5 to 9 words, and character length up to 80 symbols. Make your title interesting and appealing to searchers to convince them that they should click on it.
Moreover, you can put your company’s name in the title tag, even place it at the very begining of the tag. If your company is a well-known brand it’s essential for you to do it, if not – then it’s an excellent opportunity to promote it. What is more important is that you shouldn’t stop with just your company name but definitely add one or two descriptive phrases to the tag. Those who already know your company will query for it specifically in the engines and those who don’t – will find you while seeking the products or services you sell based on the descriptive phrases.
One more point to remember is that you should be very specific if you are working in a certain area. Your keywords should reflect the geographical region where you are primarily seeking clients. For example, if a customer looks for some goods (let’s say slippers) first they will begin with typing simply “slippers” and after the engine returns an enormous list from all over the world, the customer will narrow the query by adding some geographical names (e.g. Utah slippers). That’s your chance to be in the Top 10 of the new results for that area. 
While creating the title you can use the following approaches:
<Title>My Company Inc. Utah Slippers</Title>
<Title>My Company Inc. – Utah Footwear</Title>
<Title>My Company Inc. – Utah Slippers – Footwear in Utah</Title>
In the last example the geographical name is used twice in different variations and it is crucial not to put the same words right next to each other as that might be considered as spam by SEs. Don’t use ALL CAPS,  SEs are not case sensitive now and it won’t help, instead it will look rather crude. Initial capitals are well suited for the title tag.
The title should reveal the main idea of the visible text and thus reflect your business in the best possible way.
Here are 10 tips for title tags given by John Alexander, a prominent search engine expert:
  1. "When working with your keyword phrase, get it positioned up front so that as you build a sentence it still reads well.
  2. Try working with your one important keyword phrase up front and another secondary phrase to the rear of the title.
  3. Try writing your title to make a thought provoking statement.
  4. Try writing your title so that it asks a "thought provoking" question.
  5. Try writing a title so that it reveals a hidden truth or misconception.
  6. While in creative mode, keep your mind on what it is that your target audience really wants.
  7. Build honest titles that are related to your site content.
  8. Do NOT resort to keyword stuffing or stacking the title full of multiple phrases that do not convey an intelligent message.
  9. Do not include a lot of capitals or special characters in your title.
  10. Do not get hung up on title length. The easiest rule is to simply keep your title under 59 characters (for Lycos sake) and honestly, you can build really excellent titles in this space."

The META tags

There are two META tags that still appear to be of use by the search spiders: META keywords and META description. These tags are very unlikely to impact rankings; they can only play a weighty role in the site's click-through rate from the SERPs so it's worth optimizing them for your keywords as well.
If you use any other META tags, place them after these two.
The META Keywords
Syntax:
<meta name="keywords" content="keyword 1, keyword 2, keyword 3, …" />
Its initial purpose was to give search engine robots an idea of what the page is about to help with rankings. Unfortunately, as soon as this became evident, so many spammers started abusing it that spiders now have discounted the importance of this tag by at least half of its original ranking value. Most experts say this tag has no weight from the SEO perspective and does not influence your rankings.
If you still want to exploit this tag, use your main keyword phrase, a secondary keyword phrase, and a few synonyms of your keyword phrase in your keyword META tag. Make sure to focus the words in your keyword tag on that one page only, not on every single keyword that could possibly be associated with your entire website. Focus your tags on that page only.
Remember if you use many of the same words in your different keyword phrases, it could look as if you're spamming the engine, so be careful.
The META Description
Syntax:
<meta name="description" content="a short description of your site" />
The contents of the META description tag is what most search engines and directories will show under your title in the search result list. If you have not provided any META description tag to your Web page, the search engines try to make one for you, often using the first few words of your Web page or a text selection where the keyword phrases searched by the users appear. If the Search Engine makes up a description by picking up text from your page, the generated description may not do you Web page justice.
The Meta description tag needs to be kept brief yet informative. A description of about 25-30 words should be fine. Keywords and key phrases should be included in the Meta description tag, though care should be taken not to repeat them too often. Like the title tag, the META description tag should be customized for each page depending on the content theme and target keywords of this page.
Remember that even though Google doesn't consider the META description tag when determining relevancy, it often uses the contents of this tag in the snippet description of your page in the search results. So, make your description captivating and designed to attract traffic. The Meta description tag should be appealing to users, tempting them to click on the link to your site and visit your Web estate. Using the Meta description tag can help you increase the click-through rate of your page, which in its turn increases the traffic you can get from any ranking position.
Below is a nice example of an informative description optimized for "weather forecast software":
"The only weather forecast software that brings long-range weather forecasts, daily horoscopes, biorhythm calculator, Web cams, and weather maps to your desktop."

The body text

The main textual content that is visible to your visitors is placed within the body tag. It still matters for some search engines when it comes to your page analysis and ranking.
Remember the importance of keyword prominence and place your keyword phrase early in the body text of the page. This may also become a means to communicate your message to prospects; some search engines retrieve the first few lines of your Web page and use them as the description of your site in the search results. So, put a number of important keywords in the first few lines in the visible part of your body text. Try to tailor the text in the beginning so that it can be used as a description of your site.
Spread your keyword phrases throughout the body of the page in natural sounding paragraphs; try to keep separate words of your key phrases close together for proximity sake. Put a secondary key phrase in the middle and at the end of your body text. Have some of your keywords in bold (for this purpose, it's better to use the "<b>" tag instead of styles of logical <strong> formatting. However, you can still apply the necessary styles to this text by the following trick: <b style="font-weight:bold">).
Remember your content minimum for a page is 125 words but it's better to reach far beyond this limit.

HTML headings h1 – h6

The headings themselves are a good means of visually organizing your content. Besides that, search engines consider the headings and sub-headings of your page, (especially those in bold), to be important. Take advantage of this by using H1, H2 and H3 tags instead of graphical headings, especially towards the top of your page.
Use heading tags to break up your page copy and make it easier to read and absorb for your visitors. Include your most important search keywords and phrases within the heading text. It follows that using your target keywords and phrases within these headings means that search engines will give them more relevancy weight. Thus, you should always try to use your target keywords within the headings and sub-headings to break up the text on your page.
Page Heading incorporating most important keyword phrase 
Sub-Heading 1 incorporating most important keyword phrase
Paragraph of text incorporating other target keyword phrases 
Sub-Heading 2 incorporating next most important keyword phrase
Paragraph of text incorporating other target keyword phrases
And so on…

The problem about headings is that each type of browser has its own way of displaying them and thus may not match your design ideas. You may apply the following workaround with the help of the style attribute:
<h1 style="font-size:10px;color:#00FFFF;font-weight:bold">This is the formatted heading</h1>
Or with the class attribute, provided the class is defined somewhere in a style sheet.
The search engine will see a first level heading here, but the browser will show human visitors the text formatted as you need instead of standard level one heading.
What should be avoided is trying to repeat the first level tag more than one time. In other words, you shouldn't have more than one <h1> tag on your page to indicate that your main topic is streamlined around a single definite concept.
As for the tags of other levels, it is up to you to use multiple <h2>, <h3> tags etc. on a page in order to structure information in a proper way. Just do your best not to overuse them, and keep to the quality content guidelines.

Link text

Keyword usage is important in the visible text (also called anchor text) of links pointing outside your domain (also called outbound links) as well as links to the internal pages. When you give your users a reference to other documents relative to your theme, the words you use to refer to those documents are considered descriptive for your page's profile.
A usual link would look like this:
Click here for <a href="http://www.somesite.com/keyword-phrase.html" title="this text will appear when user mouse-overs the link">Visible link text</a>
Note: When you link to your own pages, rename these pages so that the URLs contain keywords separated with a hyphen – instead of running the keywords together. By breaking the words up in some way, you let the engines see them as individual words in a phrase. If the words are not broken up, the spiders will see the words as a single term.
Don't flood your links with keywords; usually it's enough to have up to three links per page containing your targeted terms, desirably the first three links.

ALT attributes of images

Alt tags consist of alternative wording for images that is displayed in browsers that can't display images, did not download the image for some reason, or is spoken by talking browsers for the blind. Search Engines use the text in the alt tags to substitute the anchor link text if the image is a hyperlink. This makes these attributes ideal for optimization.
Example:
<img src="images/logo.gif" alt="Graphic of a weather forecast software" width="415" height ="100" / >
As a rule, if you insert your keyword phrase in your ALT text (as long as you are also describing the graphic), you'll have a boost in relevancy with many of the engines. Google often picks up the first ALT text on the page and uses it as the description in the search results, so pay special attention to the ALT text in your first graphic.
To avoid spamming, never remove the actual graphic description from the ALT attributes when you're populating them with your key phrase, and do not plant your key phrase into more than the first three ALT image attributes on the page and then perhaps the last one as well.

What you should remember for this lesson:

  1. The areas of a standard HTML document which matter most for the search engine spiders are: the TITLE tag, the HTML headings, the link text and the ALT attributes of images.
  2. With most of these, observe four parameters: prominence, density, proximity and frequency when populating them with your keywords. This is most important with the body text. To improve keyword significance in the body text, use your keywords in bold once or twice.
  3. While working with your keywords, keep away from any kind of keyword stuffing. After finishing, ensure that the copy still reads naturally.

2 comments:

  1. I think you have directed the attention of all optimizers to the right way. I also in search of this HTML codes from a long time ago. But now I found the right codes here. Anyway thank you for whole information. SEO News

    ReplyDelete
  2. HI.. this is such a good post .. thanks for sharing valuable information.. please keep posting..

    ReplyDelete