Website Advisor: Maximum length of meta title and meta description • Meta keywords - specify search terms • What are meta tags anyway?

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 webpage. 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 webpage.

Meta tags are always built the same way. They are written as a pair of property and value:

<meta name="Property" content="Value">

The most important meta information in the head section of the webpage are:

Advertisement

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 webpage. The title is an important ranking factor and it is displayed as a clickable heading in search engine results.

The title is used to describe the content of the webpage. It is typically placed in the head section before all other meta tags. Google and other search engines limit the title to 580 pixels. Therefore, the title should be a maximum of 55 – 65 characters, including spaces and any necessary commas.

Especially for Search Engine Optimization (SEO), the title of the webpage is an particularly important factor.

Advertisement

Meta Description – Summary of Content

The Meta-Description is defined by the following meta tag:

<meta name="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 webpage. Therefore, it should summarize the content in an easy-to-understand language.

Due to its great importance for visitors and search engines, the meta description is, after the page 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.

Advertisement

Meta Keywords – Search Terms

Meta Keywords can be used to define relevant search terms that match the content of the webpage. No more than 5 – 10 Search Terms per Page should be used. The search terms are separated by commas and should be listed in order of relevance, i.e. the most important search term is at the beginning of the keyword list.

Meta Keywords are defined with the following meta tag:

<meta name="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 webpage. 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 webpage, 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:

<meta charset="utf-8">

Problems with character encoding are bad for the user experience because the website looks broken. Google recommends the character encoding UTF-8.

Advertisement

Meta Robots – Instructions for Web Crawlers

Meta robots can be used to control the indexing of a webpage. 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:

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

This code tells the search engine robots to index the webpage. 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 webpage.

Because crawling and indexing webpages 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 of the 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 webpage to be included in the search engine index or if you do not want the links on the webpage to be followed.

Advertisement

The following combinations for content="…" are possible.

  1. index, follow (Standard)
    index page and follow links

  2. index, nofollow
    index page, but don't follow links

  3. noindex, follow
    don't index page, but follow links

  4. noindex, nofollow
    don't index page and don't follow links

The major search engines, in particular Google and Bing, will respect the desire that is specified in the robots tag.

Viewport Meta Tag – Visible Area of a Webpage

Most desktop monitors display a webpage 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 webpage at almost the same pixel count in the same layout as a desktop monitor. However, the text on the webpage would be too small and would no longer be readable.

The viewport Meta Tag allows you to adjust the display area for mobiles and smartphones so that the webpage 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 webpage. Responsive Web Design is also required.

The following code is used by default for the viewport tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  1. The width parameter tells the mobile device how to handle the webpage'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.

  2. 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.

  3. 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.

Advertisement

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 webpage is written. You can specify the language on a per-page basis.

The following code is used for the language tag:

<meta name="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