HTML meta tags: how they work
Related Videos: 27: Which HTML Meta Tags Are Required in A Website? | Learn HTML and CSS | HTML Tutorial | HTML SEO (May 2024).
There are many HTML meta tags. In this practical tip, we will examine which are the most important, why you need them and how they work.
What are HMTL meta tags used for?
Meta tags - or meta details - provide useful instructions for the web server, browser or various search engines. Information about the author or the content is stored here, which is read out and used by various programs.
- There are five important meta details that you shouldn't forget. These are listed in the next section.
- Other useful meta tags help the browser to process information and thus execute any instructions.
- Some tags are important for search engine optimization: The search engines search through this information and use it to display information in the search queries. For example, the title and description are read from this information and displayed.
- The title, the description and the keywords are important information for the search engines. For example, if you search on Google, this information will appear in your search results. The more precise the information, the better the chances of ranking on Google and other search engines.
- In the tags you can also give instructions on how often and which pages the search engines should capture.
- All meta information is given in the header area of the website. So these belong between the HTML tags and ,
These are the six most important HTML meta tags
Here we list the six most important HTML meta tags and their meaning. These should not be forgotten as they contain important information.
- The most important is the title tag, which is actually not a meta tag in the actual sense. It is the business card of the website and forms the headline. This tag is also important for the search engines and is displayed there. Example: The most important meta tags
- What would the website be without a description? There is also the description meta tag. Just like the title, the description is displayed in the search engine. A good description should be between 150 and 250 characters, which corresponds to about 30 words. Example:
- In order to be found better with the search engines, there is the meta tag keywords . Here you enter keywords that are related to the page. Most search engines only index the first 20 keywords. It is important here that you name the most important in the first 10 bullet points. The keywords are separated with a comma. Example:
- The search engines search the website and index it. However, if you do not want the entire website to be indexed, you have the option of preventing this with the meta tag robots . This indicates whether and how the pages can be indexed. With the specification no-index, indexing is prohibited. Example:
- With the meta tag revisit-after you indicate when the "spider" of the search engine may index the page again. You have to specify a period - for example "7 days" for 7 days. It is important to note that Google does not use this day, but uses an internal date. Example:
- In today's world, you are always online everywhere - especially with smartphones. You can use the viewport meta tag so that these devices do not directly zoom in on the page you are viewing . This tag ensures that the page is scaled so that it is completely displayed on the screen. So you can get an overview of the content and zoom in if necessary. Example:
More HTML meta tags
There are other tags that are not as important and that play a subordinate role. We list some of them below and show what is behind them. However, this is just a small sample of the many tags that still exist.
- So that the search engines can assign the website to the correct country, there is the tag language . The advantage should be obvious - because what use is it if a website with German content is displayed in the US search engine? Example: or
- When building a website, you usually want to specify who is the originator. There is also the tag author . This makes it easy to see in the source directory who built and managed the page. Example:
- But what if you want to redirect to another page? Of course, you can also simply work with links. However, the refresh tag is automatic . If a URL has changed, you can redirect from the old URL to the new URL. Example: , This is a forwarding after 10 seconds
- For websites with a language other than English, you should specify a character encoding. This prevents umlauts from being displayed correctly. Example: , Unfortunately, this information is only supported by the newer browsers. For older browsers use: