CSS

Using style sheets to change H1 to P for SEO purposes

Ever had a client who uses inappropriate styling tags at inappropriate times? I’ll bet you have and I’m sure you’ve had a heck of a time trying to change a H1 / H2 / H3 tag to a <p> tag via CSS. I wonder all the time why people abuse the use of header tags throughout the page when they could’ve easily used a <span> or a <p> tag via style sheets.

I’d spare you the rant and just give you the goodness of how to change a <h1> to a <p> whilst keeping the format. But before that I will detail the most common changes I perform for my clients after an SEO review of their site which would include:

  1. Removing inappropriate header tags
  2. Changing header tags to either a <span> or a <p> tag
  3. Using style sheets to format the <span> or <p> so that it emulates its formal header format (be it <h1> format or <h2>)
  4. Clean html by removing unnecessary coding and moving javascripts to a separate file (as well as adding style sheets)
  5. Add meta description and keyword where necessary
  6. Add meta robots with value as “index,follow”

There is probably more, however I will leave the concentration of this post on styling a website via CSS for SEO purposes.

Removing inappropriate header tags

First things first, remove all those nasty irrelevant tags which have been left there by someone who can’t code (most likely the graphic designer who just clicked on the “create html” button on Photoshop). Less is more and this is a golden rule for Search engine optimisation, less code and more content, remember this and the crawlers will love you (and your website ofcourse).

Changing header tags to either a <span> or a <p> tag

Now this is the most tricky part of the job when helping a client SEO their website. As I have mentioned before, people tend to use the header tags to inappropriately style their website so you will see this happen ALOT. There are websites with multiple <h1> tags as well as <h1> tags around images. They are absolutely not needed and it would be best to remove them or change them to either a <span> or a <p>.

As I have trouble trying to control a span, I usually use the <p> tag instead, as it takes the width of the paragraph in question so if you are trying to underline something (border-bottom), the <p> tag will make sure your line goes all the way through the paragraph it is on.

Thanks to CSS, we are able to use other tags (eg <p> and <span>) to emulate header tags <h1> <h2> <h3> etc). The following are the default setting styles for header tags:

<H1>
{font-size: 2em; margin: .67em 0; font-weight: bolder}

<H2>
{font-size: 1.5em; margin: .75em 0; font-weight: bolder}

<H3>
{font-size: 1.17em; margin: .83em 0; font-weight: bolder}

<H4>
{margin: 1.12em 0; font-weight: bolder}

With some luck you should be able to remove the header tags without disrupting the look and feel of the website.

Founder of UnicornGO, Visugu and Pixelsquare. I am an Aussie with a passion for building sustainable and scalable businesses servicing the mid to enterprise tier clients. Have an idea that need funding? Reach out to me and we can have a chat.

2 Comments

  • Francis Lee

    You’ll need to change the H1 to a P tag within the HTML first, then if you want to retain the formatting, you’ll need to duplicate the H1 class and label it as a P class hence retaining the the formatting without confusing search engines with multiple H1 tags.

Leave a Reply

Your email address will not be published. Required fields are marked *