The essential meta tags at a glance
Deposited in the head section of an HTML document, meta tags are used to indicate coded information and specify metadata. They don’t appear on the actual website, instead user agents like browsers or web crawlers can read meta tags. The function of a meta element is to convey additional information to a website, which facilitates the analysis of HTML files and makes maintaining file contents easier. HTML meta tags almost always follow the same structure; an element is first defined and then assigned a content. The formula for declaring metadata follows this structure:
<meta name="Name of element" content="assigned index"/>While metadata used to play an important role in search engine optimization, its influence on result rankings has waned in recent years. Nevertheless, website owners are recommended to keep this information in the HTML head and deposit detailed metadata, since it is still relevant for metasearch engines and local search scripts. Meta tags can also define instructions in order to control search bots (web crawlers).
Important meta tags
There is a long list of elements that can be incorporated in the HTML head section. In addition to essential information such as the page title, page description, and charset definition, the header can supply comprehensive information for user agents. Website owners can therefore use meta tags to define relevant keywords or to specify a topic for their page. Furthermore, authors and publishers can use meta tags to deposit copyright data. However, not all of this information is relevant for interactions with browsers and search bots. The situation is different with meta tags, which control the behavior of user agents by prohibiting the corresponding HTML page from being indexed or by preventing web crawlers from following outgoing links. The following section outlines the most important meta elements and their uses for website operators.
Title
Strictly speaking, the title is an independent HTML tag rather than a meta element, but due to its interaction with user agents, it is often associated with metadata. As a mandatory element in the HTML head, the title is generally placed before any further meta tags. Read by web browsers, the title appears as a default name when setting a bookmark, in the title bar of a tab or window and in the web browser’s search history. Additionally, the title tag is used by all the biggest search engines as a header on the search engine results pages (SERPs). It therefore has a decisive influence on the clicking behavior of search engine users.
According to Google, the title is just one of around 200 factors considered in the calculation of the organic results rankings. With regard to on page optimization, it is vital to ensure that the title does not exceed the maximum length of 55 characters. It is also recommended to place a main keyword in the respective page’s title tag. An example web page title would take this form:
<title>the most important meta tags and their functions | IONOS</title>
Character encoding
If the font is not already defined in the HTTP header, this information needs to be given in the HTML code. This will ensure, amongst other things, that any special characters are displayed correctly. Use the following meta-tag to specify the font or character coding:
<meta charset="utf-8"/>
This meta-information is also relevant when browsers retrieve HTML data directly from the hard drive, rather than via HTTP.
Description
The description, also known as the meta description, offers room for a brief summary of the page content. Since search engines present this meta tag as a snippet in the SERPs, careful editing is absolutely imperative for any content that’s displayed here. Due to its significant influence on web users’ click behavior, the description is one of the most important HTML meta tags for search engine optimization. However, it is important for website owners to remember to limit the description to 160 characters (including spaces). Any text after this point is cut off and an incomplete description will appear in the search results.
The meta description tag is aimed first and foremost at internet users and should therefore provide a succinct summary of the page content. Google’s guidelines also dictate that website operators should ascertain that each web page has a unique description with precise information about the page content. This attribute is of clear value to the user, who can ascertain at a glance whether the webpage is appropriate, and this has a positive impact on the click-through rate. The following shows an example of a meta description:
<meta name="description" content="HTML meta tags are a cornerstone of coding. But which are the most essential? We give you a rundown of all the meta tags you need to know."/>
Keywords
With keyword tags, website operators can define keywords for a search program. By entering information in this way, the search program will show the internet user HTML webpages with keywords corresponding to their search. HTML pages that contain the appropriate search terms in the keyword meta tag are given preference. The keyword tag used to be one of the most essential SEO meta tags, as primitive search engines used this as the central feature for search result rankings. However, because of the great potential to manipulate this meta element, it is now left out of Google’s ranking factors. Other search engine giants such as Bing also place less value on meta tag keywords, therefore the relevance of these meta tags for search engine optimization is close to zero.
Despite the fact that these keywords have little or no positive impact on the organic web search rankings, misuse of HTML meta tags can have a negative effect on your ranking. It is therefore necessary to take care when selecting keywords sets, remembering to avoid keyword stuffing (overuse of keywords) and the use of irrelevant meta tag keywords. Since local search scripts and metasearch engines occasionally use information in the keyword meta tags, it is recommended that, if website operators use keywords, they only record relevant ones. Single meta tag keywords can be separated with a comma, whereas a keyword phrase may well consist of several elements.
<meta name="keywords" content="keyword 1, keyword 2, keyword 3"/>
Author and Copyright
The “Author” and “Copyright” meta tags can be found in the source code of an HTML page. They are used to record information such as who built the corresponding website and who copyright ownership belongs to. The author tag is automatically inserted in some content management systems (CMS), and always gives the name of the last person who edited the page. The advantage of this is that the administrators in the source directory can ascertain who has edited which page. However, the use of these HTML meta tags is optional.
<meta name="author" content="Author name" />
<meta name="copyright" content="Copyright owner" />
Instructions for web crawlers (bots)
One of the main functions of meta tags is to convey index instructions to search engine crawlers. These are defined at page level by robots metadata. The following meta tags are used to determine whether a page is added to a search engine index and if it is available for a web search. They can also specify whether outgoing page links should be followed or ignored by the crawler. In this way, meta robot data proves itself to be one of the most relevant kinds of SEO meta tags.
Index
To allow a search engine crawler to index an HTML site, use the following meta tag:
<meta name="robots" content="follow"/>
However, since web crawlers (search bots) index websites by default, it is generally unnecessary to write this command.
Noindex
If you don’t want an HTML page to appear in the search engine index, you must explicitly define it. This meta tag allows search programs to pass HTML content onto the search engine database:
<meta name="robots" content="noindex"/>
The value “robot” of the name attribute conforms to all search engine crawlers. The content attribute value “noindex” states that the current page shouldn’t be indexed. It is also possible to prevent indexing for specific robots with an alternative value for the name attribute, i.e. “googlebot” instead of “robots”.
Follow
Web crawlers follow outgoing HTML links by default. However, if desired, it can be expressed by the following robot metadata:
<meta name="robots" content="follow"/>
This meta tag is also essentially redundant, since the crawlers of all the significant search engines should automatically follow hyperlinks as long as nothing else is defined.
Nofollow
The following meta tag can be used to prevent search bots arriving at subpages via hyperlinks or following links to other domains:
<meta name="robots" content="nofollow"/>
Crawlers then treat the page as though no links exist. That meta element doesn’t prevent the content of the corresponding HTML file from being transmitted to the search database.
The meta tags index/noindex and follow/nofollow can be combined or used alone. For example, they can be used to specify that a site be recorded in the index, but the hyperlinks should be ignored. Alternatively, both actions can be prohibited or allowed.
<meta name="robots" content="index,nofollow" />
<meta name="robots" content="index,follow" />
<meta name="robots" content="noindex,nofollow" />
http equivalents
With the attribute “http-equiv”, HTML meta tags can include information equivalent to that usually contained in the HTTP header. This information is read as a substitute if the web server is not correctly configured. Generally, an identical HTTP header is preferred over HTML meta tags.
Cache control
It is standard for websites to be stored on proxy servers, which allows the websites to load faster when subsequently called up. To prevent this process, use the meta tag “cache-control” with the value “no-cache”:
<meta http-equiv="cache-control" content="no-cache"/>
Websites that are provided with this meta tag are reloaded from the web server with every page view. This leads to longer loading times, but on the other hand, it can be very useful, for example, if a web page’s content is constantly being updated.
Expires
Rather than completely preventing the storage of data in a cache, you can set an expiry date for the HTML data in question with the attribute “http-equiv”. For this, the following meta tag can be used:
<meta http-equiv="expires" content="exercise date in seconds"/>
This tag allows an exercise date to be set at any time. When the defined time span has expired, a web browser will load the corresponding HTML document from the source address. Should the content load from the original page anyway, an expiration date of 0 seconds is chosen. For an expiration date of 12 hours, web page owners should choose 43,200 seconds.
<meta http-equiv="expires" content="0"/>
<meta http-equiv="expires" content="43200"/>
Alternatively, you can set a time span to the exact date and time. This should be given in Greenwich Mean Time (GMT).
<meta http-equiv="expires" content="Sat, 07 Feb 2016 00:00:00 GMT"/>
Refresh
Meta tags with the attribute “http-equiv” can be used to set up a simple form of redirecting. Like the expires tag, a refresh tag can define an expiration date. If this is achieved, user agents such as web browsers and search engine crawlers are redirected to a predetermined URL. This example shows a redirection to the IONOS homepage starting 10 seconds after loading.
<meta http-equiv="refresh" content="10; url=http://www.ionos.com/"/>
Since the refresh tag doesn’t work under some web browser settings, the World Wide Web Consortium (W3C) recommends a server-side realization using HTML status code 301, rather than redirecting via meta tags.
Meta tag generator
Website owners can benefit from the large number of meta tag generators that can be found online, such as the one available at seoptimer.com. This free tool is useful for automatically producing meta tags; all you need to do is enter the relevant information into the meta tag generator wizard. The software then compiles the data in a source code, which can be used in the HTML header of your website.
Related articles
Search engine optimization: basics for beginners
Google helps users to find exactly what they are looking for online. Every website owner should optimize their site in order to be placed as high up as possible in the search results. This is beneficial to the reader and customer as well as the search engine itself. Optimizing is not only about content; it also includes structural and technical aspects.
REDPIXEL.PLShutterstock Modern web development: the basics
Der Trend in der Webentwicklung führt weg von statischen Webangeboten hin zu interaktiven Inhalten. Auch wenn HTML und CSS nach wie vor das Grundgerüst einer jeden Website darstellen, greifen Webentwickler immer öfter auf serverseitige Programmiersprachen wie PHP zurück, um dynamische Webauftritte zu realisieren. Zudem bieten clientseitige Skriptsprachen wie JavaScript die Möglichkeit, eine…
What is Schema.org?
Structured data is the only pathway to web 3.0. Web owners wishing to enlist the help of web crawlers or screenshots with semantic notation have an enormous choice of markup vocabularies to select from. The collaborative project Schema.org seeks to make this task a more manageable feat. The standardized markup is based on an agreement between the leading search engine providers of Google,…
Learn HTML
In times of content management systems and website construction kits, you might think it’s a waste of time learning HTML. But if a page doesn’t work for some reason or if you plan to install dynamic elements, you won’t be able to continue without having knowledge of this web language. In our detailed HTML tutorial, we introduce you to the basic features of the markup language, including numerous…
How to add a meta description in WordPress
Appropriate meta descriptions for a WordPress site allow users to find and visit your sites faster and more frequently. It’s no wonder then that adding a meta description in WordPress is a recommended practice. Learn how to create meta descriptions for WordPress, what you should consider, and what makes for a good description.
What are tags?
It can be frustrating searching for information on websites and not being able to find what you’re looking for. The same goes when searching for similar articles, products, videos or images. Tags are keywords which are extremely useful in this case. Tags search for content and make websites clearer. In our article, you can learn more about tags and how to use them.
