SEO is an incredibly important topic in web development!

Being found well on Google (or other search engines) is undoubtedly an important goal for a website. If you improve the position of your website for a Google search query from 8 to 4, on average 4x more people will visit your site - if you get to position 1, it's 12x as many again! [1], [2]

In the posts in this series, I want to show you what you can do to optimize your site for search engines.

Each post is intended to explain a "to-do" for the SEO of your website.

The prerequisite is always that the absolute basics of your website are already right! This means that you have relevant content, well-formulated texts, use appropriate keywords for your target group in your texts, and the structure and design of the website are clear and appealing. Above all, this also includes sensible navigation so that all content is easy to find. If this is not the case, further tricks will not do much for your SEO.

Let's start with To-Do #3 for your SEO - Meta tags!

Overview

Meta tags are short, hidden pieces of information in a web page that help search engines understand the content, influence findability and are displayed when your page appears in search results. However, they do not change the appearance or visible content of the website.

There are various meta tags, the following 6 are particularly important in the context of SEO:

• Title-Tag
• Description-Meta-Tag
• Canonical-Tag
• Robots-Meta-Tag
• Viewport-Meta-Tag
• Charset-Meta-Tag

Title-Tag

Function:

The title tag defines the title of a web page that appears in the search results and is displayed in the browser tab.

Example:

<title>Pers recipes</title>

Meaning for SEO:

A meaningful title tag is crucial for the click-through rate. It should be relevant, concise and contain relevant keywords. The length should not exceed 50-60 characters in order to be displayed in full in the search results.

Description-Meta-Tag

Function:

The description meta tag provides a short summary of the content of a web page and is often displayed in the search results below the title tag.

Example:

<meta name="description" content="Discover the  
best recipes for the perfect summer dinner">

Meaning for SEO:

A well-written meta description can increase the click-through rate by giving users a clear idea of the content of the page. The length should be a maximum of 150-160 characters to ensure it is fully displayed in search results. Use relevant keywords to increase relevance.

Canonical-Tag

If you have different versions of the same page or a page is accessible via several URLs, this can confuse search engines.

For example, if you have a subpage of your website that lists all the posts on your blog, and this is accessible under both the URL

https://your-website.de/blog

as well as

https://your-website.de/posts

then you should use a canonical tag to show search engines which of the URLs is considered "preferred" and should be displayed in the search results.

For each version of the same page, you should then have the following on your site, the link in the

href=""

then refers to the preferred "canonical" version of the page:

<link rel="canonical" href="https://your-website.de/blog">

Robots-Meta-Tag

Function:

The robots meta tag is used to provide specific instructions for search engine crawlers (automatic programs from e.g. Google that search the Internet for information about websites). It influences whether a page is indexed (included by search engines in their database) and whether links on the page should be followed

Example of the default values:

<meta name="robots" content="index, follow">

Meaning for SEO:

By default, pages are indexable and links are followed. The robots meta tag is particularly important if you do not want a page to be indexed (noindex) or if you do not want search engines to follow links on this page (nofollow). This is useful for confirmation or thank you pages, for example, as these are not relevant for search engines.

Viewport-Meta-Tag

Function:

The viewport meta tag influences the display of a website on mobile devices, in particular the width of the display area.

Example, this is how it should be set by default:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Importance for SEO:

The viewport tag is crucial for mobile optimization. "width=device-width" ensures that the width of the page corresponds to the width of the device, and "initial-scale=1.0" sets the initial zoom level.

Note:

Without the viewport tag, web pages may not display correctly on mobile devices, which can affect usability and SEO.

Charset-Meta-Tag

Funktion:

The charset meta tag specifies the character encoding scheme for the web page.

Example:

<meta charset="UTF-8">

Meaning for SEO:

Character encoding is crucial to ensure that the text of a web page is displayed correctly. UTF-8 is the most common character encoding and supports a wide range of characters, which is especially important if your page contains different languages or special characters.

Note:

Charset and viewport should be specified in the head section of each page!

Sources

[1] Granka, Joachims & Gay. Eye-Tracking Analysis of User Behavior in WWW Search. 2004.

[2] Beus. Klickwahrscheinlichkeiten in den Google SERPs. 2015.