How do you SEO HTML?

Its mostly invisible to humans but how can you make sure your HTML isn't letting down your SEO? HTML is the code which provides the basic building blocks which tell a browser like Firefox or Chrome how to start putting a website page together. So how do you make sure it is search engine optimized?

Now if you have never come across HTML and you're thinking this is something for the experts - think again. In fact making sure your HTML is in order is something even a beginner should be doing and you don't need to know HTML code to do it. You may not be able to fix issues but if you know what they are its much easier to get the right help without being taken for a ride.

What search engines use HTML for

HTML helps search engines understand your content better and promote it more effectively when you use it right. It'll tell the search engines your content title, preferred summary and all the headings and subheadings just for starters. Mess it up and you won't do yourself any favors when it comes to better rankings.

So before we get started if you have never seen the HTML of your website before here is how to take a peak. Right hand click on an empty part of one of your pages and then, from the small menu that pops up left hand click on 'View Source' or 'View Page Source' or something like that. The exact working varies from browser to browser.

Don't get freaked out by the wall of code that you see, You can easily search out what you are looking for by pressing Ctrl and F at the same time. This will open a small search box bottom left or top right.

What should be in your HTML code?

• The title tag - right up near the top of the code it should look something like this: <title>My page title</title>. This isn't the visible title of your page but it should be the same or almost the same.
• The meta description tag - not far below your title tag this should be a short one or two line summary of the page's content and looks something like this <meta description=[My Page Summary]" />. You might have heard that this in not important - that is bad advice! See How to SEO your Meta Tags for more on why.
• The h1 tag - this should be the visible title on your page and looks something like this: <h1>My page title</h1>
• Other h tags - these are subheadings that should be used in longer pieces of text. Ordering is important but too complex to explain in a bulleted list so check out my detailed explainer in How to SEO your h1 and headings tags.
• Image alt tags - these are text explanations of your images. An image should look something like this in code form: <img src="picture-of-kitten.jpg" alt="Picture of a Kitten" />.
• Paragraph tags - paragraphs of text should be enclosed in opening and closing paragraph tags like this: <p>This is one of my paragraphs.</p>
• Mark up lists correctly - should use <ul> / <li> / </li> / </ul> - don;t use the line break <br /> for lists.
• Remove inline styling - any tag with inline styling should be replaced with css calls. So anything like <p style="color:red"> needs to be fixed.

Validate your HTML

It doesn't matter how careful you try to be, mistakes happen. Your forget the closing </p> or </div>. Odd ball stuff that doesn't seem to have any effect on the page itself when you view it in a browser.

So run the code through the W3C HTML Validator to find and fix that sort of stuff. Remember though it won't tell you if you have missed anything, just if you have got something wrong.

Also be aware that it will flag up bugs that are beyond your control, like in bits of code for a Facebook Like button which are actually coming directly from Facebook. Let those go, nothing you can do about them.

HTML code for fast page loading speed.

How fast your pages load has become a key factor in where you rank because many users may be on mobile devices with slow Internet connections. When calculating its rankings Google only considers these people in what it calls Mobile First Indexing.

However as a general rule before I do too much I check if my page loading speed is actually an issue. You can do this via the Performance audit using the Google Lighthouse Project.

It will actually tell you which parts of your page are causing issues so if a javascript file is adding 0.1 of a second to your page loading time its probably not worth doing anything about that.

If my page load speed is close to 100% I might do some of the obvious stuff (such as delaying javascript file loading) but I probably wouldn't go spending hours stripping out excess code or fiddling around with delayed .css file loading or putting my above the fold css in the header.

To explain what the hell I just said, there are two keys to making your website load faster via HTML:

• Remove excess code - its amazing how much stuff gets left behind during website development that is not needed in the final design. Wordpress websites can be especially bloated in this way because plugins which are not in use are kept enabled. These can have all sorts of file calls included even though they are not necessary. Don't go mad and remove things like comments which could be helpful to future developers, the speed improvement for doing this will only be noticeable under a really powerful microscope.
• Remove render blocking code - these are other files that the HTML code calls like .js and .css. which I'll talk about now.

Most .js (javascript) files can be moved to the bottom of the code just before the closing </body> tag. Yes you can mark them 'async' so they load at the same time but better if they are loaded after the main content has rendered.

There is one .js file you'll need to keep in the header though and that's the one that handles delaying the load of the .css (Style sheets) files. There's a good tutorial about delaying .css file loading here on this.

If you do delay your css loading you'll have to compensate because for human users they are going to see your raw site and then it will jump to being your website with all the styling applied. Not good.

In this case all the above the fold styling (everything that applies to the visible part of the page as it loads) should be placed in the </body> area. On this site I do that for things like the navigation menu styling so you just need to view the source of this page to check how its done.

Include JSON-LD

JSON-LD specifically tells search engines what your page is about so you can be sure a search engine robot doesn't misunderstand your content. Don't get me wrong if your content is badly put together the robot will think it doesn't match the JSON-LD and start thinking that you are a scammer so good content goes hand in hand with JSON-LD.

That said JSON-LD is a must have so don't skip this! It also includes all sorts of other useful bits like telling search engines how this all connects to your social media accounts.

For numerous examples of JSON-LD head over to Steal Our JSON-LD. There are plugins out there for platforms like WordPress but make sure you test these with the Google Structured Data Testing Tool as not all of them are that reliable or well written.

Summing up

Experienced website developer or someone who has never touched HTML. Anyone can carry out the basic checks which will identify HTML issues which code be affecting your SEO so no excuse for ducking out of this work!

Your looking to make sure all the most important tags like the title tag, meta description, headers and so on are in place and being used properly. Then run the page through the W3C validator which will flag up any mistakes for you.

Next, before you go diving off into page loading speed work check if you have a page loading speed issue with the Google Lighthouse Performance Audit and if delaying javascript and/or css file loading will make a big difference.

Whatever you do though include JSON-LD within your HTML code. Its such a big help to search engines. I've seen local businesses flip straight to the top of the rankings after they'ved added JSON-LD because suddenly Google understands what they do and where they are perfectly.