HTML is a ‘mark-up language’ used to describe the content and layout of all web pages to browsers and search engines. Search engines send out spiders (or ‘bots’), which are automated tools used to crawl web pages. They read the HTML code for each web page they find and index it.
Although search engines aren’t aware which server side language you use or which CMS, they are aware of the mark-up and client side code (HTML, CSS and Javascript) that results, so it’s important that your HTML is well formatted for your pages to be discovered and understood correctly by search engines.
Follow these 7 tips to ensure your HTML is SEO compliant:
- Validity: HTML tags have an opening and closing part. If these tags are not formed properly or missing a closing tag, spiders (and potentially browsers) find it difficult to read the page, so be careful with your coding. Use a specialised code editor with built in validation, like the code view in Dreamweaver or Visual Studio. Once you’ve published your website to a public facing URL, use the W3C HTML Validator (search for ‘W3C HTML Validator’ in your favourite search engine) to run a test. Problems are listed and explained, so you can correct and retest them. Search engines aren’t too worried if you choose to use HTML or XHTML, so long as you specify the correct ‘doctype’ at the top of your document and it validates correctly. If you use a CMS or Blog software, you may be provided with a WYSIWYG editor. Whilst this can be useful for saving time, it can create poorly formed HTML, so it’s important to check and validate this.
- Accessibility: Web accessibility is about allowing people with disabilities to use your website by building your pages in such a way that users don’t have to be able to see images/videos or hear audio to digest the content. Automated spiders are currently unable to interpret visual and audio content, so by gearing your content up to be accessible, you’re helping search engines as well as users with disabilities. These tips will stand you in good stead (you can find more information about this in the W3C Web Accessibility Initiative guidelines):
- Use the alt attribute to describe each image.
- Use text that makes sense when read out of context – don’t use ‘click here.’
- Use headings, lists, and consistent structure.
- If using frames, use the noframes element and sensible titles.
- Summarise graphs & charts or use the longdesc attribute.
- Provide alternative content for Javascript, Flash and Java
- Content behind forms: Any content that can only be accessed by submitting a form may not be able to be accessed by search engines. If content can’t be found, it won’t be indexed, so provide an anchor link to all pages on your website where possible.
- Use CSS: The higher your code to content ratio, the harder it makes it for search engines to find your important content and give it the importance it deserves. The old fashioned table based layouts once used by web developers are less efficient than using CSS (cascading style sheets) to describe layout. Using CSS means the layout descriptions can be kept outside of the page in linked files, making the code for each page simpler, which in turn makes it easier for search engines to find the content it’s looking for, rather than a lot of unnecessary html tags.
- Heading tags: Heading tags (h1, h2, etc) allow visitors and search engines to better understand how the content should be organised in your website and what the most important phrases are. As a rule h1 tags should be used for the main page title, with lower h tags containing subtitles in a logical hierarchy. Using meaningful wording in headings, bold and emphasised text is important, as search engines generally give these phrases greater relative importance than standard text on a page.
- Links: As mentioned earlier, it is extremely important to use a descriptive phrase for the link text, rather than something arbitrary like ‘click here’. Search engines use this text to figure out what you’re linking to, so it’s imperative that this text describes the destination page. From an SEO point of view, this is particularly important when internally linking to pages within your website – you should use a keyword phrase that you wish to associate the destination page with. Anchor tags can have the attribute rel=”nofollow” specified, which instructs spiders not to follow these links, which can come in handy for duplicate content you don’t wish to be indexed or for adding to blog comments you don’t necessarily want to be associated with your website.
- Images and Alt Tags: As mentioned in the accessibility tips list, you should always include ‘alt’ tags to describe your images. This is good practice for usability and accessibility, but also essential for SEO. Without these, search engines don’t know what’s in your image. When using images as links, this is especially important, as your image is acting as link text. It’s also worth naming your images descriptively (the actual file name) so they can be found by search engines and generate additional traffic back to your website.
