Search Engine Optimization (SEO) #3 - Meta-Tags

In the future, I will publish all posts not here, but on my "Panorama Perspectives" Blog! Make sure to check it out.

To my blog

SEO is an incredibly important topic in web development!
Being well-found on Google (or other search engines) is undoubtedly a crucial goal for any website. Improving your website's position from 8 to 4 in a Google search, for example, results in an average of 4 times more visits - and if you reach position 1, it's another 12 times more! [1], [2]

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

Each post will explain a "To-Do" for your website's SEO.

The prerequisite is always that the absolute basics of your website are already in place! This means you have relevant content, well-formulated texts, use keywords in your texts that are suitable for your target audience, and the structure and design of the website are clear and appealing. This includes especially a sensible navigation, so that all content is easy to find. If this is not given, further tricks won't 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 webpage that help search engines understand the content, influence discoverability, 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, especially in the context of SEO, the following 6 are particularly important:

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 webpage, which appears in search results and is displayed in the browser tab.

Example:

<title>Pers Recipes</title>

Importance for SEO:
A meaningful title-tag is crucial for the click-through rate. It should be relevant, concise, and include relevant keywords. The length should not exceed about 50-60 characters to be fully displayed in search results.

Description-Meta-Tag

Function:
The description-meta-tag provides a brief summary of the content of a webpage and is often displayed in search results below the title tag.

Example:

Importance for SEO:
A well-written meta description can increase the click-through rate by giving users a clear idea of the page's content. The length should be no more than 150-160 characters to ensure it is fully displayed in search results. Use relevant keywords to enhance relevance.

Canonical-Tag

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

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

https://your-website.com/blog

and

https://your-website.com/posts

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

For each version of the same page, you should have the following on your page, where the link in the href="" refers to the preferred "canonical" version of the page:

Robots-Meta-Tag

Function:
The robots-meta-tag is used to provide specific instructions to search engine crawlers (automated programs, e.g., Google's, that crawl the internet for information about web pages). It affects whether a page is indexed (added to the search engine's database) and whether links on the page should be followed.

Example for default values:

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

Viewport-Meta-Tag

Function:
The viewport-meta-tag influences the display of a webpage on mobile devices, especially the width of the display area.

Example, how it should be set by default:

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 on mobile devices may not be displayed correctly, affecting user-friendliness and SEO.

Charset-Meta-Tag

Function:
The charset-meta-tag specifies the character encoding scheme for the webpage.

Example:

Importance for SEO:
Character encoding is crucial to ensure that the text of a webpage 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. Click Probabilities in Google SERPs. 2015.