HTML code also plays a role in the onpage optimisation of websites. Below you will find tips on what you should pay attention to when it comes to HTML and SEO.
Successful search engine optimisation is based on numerous measures. HTML also plays a role in SEO – alongside factors such as the placement of keywords, backlinks and content quality.
Keep two things in mind when it comes to HTML and SEO:
Search engines prefer more text and less source code
The “Text to Code ratio“, i.e. the ratio of text to source code, plays a central role in this context.
You can increase this value by consistently removing superfluous elements.
For example, replace
<div><p><span>text</span></p></div>with
<p>text</p>The visible result is the same, but the text to code ratio is much higher.
Important: The text to code ratio is not a direct ranking factor. It is however clear that it can have an unfavourable influence on the loading time, for example – and this in turn can have an impact on the ranking. It also makes crawling and indexing easier for search engines.
You can calculate the text to code ratio using the following formula:
100 * number of characters without code / number of characters in total
Search engines want semantically correct code
Instead of specifying a list like this:
<ul> <li>professional customer service</li> <li>extensive features</li> <li>good scalability</li> <li>optimal price-performance ratio</li> </ul>you can of course save code by specifying it like this:
- professional customer service - extensive features - good scalability - optimal price-performance ratioThe extent to which crawler prefer semantically correct HTML code is controversial. For Google, this is not a direct ranking factor. However, browsers can have difficulties with unclean HTML. This in turn can have an impact on the user experience.
Careful: Messy code is often only noticeable when you take a closer look at the HTML code. After all, the result on the page in the example above looks the same in both cases. A free tool from the World Wide Web Consortium, W3C, helps you check HTML pages for compliance with the latest HTML conventions.
Here, it’s not about a flawless appearance. Very few pages can boast this, no matter how well they rank. But a certain standard pays off.
Title tags and meta description
With regard to HTML and SEO, the targeted creation of title tags and meta descriptions is important.
Ideally, both determine how the snippet of the page looks in the Google search.
Please note:
- If a meta description does not fulfil Google’s expectations, the search engine often replaces it with its own.
- A good meta description attracts attention and encourages users to click.
- The meta title is not a direct ranking factor.
This means that you should consider the following, among other things:
- Integrate the central keyword in the meta title, preferably right at the beginning.
- When creating meta descriptions, note the maximum length of 165 (desktop) and 118 (mobile) characters and between 40 and 58 characters when creating titles.
- Address the search intent of your target group and use the meta description to make the content of the target page clear.
- Don’t forget the call to action.
The following is a good example:
Important: Each subpage of a website needs its own metadata. For online shops with a large number of product pages, you can help yourself with tools or plugins that automatically create these for product pages.
Using and marking up headings
Well-organised headings help the Googlebot and visitors quickly understand and scan the content of pages. The hierarchy runs from H1 (most important) to H6 (least important).
The H1 heading is essential. It conveys the topic of the respective page for search engines. This also means that every page needs an H1.
How many headings you use depends primarily on the content. However, keep an eye on the hierarchy and mark up the headings accordingly in HTML for SEO.
Canonical tags
Canonical tags are integrated into the head of a page or into the HTTP response header. They look like this:
<link rel=”canonical” href=”http://www.examplepage.com/original-url”/>Canonical tags are used to refer to the main version for identical or almost identical page content. In this way, Google ignores duplicate content and distributes link juice as desired. Canonical tags are important for shops with a filter function, for example. In this case, in particular, duplicate content can otherwise quickly occur.
Conclusion
HTML and SEO is not rocket science. This is especially true because the Googlebot simply ignores many “mistakes”. However, basics such as the marking of headings, canonical tags and cleverly selected metadata have a noticeable effect.
