SEO TIP: Proper H-Meta Development & Techniques

Vasili · #1 04-30-2008, 03:38 AM

Step-By-Step Tips to Create Effective H tags in Your Website:

We all know that proper SEO processes are important for our websites, and there is much beyond simple Meta information (Title, Key Words, Description, etc.) to be completed for each page that needs to be done to get the overall metrics value if we are to elevate our website ranking and 'compliance' with the 'Perfect Page' model the SE's base their initial evaluations on.

Not discussed often enough are the H1-H6 Tag properties that should be created on each page, and how this needs to be included as an essential element to proper and complete Content Development (a core value of every website).

For consideration, there is a simple script that should also be used to keep these elements presenting properly as well (just as you laid out in the *******[Blue Voda] enviornment, and to prevent "double line spacing" as espeically seen in Firefox and other widespread alternative browsers).

First, about the "h1-h6" tags, and how to implement this simple but important SEO metric to your pages:

The h1, h2, h3 and so on up to the h6 meta tags specifically refer to the textual Content on your web pages, and how the SE's look for these to attribute greater value (and cache value) to them as a means of evaluating and ranking your Content (and relevancy) so to better position your site as a resource to produce results for their client Search Inquiries. Similar to how Key Words are important to search and how they need to be 'anchored' in your page content, the SE's look for H-Tags to further organize and validate your site content, and if you do not have these little "flags" in place, the SE's place a lesser relevance to your site, despite the fact your content is volumuous and totally unique!

It is easiest to think of these H1-h6 tags as more like a heirarchy of "Headlines" or "sub-heads" to your text: Just as you already have an introductory line of text to your content, this would become your "h1" tag (the most important). Similarly, the next important paragraph or section "headline" would become your "h2" tag, and so on, until your "h6" tag is your last (and must be your last) on each page.
If you have more than 6 "headlines" don't worry -- you can have as many h2 tags as you like, but only one of each of the others.....clearly you can have a single h1, as many h2 as needed, and skip down to your last to be h6 - as you need to make your last tag the h6, to indicate the "end of string" to the SE's.

For example, on the main page of a Mars Tourism site (just to make it interesting), you would see in larger font at first position "Private Guided Tours of Mars For Every Lifestyle" with appropriate content underneath. This would become your h1 tag, as it not only mirrors important Key Words and Page Title you entered in Page Properties, but establishes relevancy for the page as required since the following content supports this introduction Headline. Your h1 tag should always be the largest font on the page: if you are using 9pt for your page content, then ideally your h1 font should be at least 12-14pt minimum, and always Bold.

The next paragraph (or content section) on the main page in our example might be "Choose Land Rover or Hover Craft Tours" with a brief paragraph highlighting this feature.....this would be your (first) h2 tag, and would be also a larger font size than regular 9pt content, but smaller than your h1 tag, maybe 10pt or 11pt for emphasis.

And so on for the rest of the page. Remember, you can have as many h2 tags as you desire, but at least 2 to comply (h1 and the last, your h6).

Some Rules to help you understand formatting H Meta Tags:

1) All H Tags need to be "written" in BOLD font.

2) All H Tags need to be in their own 'textbox' and not included in with other text: the BV builder allows you to 'stack' textboxes closely over on another, so you can always position your boxes to align precisely --- thus the need for the script below!

3) Keep Tag Text to a minimum - no more than 6-8 words, and they must reflect Key Words and be anchored in your page Content to establish true relevance.

4) Be sure that you do not have the "extra space" after the last letter in the Headline, as we are so keen on making sure we include in our regular textboxes so they do not add the extra 1.5 line spacing as normally would be seen.....the script provided below takes care of that!

5) If you develop this important SEO compliance into your site, you must include your index page, and should have every other page with at least the minimum 2 tags (h1, h6) also. You should never have interior pages using this technique without your index page also being completed.

How To Configure H Tags:

1) Right-click on your textbox that has just the "Headline" you wish to use as H Meta, and click on HTML at bottom of list.

2) When the Page HTML Tabs display, click on "Before Tag" tab, and type <h1>

3) Click on "After Tag" and type in </h1>

4) Close HTML Dialog.

5) Repeat steps 1 - 4, replacing the number of the H-tag with the appropriate number (<h2>, </h2>; <h3>, </h3>; etc.)

NOW....since you have successfully created H Tags on your web pages (and will reap the results), you now need to keep the Tags from creating the irksome trait of actually displaying with double line spacing when published, and to also be precisely anchored for your overall look-and-feel in every browser (we all know how FireFox displays differently than IE). To do this, we need to establish rigid rules for CSS styles, and which can be easily customized without a complicated series of formatting.....we will use a simple formatting script to do this for us, and insert it also into our Page HTML....

Below you will see the script that you wil copy and paste into your "Between Head" tab:

<style>
h1 {font-size:18px;color:#666666;font-family:tahoma;font-style:bold;display:inline;}
h2 {font-size:14px;color:#666666;font-family:tahoma;font-style:bold;display:inline;}
h3 {font-size:11px;color:#666666;font-family:tahoma;font-style:bold;display:inline}
h4 {font-size:11px;color:#666666;font-family:tahoma;font-style:bold;display:inline}
h5 {font-size:11px;color:#666666;font-family:tahoma;font-style:bold;display:inline}
h6 {font-size:12px;color:#666666;font-family:tahoma;font-style:bold;display:inline}
</style>

* Be sure that you copy the entire script as shown (from <style> to <style>)
* Customize each aspect shown in blue above (font size, numerical color, font style). If you need to find out your numerical color code, you can either "View Source" of your own published page, or visit this website: http://www.visibone.com/colorlab/
* IF you use Clone to make new pages, your coding will need to be reset (validate by right-clicking on H Tags and OK to "register" new text. If you use the old-fashioned method of "stripping and whipping" new pages from old, you will also need to re-validate tags by highlighting and OK.

Using properly configured H tags on each of your web pages is a critical leap forward to earning serious elevation with the SE's, and with the use of this simple Style Script, you eliminate the annoying "double space" effect that prevented close registration of content to make pages look as professional as possible.

Good Luck, and Happy Webbing!

Vasili

_________________

Kudos to Chris (Collectors-info) for the CSS styling script development! Copied from another Forum where I posted this a while ago.

....and on we go!

Bethers · #2 04-30-2008, 06:03 PM

Hi Vasili! Long time no see.

I've long been an advocate of h tags, as you know. So it's good to see this info explained.

One note - if you use the h tag method you do NOT need to use bold - the h tag automatically makes the text bold. Same as it will automatically size the text according to the standards for each tag, unless you tell it otherwise, as the CSS script above will do!

So, I wouldn't add the style bold above as it is not ne cessary, unless it is easier to design pages.

navaldesign · #3 05-05-2008, 08:48 PM

The importance of headers is obvious.

The technical part needs not be so complicated. Also, if your layout requires same order h's to be differently formatted, you can't do it this way.

Solution (very simple):

Create your headers as simple text in BV. Make them bold, not because it is important, but because this way you will see on the BV screen what will also be actually displayed in the browsers.
You can make what ever size or colour or font family you like (remember: should be web safe font) and then as Vasili suggested, enter the header tags in the Before Tag and After Tag of the text html.

However, since we no more use the css in the Between Head, the code to paste in the Before Tag is slightly different because FF and Safari add a LF (new line) if the margin is not defined, so they will make your text appear one line down. Here is what you use in the Before Tag:

<h1 style="margin:0px;">

The code in the After Tag of the text itself is the same:

</h1>

Please note that you don't need to paste ANYTHING in the Between Head Tag of the Page HTML, because with this method the text is ALREADY formatted directly in BlueVoda

VodaHost · #4 06-06-2008, 05:15 AM

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)