02 Feb 2010

Easy iWeb header tags – Part 2

16 Comments SEO for iWeb, Tutorials

A few hours ago I published a tutorial on the easy way to insert the header tag into your iWeb site, but it seems a few of you are having problems. The iWeb SEO Tool may not be as foolproof as first thought. The troubles seem to be arising with those of you who are using ‘Sans-Serif’ fonts (such as Arial, Verdana or Tahoma) in between your header tags. By default iWeb doesn’t include CSS for header tags within its pages so a browser will just default to a large serif font in black.

Don’t worry though, I have found a solution and it is really easy too. We just have to use a little bit of extra code in the text-box.

Before you add in this little bit of extra code however, you have to make a note of the font you are using, so just highlight the word(s) of your title and open the font viewer. In this instance I am using a black Helvetica size 30px.

That done you can now insert the following bit of code into your text-box in place of

from the previous tutorial.

What’s the difference? We have simply added a bit of inline CSS styling to tell the browser what font we want to use and how we want it to look. You will notice that I have reduced the size of the title so that it all fits in the box. As we are now using CSS to control how the title will look in the iWeb page we don’t have to keep it at its original size (as I said above, black 30px Helvetica).

Of course you are not stuck to the font or it’s size and color I have used in my code snippet, you can make them whatever you want; simply change the values highlighted in red below.

#000000; font-family: verdana; font-size: 18px;">Your Title Here

For more examples of color codes you can take a look at Cloford.com which lists more than 500 of the most popular colors; the font names and sizes you can check yourself in FontBook (it’s in your Applications Folder).

Now all you have to do is follow the rest of my previous tutorial from where you have to open Rage’s iWeb SEO tool and place a tick in the right box.

And when the site is published you will see that the font is a sans-serif font as we originally planned it to be.

I hope that has sorted out the problem for all you sans-serif font users, if not leave a comment and we can try another method.

Tags: , , ,

written by
AllAboutiWeb (AAi) is your one stop shop for everything iWeb. We provide tips, tricks and more to get the most out of your iWeb website. Follow us in twitter at @allaboutiweb
Related Posts

16 Responses to “Easy iWeb header tags – Part 2”

  1. Reply jamie says:

    hi ive been doing as said but every time when i publish i can see the html at the top of the site even though Ive clicked convert

  2. Reply Header tags revisted | All About iWeb | Mac Affinity says:

    […] Link: Header tags revisted | All About iWeb […]

  3. Reply jamie says:

    How come the header code still shows in my title page even after I publish it with seo tools

    • Reply All About iWeb says:

      Jamie,

      Are you putting the code straight into the title text box that is already there? or are you creating a new one? I can only think of 2 things that could be wrong:
      1. You have a bug with your SEO for iWeb.
      2. You aren’t using SEO for iWeb properly.

      This method does work, I tried it before I published. You have definately got the latest version of SEO for iWeb? How are you upload your site after you have made the changes?

      Tim

  4. Reply jamie says:

    yes Im putting into text box thats already there then publishing to folder,then in seo tools I opne folder I click on the convert header tags and apply and reapply tags and publish to mobile me

  5. Reply Richard Sullivan says:

    I am having the same problem Jamie is, except I upload to my server instead of mobileme. I follow the instructions but the html code shows up on the online webpage. Please look if you have some time:

    http://www.discoveringhawaii.com

  6. Reply jamie says:

    did anyine find a fix for this

  7. Reply Ashley says:

    is anyone else having issues with the code appearing in the title bar after being published. – Thanks

  8. Reply Delphine says:

    Hi Tim,
    I have been trying to use SEO tools on my web site (in French) but the “Title Page” never appears on the web.

    You will now find a unique title for all the pages of the web site. This title comes from “www.domainedesnoms.com”, where the domain name is registered.
    I tried taking off this title from “domaine des noms” before publishing a new one from SEO and the only title I get is then “Mozilla Firefox” or the URL of the site on Safari brownser.

    Do you have any idea why it does not work?
    Thanks,
    Delphine

  9. Reply Richard Sullivan says:

    I was able to fix this after a lot of BS. The following method worked for me, and may for you as well. Worth a try.

    First check thoroughly and proof read your finished code after you paste in your text, because a space after the > or before the < with my own text. I also had to create a new text box on the iWeb page rather than re-use an exisiting one. I am not a techie so I can't explain why this worked, but it does. I have been using this method for a month now, and trying to re-use an existing iWeb text box, or editing an existing code within iWeb always screws things up for me.

  10. Reply Richard Sullivan says:

    OK, I think there’s something wrong here as the middle of my message is missing!

    First check thoroughly and proof read your finished code after you paste in your text, because a space after the > or before the < inadvertently made its way into my code despite my careful effort.

  11. Reply Richard Sullivan says:

    …also, pasting the above H1 code directly onto the iWeb page did not work for me, so I pasted it instead into TextEdit, altered it there, then copied that into a fresh iWeb text box.

  12. Reply Name Si says:

    ..Not working for me. Editing the h1 tag statement in a txt editor, replaced ; with : but the words are still coming out black and not picking up colour entered. Viewing the source, the h1 tag is embedded in a paragraph style statement, could this be it? The paragraph style is overriding the h1 style? How would one get rid of the paragraph style? I haven’t deleted and re-entered an empty text box, mabe that’s the trick. I tried it but the webpage all shifted up and I didn’t fancy having to redo everything.

    Thanks for all of the info and for trying to get this obvious problem with IWeb sites sorted.

    Si

Leave a Reply