1. Introduction
On-page optimization is one of the important jobs in SEO and meta tags are still essential tools in the on-page implementation. So what is a meta tag? What is its meaning? Which meta tags are essential and important in SEO?
2. What is <meta /> tag?
HTML <html> tag or <meta> tag in HTML is used to provide metadata about HTML document. Metadata will not be displayed in the browser, but it will be analyzed by search engines to get basic information about your website. In other words, it is intended to provide additional “information about the website” to the browser and search engines, which does not appear on the screen for the user to see, however the browser and tools that are readable and understandable by search engines, usually placed under the <head> tag of a web page.
Previously, some website developers thought that the meta tag could be placed in the body of a page, so which case is in <head> and what case is in <body> . For site definition meta tags, it must be in <head> . For example: meta description. But in some cases you need to highlight text in web pages. Then you can use meta tags in <body> .
So: The meta tags used to define the whole web page are placed in <head> . Some meta tags used to mark up text for a portion of web page content can be placed in <body> .
3. Examples of meta tags in HTML
Example 1: define keywords for search engines.
1 2 | <meta name="keywords" content="HTML là gì? Thẻ HTML meta"> |
Example 2: define a description for the site.
1 2 | <meta name="description" content="Tìm hiểu về metadata trong HTML"> |
Example 3: define the web page’s author.
1 2 | <meta name="author" content="Alex"> |
Example 4: website reloads automatically after 30 seconds.
1 2 | <meta http-equiv="refresh" content="30"> |
Example 5: Set a view so the website is easy to see on all devices.
1 2 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
4. The attributes of the meta tag
The <meta> tag has four basic attributes.
Below is a summary of the four attributes:
| Properties | Value | Description |
|---|---|---|
| charset | character_set | Specifies the character encoding for the HTML document |
| Nội dung | text | Provides the value associated with the http-equiv or name attribute |
| name | application-name, author, description, generator, keywords, viewport, robots | Identify the “name of an information type” that you want to add to the site |
| http-equiv | content-type, default-style, refresh | Specifies the character encoding for the HTML document |
4.1 Charset attribute
The charset attribute is used to define the character encoding of the web page. (Our Vietnamese uses the UTF-8 character encoding)
For example:
1 2 | <meta charset="UTF-8"> |
4.2 The name attribute
The name attribute is used to specify the “name of a type of information” that you want to add to the site. Note: The name attribute is only used to specify the name of the type of information you want to add to the site, and the content of that information must use the content property.
Here are some of the values commonly used by the name property: author value Identifies the author (owner) name of the web page.
For example:
1 2 | <meta name="author" content="Web cơ bản"> |
The above tag tells browsers and search engines that the author (owner) of the web page is the “basic Web”. When searching on google, the author’s name will show up next to the search results.
Keywords value Determine the list of keywords that you want when users type in search engines such as google, bing, …, the results will be displayed on your website.
Example: You want when a user types on google one of the keywords below will show your website as a result.
1 2 3 4 | xem phim hd phim hay phim hành động |
1 2 | <meta name="keywords" content="xem phim hd, phim hay, phim hành động"> |
Note: The keywords must be separated by commas.
Description value Briefly describe the main content of the website (about 150 characters is reasonable).
1 2 | <meta name="description" content="Website xem phim hành động hay chất lượng full HD miễn phí"> |
Note: The content of the description attribute should best contain the words in the keyword list, which will support the keywords attribute well as well as the display of your website on search engines.
Robots value The meta robots tag is a navigation tag for the Google search engine to crawl on a website’s indexed and exclusion pages. You can allow or disallow a search engine to index the page, track its links or archive it, or prevent it from indexing some unnecessary pages. For example:
1 2 | <meta name=”robots” content=”noindex, nofollow” /> |
This meta tag prevents search engines from indexing the page and prevents them from tracking the links on the page. If you happen to be using two conflicting terms (eg noindex and index), Google will choose the most restrictive option, noindex.
Why is this tag useful for SEO? First of all there is a simple way to prevent indexing of duplicate content, for example the print-to-print version of a page. It can also be useful for unfinished pages or sites with confidential information.
Refer to some additional declaration values:
“Index”: Google search bots when crawling are allowed to index this page.
“Follow”: This attribute allows Google search bots to rely on links on the current page of the website to find information on other pages related to this page.
“All” or “index, follow”: Including 2 values of index and follow is allowing google index, index and follow the links in the article.
“Noindex”: don’t allow google or robots to index this page.
“Nofollow”: Robots are not allowed to follow the link in the page to link to other pages.
“None” or “noindex, nofollow”: includes 2 attributes noindex and nofollow, not for google index trnag and not for robots to follow the links in the page.
4.3 The http-equiv property
The http-equiv attribute is commonly used to: Determine the content type and character encoding of the web page and determine the reload of the page.
Note: Similar to the name property, the http-equiv attribute must be used with the content property.
Here are the values used by the http-equiv property:
Content-type value Specifies the content type and character encoding of the web page.
For example:
1 2 | <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
However, we can replace it with <meta charset="UTF-8"> for brevity.
Refresh Value Determines whether the page is automatically reloaded.
Example: After 2 seconds the page will automatically reload.
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html> <head> <meta http-equiv="refresh" content="2"> </head> <body> <h1>Bức tranh bên dưới có tên là The Scream</h1> <img src="../image/the-scream.jpg"> </body> </html> |
4.4 Content Properties
After looking at the name property and the http-equiv property, you should be familiar with the content attribute. The content attribute is used to identify the content of the type of information you want to provide to browsers and search engines.
5. Title
The title tag is theoretically not a meta tag, but it is included with the other meta tags in the <head> tag as well. But I still put in this article because I personally find it quite important in SEO.
Syntax:
<title> The title of your website </title>
When you insert this syntax, the title appears in two different places: On the search results pages and on the tab of the web browser.
This means that your title tag has a big influence on your CTR (Click Through Rate) and ranking position. A good title is that you need to use keywords for the title. Remember that if the keyword (Title) matches the user’s search query, it will be displayed in bold. And one more thing is no more than 70 characters in length. So you need to write a short, concise title and content that you need to target users.
6. Conclusion
In a lot of other meta tags, like meta Abstract, meta Author, meta Copyright, meta Designer … but these meta tags are not important so I did not include them in this article. You can find out more yourself. You should pay attention to the tags: meta description, meta robots and title (I mentioned above that the title is not a meta tag but it is often considered a similar form). Meta description is used to display additional information about a website’s content. Search engines use it in their SERPs.
Meta robots: used to navigate search bots to index your page or you can prevent some pages with duplicate content, admin pages, secret pages …
Finally, one of the most important parts is the <title> tag. Remember not to let the <title> tag exceed 70 characters in length and use the keyword as leverage for its effectiveness.
I wish you success in your Onpage optimization. If you have any other ideas, you can comment and comment, or feel good, then share them with everyone to know.