SEO TIP: H1-H6 Meta Tags ~ Keeping Them "In Line"

[Vasili]

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 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 WYSIWYG enviornment, and to prevent "double line spacing").

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 W5 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 Meta 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 Meta 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]

How does the formatting of the h tags in the style html work alongside the default formating for the text? I tried adding a h1 tag, and the relevent style paragraphs but the format of the relevant text stayed at the default, rather than inheriting that of the h1 style.

Will the h tag stayle override the formating of the text? You imply it should.

Also wrt validate by right-clicking on H Tags and OK to "register" - I couldn't find the H Tags option

The Styles Script provided in the original post is the controlling aspect of your text formatting, for after properly "describing/defining" the HTML aspect of your text (by entering the "<h1>" value to the page by right-clicking on the textbox itself and then selecting "HTML" which then presents the HTML dialog box to which you manually type in the values --- as detailed step-by-step above), the now configured text becomes "HTML tagged" and will display online as if double line spacing was applied to your textbox: that is why the CSS script is critical >> it eliminates the 'default' setting and specifies the command "inline" to keep all text as originally laid out/seen in the WYSIWYG environment (postioned, not double-lined, bold, etc.)

You do not "right-click" on the page to insert/write the h-tag values: you right-click within the textbox themselves when "highlighted" >select> HTML (which presents the dialog frame to add the values) -- because you are "defining" the text by attributing HTML values to them, and, thus need a Style script to maintain uniformity.....

And you are correct in your observation that other text will no "inherit" the h-tag formatting: that is specifically why h-text must be in a separate text box and the script must be installed properly. Since you can position textboxes precisely and "transparently" once assured that the text will not 'morph' into double-line spacing within the box once 'live' or in various browsers, you can design with not just more sensibility and confidence, but with the knowledge your visitors using Firefox or another browser will not have a view different than any other than as you designed your page!!
That WAS the whole idea of using s style script when actually creating the SEO values of h-tags, right???
I am sure that was a clearly obvious theme....

[Eddy]

Navaldesign posted this answer in another topic.

If i may allow myself, the instructions provided by Vasili are not the best way to do it in webbuilder.
Not because you can't do it that way, but simply because using the css posted in that thread has obvious disadvantages:

1. The font size type and color will always be the ones contained in the css.
2. It will NOT allow you to use more different styles for lower (h4 - h6) headers, and we do know that these might be more than one in a page.

The easiest way to build h headers with WB5 is the following:

1. Type your header text in the desired position
2. Make it whatever font, size or color you like
3. Make it bold. Not because it is necessary, but because the <hx> tag will FORCE the text to appear as bold. So it is better having it bold already in your BV page so you can see what will actually be displayed
4. Right click the text and add

,In the Before Tag: <h1 style="margin:0px;">
In the After Tag: </h1>

Done!

MUCH easier than creating a css stylesheet topaste in the <head> !!
_________________
www.dbtechnosystems.com

[Navaldesign]

Please don't confuse H tags with spam keywords placed in the page as invisible text.

H (header) tags will greatly help you with SEs if correctly used.

[JimmyJazz]

Hi Eddy,

The link you have posted does not work.

I am interested in learning more about these h1-h6 title tags so if you could re-post the correct url I would appreciate it.

tia.........

[Pablo]

Header styles (H1-h6) can be applied through the Style toolbar.

Related tutorial:
http://www.wysiwygwebbuilder.com/add_text.html