How to Use Meta Tags Correctly – Search Engine Optimization
Meta Tags are invisible pieces of meta information that are used in the head section to define the properties of the web page. The head section begins with the opening tag <head> and must end with the closing tag </head>. In the head section, individual meta tags should be specified for each web page.
Meta tags are always built the same way. They are written as a pair of Property and Value.
General structure of Meta-Tags
<meta name="Property" content="Value">The most important meta information in the head section of the web page are:
-
Title Tag – Page Title
The TITLE Tag is not a Meta tag, but a separate HTML tag used to define the Page Title. It begins with <title> and must end with </title>. Due to its special importance for the ranking of a web page, it is also called Meta Title. The title should be defined individually for each web page.
The title tag needs to be considered in the On-Page Optimization for each and every web page. The title is an important Ranking Factorand it is displayed as a clickable heading in the search engine results.
The title is used to describe the content of the web page. It is typically placed in the head section before all other meta tags. Google and other search engines limit the title to 580 pixels. So the title should not exceed a maximum of 55 – 65 characters, including spaces and any necessary commas.
Especially for Search Engine Optimization (SEO), the Title is an important factor.
-
Meta Description – Summary of Content
The Meta Description is defined by the following meta tag:
Structure of Meta Description
<metaname="description"content="Page Summary">The page description should not exceed 140 – 160 characters, including spaces and punctuation.
The Meta Description is used as a snippet in the Search Engine Results Page (SERP). Therefore, it is recommended to use correct spelling and punctuation.
The Meta Description is first addressed to the visitors of the Web Page. Therefore, it should summarize the content in an easy-to-read language.
Due to its great importance for visitors and search engines, the Meta Description is, after the Title, the most important meta tag for Search Engine Optimization (SEO).
According to Google's recommendations, each web page should have an individual description that provides precise information about the content.
-
Meta Keywords – Search Terms
Meta Keywords is used to define relevant search terms or phrases that match the content of the web page. No more than a maximum of 5 – 10 Search Terms should be provided per page. The search terms are separated by commas and listed in order of relevance, most important search term first.
Meta Keywords are defined with the following meta tag:
Structure of Meta Keywords
<metaname="keywords"content="comma-separated list of keywords">The search terms specified in meta keywords have little or no positive influence on the ranking. However, the excessive use of keywords (keyword stuffing) can have a negative impact on the ranking.
Search engines either ignore this information (e.g. Google) or might even interpret it as a spam sign (e.g. Bing). So it's best not to use meta keywords.
-
Meta Charset – Character Encoding
Meta Charset defines the character encoding for the web page. There are many different character sets, but the two most commonly used are ISO-8859-1 (Latin-1) and UTF-8 (Unicode 8 bits). When creating a new web page, UTF-8 is the best choice.
Specifying the wrong character encoding can cause some characters to be displayed incorrectly. This can also lead to problems with search engine optimization (SEO) as the content may not be read correctly by search engines.
The character encoding for UTF-8 is defined in HTML5 with the following meta tag:
Structure of Meta Charset
<metacharset="utf-8">Problems with character encoding are bad for the user experience because the website looks broken. Google recommends the character encoding UTF-8.
-
Meta Robots – Instructions for Web Crawlers
Meta Robots can be used to control the indexing of a web page. This meta tag is a request to search engine crawlers, also known as robots. The two most common search engine robots are googlebot for Google and bingbot for Bing. Other search engine crawlers have their own names.
The name="robots" specification addresses the crawlers of all search engines.
By default, the following code is used for the robots tag:
Structure of Meta Robots
<metaname="robots"content="index, follow">This code tells the Search Engine Bots to index the web page. That means, the search engine is supposed to add the page to its database and the crawler is supposed to follow internal and external links on the web page.
Because crawling and indexing web pages is standard behavior for a web crawler, it is usually not necessary to explicitly specify that the web page is supposed to be indexed. If the robots tag is not present, index and follow are assumed by default.
Not all pages of a website are intended to be included in the index of a search engine. The robots tag is necessary if you do not want a web page to be included in the search engine index or if you do not want the links on the web page to be followed.
The following combinations for content="…" are possible.
-
index, follow (Standard)
index page and follow links -
index, nofollow
index page, but don't follow links -
noindex, follow
don't index page, but follow links -
noindex, nofollow
don't index page and don't follow links
The major search engines, in particular Google and Bing, respect the desire that is specified in the robots tag.
-
-
Viewport Meta Tag – Visible Area of a Web Page
Most desktop monitors display a web page with a pixel density between 75 and 110 PPI (Pixels Per Inch). Smartphones with Retina displays have an extremely high pixel density of 300 PPI or even higher.
As a result, a smartphone can display a web page at almost the same pixel count in the same layout as a desktop monitor. However, the text on the web page would be too small and would no longer be readable.
Meta Viewport allows you to adjust the display area for smartphones so that the web page is user-friendly and the text is easy to read. The Viewport Tag ensures that the website is scaled correctly for mobile devices. Without it, the page wouldn't be user-friendly and the text wouldn't be readable.
However, the Viewport Tag alone is not sufficient to create a mobile-friendly web page. Responsive Web Design is also required.
The following code is used by default for Meta Viewport:
Structur of Meta Viewport
<metaname="viewport"content="width=device-width, initial-scale=1.0, user-scalable=yes">-
The width parameter tells the mobile device how to handle the web page's width. With the value width=device-width, the page automatically resizes to the device width. This will ensure that the page is displayed in a responsive manner.
-
The initial-scale parameter determines the zoom factor when the page is requested. Its default value is 1.0, which means that the page is scaled 1 to 1. Scaling is not even necessary for responsive web design.
-
The user-scalable parameter determines whether users are allowed to zoom the page. The default value is user-scalable=yes. The value no would limit the user.
-
-
Meta Language
The Meta Language parameter can be used to specify the language of the content. The Language Code is specified according to ISO 639-1.
This meta tag is used by search engines to detect the language in which the content of a web page is written. You can specify the Language on a per-page basis.
The following code is used for the language tag:
Aufbau von Meta Language
<metaname="language"content="en">Two-character language codes according to ISO 639-1 can be used In the language tag. These can be extended by a two-character country code. For example:
Language Code German de German Austria de-at German Switzerland de-ch English en Englisch UK en-gb English USA en-us English Canada en-ca