Meta Tags: Guide to HTML Optimization for Your Web Pages

Character encoding

If the character encoding is not specified in the HTTP header, it is recommended to define it directly in HTML, in particular to guarantee thecorrect display accents and special characters. In order to specify special characters or character encoding, use the following meta tag:

Metadata is also relevant if a browser does not receive HTML files over HTTP, but directly from the hard drive.

Description of pages

The description (also called meta description tag) is a space dedicated to writing a short summary of the content of the Internet page. Since this meta tag is taken into account by the main search engines like Google or Bing in their results, it is essential to give it special care when writing it. Indeed, the meta description has a direct influence on the clicking behavior of Internet users. As such, it is one of the most important SEO meta tags for HTML pages.

Website operators must ensure that the meta description text does not exceed 920 pixels, or approximately 150 to 160 characters. Beyond this limit, search engines risk truncating the text displayed in the results. It is therefore recommended to write a description concise and engagingwhich effectively summarizes the content of the page while encouraging clicks.

Author and copyright (author And copyright)

Meta tags author (author) and copyright (copyright) allow website operators to indicate in the source code the author of the HTML page, as well as the copyright ownership of its content. In some content management systems (CMS), the tag author can be populated automatically. These two tags are optional in French law.

Information for web crawlers (robots)

One of the essential roles of meta tags is to provide indexing instructions to search engine crawlers. This is done at the level of each page using the meta tag robots. Thanks to the latter, it is possible to indicate whether or not a page should be indexed in search engine results (SERP), and whether outgoing links should be followed or ignored by crawlers. The directives provided via the robots tag are part of the essential meta elements in terms of SEO.

index

To allow a page to be indexed in a search engine, use the following meta tag:

Since indexing web pages corresponds to the standard behavior of web crawlers, this data is generally unnecessary.

noindex

If you want to prevent an HTML page from being indexed by search engines, you must clearly specify this using a dedicated meta tag:

The attribute name="robots" applies to all search engine crawlers. Associated with the attribute content="noindex"it indicates that the page should not be indexed. If you want to restrict this directive to a specific robot, like Google's, just use another attribute name, e.g. name="googlebot".

follow

Following an outgoing link from a web page is standard behavior of web crawlers. If desired, bots can be redirected in the following way:

This meta tag is actually redundant, because web crawlers follow all links on a page by default unless otherwise directed like nofollow is specified.

nofollow

If you want to prevent bots from following outgoing links on the page, use the following tag:

This instruction instructs the crawler not to transmit PageRank via outgoing links on the page. Until 2019, Google strictly adhered to this guideline. From now on, it is considered a simple recommendation; Google may still decide to follow these links and crawl them.

Meta tags index/noindex And follow/nofollow can be used alone or combined. For example, it is possible to authorize the indexing of a page while preventing robots from following the links it contains. The two actions can thus be authorized or blocked independently of each other.

HTTP equivalents

Thanks to the attribute http-equivmeta tags can simulate certain instructions in an HTTP header. They are particularly taken into account when the web server is not configured to send these headers directly. However, if a statement is defined both in the HTTP header and via a meta tag, it is the version of the HTTP header that prevails.

cache-control

To ensure pages load quickly, it is common for the Internet to use proxy servers or browser caches to temporarily store content. This behavior can however be prevented using the meta tag cache-control associated with the value no-cache :

Web pages with this tag should load on each page request. This slows down the page loading, but can be relevant if the content of a web page is constantly changing.

expires

Instead of completely blocking the cache, the attribute http-equiv gives you the opportunity to set an expiration date for retrieved HTML files. To do this, here is the meta tag to use:

You can set the cache duration using a value expressed in seconds. For example, a value of 0 disables caching completely, while a value of 43200 corresponds to a duration of 12 hours. Once this time has elapsed, the browser reloads the page from the original server.

You can also set durations, including dates and times. These must be specified in international format and Greenwich Mean Time.

refresh

Meta tags including the attribute http-equiv allow you to create a simple form of transfer. In the same way as the tag expires sets an expiration date, refresh defines a redirect. When this limit is exceeded, user agents such as Internet browsers or web crawlers are forwarded to a predefined URL. This code example shows a 10-second transfer to the IONOS home page:

Since the meta tag refresh does not work under certain browser settings, the World Wide Web Consortium (W3C, technical standards organization) recommends server-side implementation using HTML 301 code rather than transfer via a meta tag. You can find more information about this in our article on the main HTTP status codes and their meaning.

Meta tags: HTML code example

Below is sample code representing an HTML header simple but complete. It incorporates the most important meta tags mentioned in this article; it is inspired by the actual metadata used for this article.