SEO TIP: Proper H-Meta Development & Techniques

Vasili · #1 04-30-2008, 04: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, 07: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, 09:48 PM

The importance of h-tags 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 heads 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, 06:15 AM

nice

Vasili · #5 09-25-2008, 07:24 AM

alas · #6 09-25-2008, 05:41 PM

Generalissimo,
GRAZIE, GRAZIE MILLE, THANK YOU VERY MUCH !!!!!!!

jkh · #7 02-19-2009, 04:08 PM

Excellent!! Fine advise!

Chriscon · #8 07-09-2009, 04:10 PM

Wow - Few questions.
Does the <h1 style="margin:0px;"> go one ach header or only the first one on a page. Like does H2 get <h2 style="margin:0px;">
Is there supposed to be a space between the h2 and the word style?
Also if I have only three headings on my index page for instance, do I still label the last heading h6? Or is it h3?
Thanks for the help.
C

austinjames · #9 08-01-2009, 07:05 AM

Take it from the experts!

Please add some SEO tags being implemented these days. I heard some special tags being ban by google hehehe! No concrete idea about it.

thanks for sharing.

Vasili · #10 08-13-2009, 10:18 AM

Quote:

Originally Posted by Chriscon

Wow - Few questions.
Does the <h1 style="margin:0px;"> go one ach header or only the first one on a page. Like does H2 get <h2 style="margin:0px;">
Is there supposed to be a space between the h2 and the word style?
Also if I have only three headings on my index page for instance, do I still label the last heading h6? Or is it h3? Thanks for the help. C

If you have only 3 Headings, then you need have H-Meta numbered:
h1 .... again, you must always start with h1
h2
h6 .... and you must always be sure to have h6 as the last, to 'close the parameter'

If you do not open with h1 and close with h6, the SE's will see this as "non-conforming" (sloppy, or 'broken') code, which is a detriment.

* Also be sure to pre-define the Style of your H-Meta so they all appear the same and contribute to both Visual continuity and those little details of baseline optimization that do not go unnoticed by the SE's.

Yes ... the proper coding is shown in the example above (space).

ablelardo · #11 08-17-2009, 10:18 PM

Thanks! Some good tips and info in here.

tyler9953 · #12 08-25-2009, 06:11 PM

I went through and did this on all my pages. Hadn't even heard or read anything about H-tags until Vasili's post here. Hope my efforts pay off. That was a good deal of work. Especiallly when you are working of an air card...slow to publish pages. Thanks for the step by step instructions.

Vasili · #13 09-12-2009, 12:25 AM

Quote:

Originally Posted by tyler9953

I went through and did this on all my pages. Hadn't even heard or read anything about H-tags until Vasili's post here. Hope my efforts pay off. That was a good deal of work. Especiallly when you are working of an air card...slow to publish pages. Thanks for the step by step instructions.

FEAR NOT -- Your efforts will prove themselves as superior ROI, as small, tedious details like these constitute the bulk of "pre-optimization" of a website, which, for lack of better terms, is merely "standards compliance" according to basic Search Engine valuations methods.

These methods are not considered the same as "Professional SEO" but they do set the firm foundation upon websites for more specific strategies to be implemented, which having been properly implemented earlier will save you money if you choose to engage Professional SEO Services. And they will actually produce some level of results that are entirely benefical (visitor traffic, rank, etc.) .... if you are patient and dutifully perform this task!

pink_eeyore · #14 09-21-2009, 08:15 AM

Quote:

Originally Posted by navaldesign

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 versions 9 and later.

Navaldesign,

Does this mean there is no way to get rid of the bold effect? I tried adding styles but they had no affect. Is there a code I can use to eliminate the bold effect? It completely messes up all my color and layout designs.

p.s.

thanks for the <h1 style="margin:0px;"> had i found it 6 months ago when couldn't adjust the FF bug issue, it would have been awesome! not complaining but it might me too late to make drastic changes to the site until BV11 comes out. I understand that with BV11 we can style each header universally yes?! Does that include the ability not to bold the text?!

Vasili · #15 09-21-2009, 11:08 AM

Quote:

Originally Posted by adir_sharon

Does this mean there is no way to get rid of the bold effect? I tried adding styles but they had no affect. Is there a code I can use to eliminate the bold effect? It completely messes up all my color and layout designs.

H-Meta needs to be set in Bold format, according to the parameters set by the SE's ... it must be 'set apart' from the remaining textual Content definitively.

Quote:

Originally Posted by navaldesign

The importance of h-tags is obvious.
Create your heads as simple text in BV. Make them bold ... 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, 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.

Be sure you do not format (highlight and change font style) anythiing but the text --- make sure you do not accidentally format a "space" at the end of the text, as this will create sloppy code on the source as well as influence how the font is actually displayed when published.

And, again, yes, all H-META needs to be Bold. It is something that needs to be planned into every layout.

navaldesign · #16 09-21-2009, 11:20 AM

The browser will turn to bold, automatically, whatever is in <h> tags. It is not that you need (or the SE need) to have it in bold, it is simply a remaining of old times (before css) that has (unfortunately) remained like this.

This is what i had stated:

Quote:

Create your heads as simple text in BV. Make them bold ... because this way you will see on the BV screen what will also be actually displayed in the browsers.

The new BV allows for headers formatting, but even if you set it to non bold, the browser will still display it as bold.

pink_eeyore · #17 09-21-2009, 11:35 AM

Thanks Navaldesign.

I'll be sure to take that into account when BV11 is released. It's not that big of an issue now that I need to change my headers discribtions anyways to make it more relevent for SE and viewers.

A shame though that it got "stuck" that way...

Vasili · #18 09-21-2009, 11:40 AM

Quote:

Originally Posted by adir_sharon

A shame though that it got "stuck" that way...

It's not just Blue Voda! It's that way in Dreamweaver, every Forum, shopping cart, and CMS foundation also ... for the same reason ... to comply with the SE's and rigid 'rules' regarding META in general! Something we need to make allowances when planning out page layouts, and to simply accept, as I don't think things will change anytime soon.....

navaldesign · #19 09-21-2009, 11:55 AM

Quote:

Originally Posted by adir_sharon

A shame though that it got "stuck" that way...

I suppose adir sharon was refering to the browser standards..

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