Document Head

The document head may include meta tags, many of which are not visible to the user in the browser window. Therefore, in the upcoming examples, you won't see any visible content. These tags store metadata information about the page.

Page title

The text inside the <title> tag is displayed in the browser tab. The title should be a concise page description and should be at most 60 characters in length.

With the assistance of this code, we can achieve such an appearance of the website. In the browser tab, we will observe the exact text enclosed within the <title> tag (blue frame in the image).

Meta data

The <meta> tag contains information for browsers and search engines: document encoding, data communication, and much more. The meta tags can have many attributes as they all convey different information. The most important is page encoding. It helps a browser display the text correctly. In case of not passing encoding, the browser may show mojibake instead of the characters.

Meta tag attributes meaning

• name - name of a property can be any word or phrase, web browsers generally expect a value that they can recognize and use to perform an action. An example would be <meta name="author" content="name"> to state the author of the page;
• content - specifies the property's value. An example would be <meta name="language" content="english"> to specifies the page text language;
• http-equiv - stands for HTTP equivalent, and it’s used to simulate HTTP response headers. This is rare to see. An example would be <meta http-equiv="refresh" content="30"> to say the browser to refresh the page every 30 minutes.

Basic meta tags for SEO improving

Note

SEO (Search Engine Optimization) is the process of optimizing a website to improve its visibility in search engine results.

• <meta name="description"/> - specifies a brief description of the web page;
• <meta name="author" /> - specifies the web page author;
• <meta name="language"/> - specifies the web page language;
• <meta name="robots"/> - tells search engines how to crawl or index the web page;
• <meta name="googlebot" content="notranslate"/> - tells Google you don't let an automatic translation for the web page;
• <meta name="rating" content="safe for kids"/> - specifies the web page audience;
• <meta name="copyright" content="Copyright 2023"/> - specifies the web page Copyright.