What information is in the meta tag. HTML meta tags, their purpose and correct filling
Read also
Meta HTML tags their purpose and correct filling - 4.8 out of 5 based on 4 votes
Meta tags are special service tags HTML languages and XHTML. The user browsing the site does not see their activity. They are designed to transmit information to search robots that index the pages of the site, as well as to browsers of visitors.
These tags are optional and can be omitted when coding pages, unless you are pursuing one of the goals described below.
What are meta tags for?
Meta tags perform a variety of functions. For example, they store service information, transfer it to search robots and browsers. So, robots receive information about keywords, page description, author, and other data from meta tags.
Where are they? How to record?
Meta tags for the site are located in the code HTML pages between tags
... and their entry looks like this:
As you can see from the example, a closing tag is not required for them.
Four attributes are available for the meta tag, of which only the first one is required - content:
1. content. Sets the value of the attribute given by name and http-equiv.
2. http-equiv. Converts a meta tag to an HTTP header. The value of this attribute is converted to the HTTP response header format.
3.name. Name, it determines the purpose of the meta tag. Name and http-equiv cannot be used in the same meta at the same time.
4.charset. Sets the encoding of the document.
HTML meta tags are divided into two groups:
name. tags of this type contain text information about the content of the page, Description, keywords, Robots, page author name. Search engine robots are looking for the necessary information here.
HTTP Equiv. Tags of this type affect the formation of the page header and indicate to the browser the mode of its processing.
Conventionally, by function, the values of meta tags can be divided into the following groups:
1. Controlling the browser, that is, containing requirements or tips for displaying pages on the device screen.
2. Containing information about the content of the page and its author.
3. Containing information for search engine robots.
Let's take a closer look at each of them and consider what they are responsible for and how they are filled.
Values for browsers
All tags in this group are characterized by the presence of the http-equiv attribute.
1. Content-Type - enforces encoding and document type.
In fact, browsers are required to determine the encoding themselves, and they even do so if there are no instructions on this. That's just the browser can have wrong settings. In this case, instead of letters, funny squares will appear on the page. And if the server does not work correctly, then even switching the encoding in the browser will not help. Therefore, it is better to always specify the page encoding, but at the same time you need to specify the encoding corresponding to the one with which the server gives the page.
An example of setting the international encoding utf8:
2. Content-Language. Sets the language of the document and reports it to robots indexing the page.
Robots can determine the language themselves, but the tag will be useful in case of broken browser settings on the user's side.
An example of setting the Russian language:
3. Cache control. Tells the browser about the cache action on this document.
- public. Caching will be possible in all available caches.
- private. Cached only in the private cache, not cached by the proxy.
- no cache. Complete ban on caching.
- no store. May be cached, but not archived.
- max-age=time, must-revalidate. Specifies the maximum time, in seconds, that the browser should keep the page in the cache.
- max-age=time, proxy-revalidate. Also the maximum storage time, in seconds, but in this case it is indicated not for the browser, but for the proxy server.
4. Pragma. Disables page caching. The tag can be used if the information posted on the site page is frequently updated.
5.Expires. Manages document caching. If the time declared in this value has passed, then the browser should again request the page from the server, and not use the page from the cache. It is clear that if you specify a date that has already passed, then the page will never be cached. This is also not worth doing because search robots may not index a page with an outdated date.
6. Refresh. The browser will automatically refresh the document after the number of seconds specified in given value. You can check one useful thing. Tag attributes accept a URL. If you specify the URL of another page, then the browser will load it after a while.
Example, after 5 seconds the user will be redirected to the page: http://your-sait.ru/home.html
Values for search engines
Meta tags for search engines are not related to the display of the page on the monitor, but some of them are important for indexing and promoting the site to the TOP of search results.
1.Description. Contains a description of the page. The information written here is displayed on the search results page when generating a snippet.
If the description is set correctly and attracts attention, then the user with more likely will go to your site, and not to some other. You need to try to match the description with the information actually presented on the site.
2. Keywords. This tag lists keywords, separated by commas, that accurately characterize the page. Used to be important, but not now. They were used by robots to determine phrases for which this page should show up in search results. Later, however, cunning spammers joined in this case, who stuffed a thousand keywords into one page. At the moment, the information recorded here is not used very actively by search engines.
3. Robots. The robots meta tag controls how pages are indexed by search engines.
Can take one of the following values:
- index. The page can be indexed.
- noindex. Page content is not allowed to be indexed.
- follow. Search engine robots are allowed to follow the links on this page.
- Nofollow. Robots are not allowed to follow links on this page.
- All. Index the page and follow the links on that page.
- None. Do not index the page, do not follow the links of this page.
On a note. Instructions described in Robots search engines, can also be set in the robots.txt file. But what is specified in meta tags takes precedence over robots.txt directives. That is, if you allow the indexing of a certain page in the meta tag, and prohibit it in robots.txt, it will still be indexed.
An example of a complete ban on indexing and following page links:
4.Revisit. Tells the search engine robot when it should revisit and re-index the page. The only bad thing is that the robots usually run on their own schedule, so this value is ignored and slightly useless.
An example, in theory, the robot should visit the page in 5 days.
5. Resource-Type. Describes the state of the document, if the value is different from Document, then the page will be ignored by search engines and will not be indexed. An important tag for large resources that use documents of various types.
Some possible values:
- Build
- classification
- Creation
- Document - Accepted by default.
- Formatter
- operator
- random text
- Rating
- Site-languages
- Subject
- Template
- version
6. Subject. Indicates the subject of the document being searched for by search engine robots. So far, it does not work quite correctly, since classification tables have not been installed by search engines.
HTML tagsSignificance and application
Tag provides metadata about an HTML document. The metadata is not displayed on the page, but is interpreted by browsers and search engines.
Meta elements are typically used to indicate a page description, keywords, document author, and other metadata. Multiple meta tags are allowed and usually required. Tag always placed inside a tag
. XHTML requires a closing tag , V HTML element considered to be single.Browser Support
| Tag | Opera | IExplorer | edge |
|||
|---|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
Attributes
| Attribute | Meaning | Description |
|---|---|---|
| character_set | Specifies the character encoding for HTML document. | |
| content | text | Specifies the value associated with the name and http-equiv attributes, depending on the context. |
| http-equiv | content security policy content-type default style refresh | In fact, it is equivalent to a hypertext header (imitation of an http header), form the page header and determine its processing. As a rule, they control the actions of browsers and are used to generate information issued by regular http headers. |
| name | application-name author description generator keywords | Specifies the name of the document at the metadata level. |
| scheme | format/URI (Uniform Resource Identifier) | Not supported in HTML 5. Indicates useful information about the scheme, or the name of the scheme itself, which should be used to qualify the value of the content attribute property. |
Usage example
Specifying the Document Encoding
Tag allows you to tell the visitor's browser which character set and which encoding to set on a web page. Attribute (HTML tag ) specifies the character encoding for the HTML document.
charset="utf-8" >This is the title.
This is a paragraph.
IN this example we set the document encoding to UTF-8 using the element and attribute. The UTF-8 encoding is one of the generally accepted and standardized text encodings that allows you to store Unicode characters.
Frequently used meta tags
Metadata is divided into two main groups:
- first group- the value of the name attribute.
- second group- attribute values
Element (from English. metadata- metadata) defines data (they are also called meta tags) that are used to store information intended for browsers and search engines. For example, search engine engines refer to meta tags to retrieve site descriptions, keywords, and other data. More than one meta tag is allowed, they are all placed in the container
. As a rule, the attributes of any meta tag are reduced to name=value pairs, whose names are defined by the keywords content , name , or http-equiv .Syntax
Closing tag
Not required.
Example
Specification
Each specification goes through several stages of approval.
- Recommendation (Recommendation) - the specification is approved by the W3C and recommended as a standard.
- Candidate Recommendation ( Possible recommendation) - the group responsible for the standard is satisfied that it meets its goals, but the support of the development community is required to implement the standard.
- Proposed Recommendation ( Suggested recommendation) - at this stage, the document is submitted to the W3C Advisory Board for final approval.
- Working Draft - A more mature draft after discussion and amendments for community review.
- Editor's draft ( Editorial draft) is a draft version of the standard after changes have been made by the project editors.
- draft ( Specification draft) is the first draft version of the standard.
Standing apart is the living standard HTML (Living) - it does not adhere to the traditional version numbering, as it is in constant development and is updated regularly.
×Browsers
The following notation is used in the browser table.
- - the element is fully supported by the browser;
- - the element is not perceived by the browser and is ignored;
- - various errors may occur during operation, or the element is supported with reservations.
The number indicates the browser version from which the element is supported.
Why do people create websites? Some need to promote their firm or company, others need a visited blog. The reasons may be different, but one thing is clear for sure - the art of building and promoting a site takes time and effort.
And finally, you were able to build your first blog or website: you decided what topic it would be devoted to, decided on the design and started filling it. Now it's time to properly style the "description" and "keywords" meta tags. What are they and how to use them?
What is the description meta tag
In short, description is short description the page that the user sees as a snippet in the list of results Google search, Yandex, etc. Snipet - display description in search results. Although they are practically the same thing, in this article we will be able to see the difference.
IN source code page meta description tag is located in the head of the html code. It looks something like this:
How to fill in the description meta tag
Despite the fact that some decide to use the same advertising passage for all pages of the site, according to most experienced site builders, it is important to prescribe your own text for each page. Why? This affects the visual perception of the user. In addition, if the description is written effectively, it will attract more visitors to your site. One important point, which is worth considering - description should not be too long or too short - on average, at least 380 characters are desirable. And although, looking at the search results, you can see 200-300 characters, in fact, Google uses the entire passage that you wrote.
Thus, concisely and briefly, you should describe what the user will find on your site. In addition, this must be done in such a way that he wants to come to you. Let's look at some examples of advertising excerpt design.
Examples of description texts
Description meta tag - how to fill it in? To answer this question, let's look at some examples. If you're the owner of a psychology site, you could write something like: "Search for a psychologist specialist, as well as tests, advice, family recommendations and more" as a description. On the other hand, you can briefly describe the purpose of the site if it is clear to most visitors what educational institution or the enterprise in question. It might look like this: "Lomonosov Moscow State University".
If your site contains music or video content, then the description text should list what can be downloaded from your page. It may say: "Download movies and music for free at good quality" or "Free classics in modern processing - 128, 196, 320. Download for free."
When writing a description, you can take the most "juicy" part of the article (for those who are too lazy to write a separate unique text for the promotional piece). In any case, it is important that the user receives on your site the information that he expects to find and that you promise him. To learn how to correctly fill in the description meta tag, examples can be memorized or written out.
Automatic site generation systems
If you are building a site using the constructor, then the description meta tag for the site must be entered in the appropriate field in the editor. Along with the subheadings "h1", "title" and "keywords", there is a cell labeled "description". As is the case with other automatic site building systems, the meta tag description opencart must be entered in the field provided for this purpose.
Incorrect filling of description
It's best not to use ad snippet generation systems that automatically work with the page. Why? It is unlikely that you will be interested in the text compiled by the machine, because most often such systems use the first few sentences of the page, and this is ineffective. The first paragraph does not always reflect the essence of the material that you offer.
How is it different from description
Unlike description, keywords are a list of key words needed to characterize your page. However, keywords is also not the same as keywords search engine users - those words that are entered in the top search bar of Google or Yandex. True, today "Yandex" almost never uses these words when issuing search queries. "Google", as their representative said, does not pay attention to them at all. But the description snippet is much more important - users see it and use it. Therefore, special attention should be paid to key queries and the description meta tag. If you still want to specify keywords for the pages of your site, then in the html code of each of them you need to enter a meta tag:
meta name="keywords" CONTENT="enter keywords for our page".
As in the case of the description tag, it is located in the "head" of the page.
Key queries of the Yandex search engine
It's good if your ad copy contains some words that users enter into the search bar. To determine the statistics of entered Yandex queries, you need to go to the site: http://wordstat.yandex.ru/. You must register to use the service. After that, in the line at the top of the page, enter your service or product. Let's say your site is about history. Enter the word "history". And in the results we see two columns: "key query" and "number of impressions per month." For example, the words "history class" were searched for more than one and a half million times a month. Among the most frequently entered phrases we can see: "online history", "horror history", "American Russia", "download 6" and "history 5". In addition, in Yandex Wordstat you can select the region or locality for which statistical information will be displayed. This is very convenient, because people in different regions and cities may be interested in different products.
If in the description-description use the most popular search terms, then you can make your site appear on the first pages of search engines. To achieve this, you will have to work hard - this is the main goal of every website builder.
Formation of snippets
As we said before we are talking about the same description text. Search engines Bing, Yahoo! and Google displays the snippet for the Internet user, which is specified in the description meta tag. But "Yandex" is acting a little differently. That is, what you write in the ad snippet tag will not be shown in the snippet area in the search results of a particular page. How to fix it? The text of this passage can be configured in the Yandex webmaster's office. However, there is information that we cannot influence, no matter how much we would like, for example, the number of stars of the hotel. To change some address data of an enterprise or organization, you need to leave a special request. In most other cases, you can customize your ad snippet yourself. There is such a significant difference in the issuance of Yandex search results. Why do you need to know? Again, repeat if we want to attract more visitors to our site.
What have we learned
So, as we have seen, anyone can correctly fill in the description meta tag for a site. Examples of how to do this have been detailed in this article. In addition, you and I could find out what is the difference in filling out an advertising passage for Yandex and Google search engines. We learned what user keywords are for and how to select them, as well as the almost complete uselessness of keywords. Using all the tips in this article, you can achieve complete success, and with extra dexterity, your site may even rank in the top ten that users of the World Wide Web will see. Remember one thing: having promoted the site once, it is important to continue to improve it further so as not to lose the gained rating.
Meta tag HTML defines information about a web page. The tags of the meta group are called meta tags, and the contents of the meta tag are called metadata. Metadata indicates various technical information about the document, mainly for browsers and search engines and are not visible to the user on the site.
Meta tags are often used: author, description, keywords, viewport, charset.
Meta tags are in area
HTML document(). You can insert or, as they say, register meta tags in any order and quantity.Using meta tags is optional, but we recommend filling in at least description , viewport , charset meta tags. This will be a plus for internal website optimization.
Syntax
Examples of using in HTML code
Basic meta tags
Below are a few basic tags with application notes and examples of use.
description meta tag
Brief description of the document (site page). Search engines can use the contents of the meta description tag to display in the SERP snippet.
An example of using the description meta tag
keywords meta tag
Page keywords. Previously used to indicate to search engines the main semantic phrases of a web page. On this moment there are different opinions on how to fill in the keywords meta tag correctly and whether it is worth it.
An example of filling in the keywords meta tag
viewport meta tag
Specifies some options for the browser's viewport. Attribute width specifies the width of the viewport (viewport), initial scale- scaling factor when the page is opened for the first time.
An example of using the viewport meta tag
Meta tag for a responsive site: specifies that the viewport width is adjusted to the device dimensions:
charset meta tag
Web page encoding. Most common value: "UTF-8".
An example of using the charset encoding meta tag
refresh meta tag
Meta tag with attribute indicates time automatic update pages. The page will automatically reload at the interval specified in content attribute. The value is specified in seconds.
Meta http refresh example
Browser Support
| Tag | |||||
| Yes | Yes | Yes | Yes | Yes |
Attributes
| Attribute | Values | Description |
|---|---|---|
| charset |
character_set |
Indicates HTML encoding document. |
| content |
test value |
The main content of the meta tag. Depends on other attributes. Used together with http-equiv or name. |
| http-equiv |
content-type |
Sets the HTTP header for an attribute content. Content-type- Encoding. Deprecated value, in HTML5 use charset(see example above). |
| name |
application-name |
The name of the meta tag. Like http-equiv defines the essence of the meta tag. application-name- the name of the web application that the page represents. |