SEO For iWeb : Header TagsNovember 10th, 2011
Adding header tags to an iWeb site has never been easier. Follow the instructions carefully in this video tutorial to learn how you can properly add header tags to your iWeb website.
Being introduced for the first time ever, iWeb users will now be able to add header tags to their websites, without having to hand code it in the HTML. Header tags are another way for you to demonstrate to search engines which keywords are important on your page.
So what is a header tag, and how do we make one?
Basically, a header tag is a block of text that can be compared to a title, or a headline for a larger body of text. Think of a newspaper article. There is a headline which indicates what the entire article is about. Then there is a subheading which gives a bit more insight into the article.
Our websites are similar to the structure of a newspaper article. A headline can contain our primary key term for each page, and an optional subheading can contain our secondary key term for each page.
In HTML, there are six headers that you can use. Those headers are h1 through h6. I am only going to demonstrate adding an h1 header since that is what most of you will be doing. If you want to add an h2 as well, then feel free to do so. h1 and h2 are the most popular headers, so use those if you have room on your site. Trying to add all headers to your site is not generally a good idea, unless your site is structured in a way that makes sense to do so. Also, the rule of thumb is to only have one h1 per page.
So to do this in iWeb, simply click on the Text Box button, and type in this code you see here.
The area where I wrote ‘This is my header tag’ is where you should type in your header tag. The HTML here should look identical to mine. But the text part should contain your header tag which could be anything you want it to be. I recommend putting the main key-term you are targeting for this specific page.
Before we move on to the next step, I want to point out that you can also change the font of this text like you normally would with any text, by highlighting the text and clicking on the Fonts button.
Now when you publish your site to a local folder, and load the site in iWeb SEO Tool, you must check the box to Convert header tags in text boxes to HTML code, and then press the Apply To Entire Site button. What this will do is strip the HTML code from the site, so that only the actual text is being shown. Remember, your header tag should be visible on your site. If you can’t see it, or if you still see the HTML code, it means you did not do this process correctly, and you will need to try again.
Some of you can expect to run into some issues when adding header tags. For example, you will notice that the header tag does not always end up in the same place online as it did in iWeb. This is normal. You may need to play around with it a bit until you find the right spot. To make things easier on yourself, try not to place the header too close other items on your page. This will leave you with a bit of a buffer for when the header ends up in a slightly different location.
Also, if your site has a black background, you most likely won’t be able to see your header. If that is the case, just
send us an e-mail read this knowledgebase article on how to alter the font color.
April 23rd, 2012 at 4:55 am
If I change the font like indicated in the tutorial it still keeps showing up in a very large Times an I like it to be in an Arial Bold Italic 14 pt. How can i solve this?
-you can also change the font of this text like you normally would with any text, by highlighting the text and clicking on the Fonts button.-
June 15th, 2012 at 5:31 am
I have the same problem as Dicky. The solution is not to change the font in iweb. All my texts in Trebuchet, whatever the size, appear after applying the heading converter of iweb SEO tools in a big times new roman. How could I keep the original font and size of my headlines? thanks
September 21st, 2012 at 6:45 am
I used this code to get a “purple italic bold font”:
your title from another iweb SEO tutorial.
I´m still looking for an answer how to change font size in html ?
September 26th, 2012 at 7:08 am
Great tutorial! I have the same problem as above, see http://www.padmetjehart.nl/index_2, where I added two h1 headers and they show up huge.
Can you help me with this?
Many thanks! Peggy
October 1st, 2012 at 12:19 pm
If anyone is having trouble with the way their header appears, try using this code instead (replace values with the values you want);
Header Tag Goes Here