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

Do you want to share WYSIWYG Web Builder tips, tricks, tutorials or useful HTML code? You can post it here...
(no questions or problems please, this section is not monitored by support).
Forum rules
This section is to share tips, tricks and tutorials related to WYSIWYG Web Builder.
Please do not post questions or problems here. They will not be answered.

PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901

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

Postby Vasili » Thu Jan 31, 2008 2:30 am

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!

:lol:
Last edited by Vasili on Mon Feb 04, 2008 11:27 am, edited 4 times in total.
Vasili
 

The TIP Details the Process Step By Step Clearly...

Postby Vasili » Thu May 08, 2008 1:40 am

Dunlin wrote: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

:arrow:
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.)
:arrow:
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....
Vasili
 

Postby Eddy » Sun Jan 25, 2009 8:27 pm

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
Last edited by Eddy on Wed Feb 04, 2009 6:09 pm, edited 1 time in total.
User avatar
Eddy
 
Posts: 750
Joined: Tue Nov 27, 2007 1:52 am
Location: Nederland.

experts needed

Postby videoactive » Tue Mar 03, 2009 1:54 am

jantlmens,
can you tell me if i can put text that contains sentences with the keywords.
color it with the same page color, to hide it ofcorse.
all this to have more keywords on the page for better ranking.

is it concidered safe, or good :?: :?: :?:

mmmm........interesting
videoactive
 
Posts: 15
Joined: Thu Feb 05, 2009 10:51 pm

Re: experts needed

Postby Navaldesign » Tue Mar 03, 2009 5:17 am

videoactive wrote:jantlmens,
can you tell me if i can put text that contains sentences with the keywords.
color it with the same page color, to hide it ofcorse.
all this to have more keywords on the page for better ranking.

is it concidered safe, or good :?: :?: :?:

mmmm........interesting


No, this is the worst technique you can follow, it is severely punished by Search Engines by dropping you down in ranking and, in some cases, by completely banning you.
User avatar
Navaldesign
 
Posts: 2243
Joined: Sat Mar 01, 2008 8:08 pm
Location: Italy

Postby videoactive » Tue Mar 03, 2009 10:48 am

OK guys, thanks.

i new this, just needed to hear it from others again.
i myself using Eddy's way as written :

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>

Does it really better :?:
videoactive
 
Posts: 15
Joined: Thu Feb 05, 2009 10:51 pm

Postby Navaldesign » Tue Mar 03, 2009 11:11 am

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.
User avatar
Navaldesign
 
Posts: 2243
Joined: Sat Mar 01, 2008 8:08 pm
Location: Italy

Postby videoactive » Tue Mar 03, 2009 12:46 pm

Ohh no,
i wont be confused.
you already told me not to put an invisible text with the same page color, or else i'll be banned.

mmmm..but if i hide the text under a shape, and the color text will be other than the page color. is it legal :?:

So, does Eddy's way of handling the H tags is better or easier :?:

thanks man
videoactive
 
Posts: 15
Joined: Thu Feb 05, 2009 10:51 pm

Postby Eddy » Tue Mar 03, 2009 1:49 pm

So, does Eddy's way of handling the H tags is better or easier


The H tags example is from Navaldesign, its bether and easyer to use.

Dont hide text under a shape or something,if google spider can see that your text have the same color as your background than they see also that you are hiding text unde a shape or image.

Use normal SEO or get banned from google.
User avatar
Eddy
 
Posts: 750
Joined: Tue Nov 27, 2007 1:52 am
Location: Nederland.

Postby support4mvc » Sun Mar 08, 2009 6:58 pm

I think i'm doing something wrong. Google ranking for page is 0 of 10 ?

I'm using bold letters. Single words.

Can you use underline?

Can I use my page selection buttons as H1? and use words from each page as H2?

Thanks. Why don't they use just sitemap?

I made some changes. On one page I used Games as H1,Flash as H2, Videos as H2, Images as H2. Is this correct?

What happens if I use "Flash Games" in the same box?

I have to have at least one H1 & 2 H2's on each page?
"Possibility is only limited by self-doubt"

http://myvisualcreativity.com
User avatar
support4mvc
 
Posts: 10
Joined: Thu Oct 30, 2008 12:20 am
Location: USA

Postby Administer » Wed Mar 11, 2009 8:59 pm

I have read all this information and find it very interesting. I thought to try this and right clicked the text as Eddy mentioned and I selected html. This brought up the html box with the text placement. It was already in the before location. Would I still add the code?

So am I to assume that the W3 program does this for you with corresponding Title and meta descriptions? I guess perhap it would help if I had a better understanding of html.

I did find the comments on Bold very interesting and changed many of my Title and descriptions to match bold text title. Thanks to all!
Administer
 
Posts: 3
Joined: Mon Nov 03, 2008 2:13 pm

Postby Eddy » Wed Mar 11, 2009 9:18 pm

Read a little more about how to use the heading tags.

http://www.wysiwygwebbuilder.com/forum/ ... highlight=
User avatar
Eddy
 
Posts: 750
Joined: Tue Nov 27, 2007 1:52 am
Location: Nederland.

Different formatting for the the same level of Hx?

Postby EdKilby » Tue Jun 02, 2009 8:22 pm

Eddy wrote:Navaldesign posted this answer in another topic.


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


I believe that this is the exact solution I was looking for. I want to maintain existing formatting on my pages for the headings which I am trying to retroactively tag. On one page, because of varying backgrounds and space limitations, I format my H1 and H2s a certain way. Then on another page, they have yet another formatting.

Is there any known Google penalty for changing around the formats of the heading tags?

Thanks for your help! SEO is new and strange to me, but I know I want more of it. Articles like this reassure me that using WWB won't hurt my SEO efforts but will rather enhance those efforts.

Ed
User avatar
EdKilby
 
Posts: 2
Joined: Mon Apr 13, 2009 11:50 pm

Postby Navaldesign » Tue Jun 02, 2009 8:29 pm

Absolutely no problem with changing style.
User avatar
Navaldesign
 
Posts: 2243
Joined: Sat Mar 01, 2008 8:08 pm
Location: Italy

Postby EdKilby » Tue Jun 02, 2009 11:01 pm

Thanks, that's a relief. I did not want to have to reformat my site. In the future, I will attempt to use the styling of headings for most of my formatting, but resort to this technique when the usual format is not what I'm looking for.

Thanks for your help.

Ed
User avatar
EdKilby
 
Posts: 2
Joined: Mon Apr 13, 2009 11:50 pm

Next

Return to WYSIWYG Web Builder Tips, Tricks, Tutorials and Code Examples

Who is online

Users browsing this forum: No registered users and 2 guests