【My Study Note】Metadata
Metadata
A major part of launching a website when you use a search engine is a process called 「SEO (Search Engine Optimization」. This process involves making improvements to a website’s content semantics and delivery to improve its ranking in search results.
What exactly does a search engine do when it anylized a web page?
when a search engine visits your website, it analyzes the HTML document and media content. If it finds a link to another HTML document, it follows the link to that document and continues following links until it is finished analyzing the entire website.
Based on the results of the analysis and the content on your website, the search engine will rank the website for various search terms. So while your website might be the number one result for one search term, it could rank very low for another.
Every search engine has its own algorithm for ranking websites. And while it’s not disclosed how the ranks are determined, one of the way to improve the SEO is using meta tags.
Meta tags define metadata about a web page.
What is metadata?
It’s data about other data which in this case is data about the web page.
Meta tags are added inside the head element of your HTML document and nothing inside the head element is displayed in the web browser. In other words, meta tags are unseen elements within the browser. Also, there’s no closing tag for the meta tag.
<meta name = "" content = "" >- Name attribute: Specifies the name of the metadata
- Content attribute: Specifies the value of the metadata
Name Attribute
The name of the property can be anything you like, although browsers usually expect a value they understand and can take an action upon. An example would be <meta name="author" content="name"> to state the author of the page.
Content Attribute
The content field specifies the property's value. For example, you can use <meta name="language" content="english">, to specify the language of the webpage to search engines.
The Author Metadata
<meta name = "author" content = "Jane Wilson" >The author metadata specifies the author of the web page. The name attribute is author and the content attribute is the person and company who are the author of the web page.
The Description Metadata
<meta name = "description" content = "Jane's first web page" >The description metadata describes the content of the web page. This is often used by search engines as descriptive text in search results. The name attribute is set to description and the content attribute is the descriptive text.
The Keywords Metadata
<meta name = "keywords" content = "holidays, free, summer" >The keywords metadata was previously used to provide search keywords for search engines. However, this led to a lot of websites using the keywords metadata to manipulate search rankings. One of the major search engines now ignores this metadata and another uses keywords metadata as a spam indicator. Consequently, it’s recommended not to include this metadata in modern web pages.
The Robot’s Metadata
<meta name = "robots" content = "index, follow" >The robot’s metadata tells search engines if and how they should analyze your web page. The name robots comes from the automated software often referred to as bots, that search engines used to analyze websites.
The content attribute for Robots has four possible values.
- Index: Tells the bot to analyze the page
- Follow: Tells the bot to visit all links on the web page
- Noindex: Tells the bot not to analyze the page
- Nofollow: Tells the bot not to visit links on the web page
However, for the noindex and nofollow, some bots will ignore this so it’s best not to rely on this to stop bots from analyzing and visiting your page.
The Viewport Metadata
<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >The viewport metadata is important when designing responsive web pages. There are many values available for viewport metadata. The most used value for the mobile experiences is the example above.
It’s important to note that viewport metadata does not solve all the issues with browsing websites on mobile devices. The other part of the solution is responsive web design.
Viewport metadata is important for the user experience and it’s also important for search engine optimization. This is because many search engines now include websites’ mobile experiences as a part of their ranking algorithms.
The Charset
<meta charset="UTF-8">The charset is a special field that lets you specify the character encoding used for the page so that the browser can display it properly. The most frequently used is utf-8, and you would add it inside your HTML header.
The Language Metadata
<meta name="language" content="english">This specifies the language of the web page.
The Google
<meta name="google"/>
This tells Google not to show the sitelinks search box for your page when showing search results.
The Googlebot Metadata
<meta name="googlebot" content=”notranslate” />This tells Google you don’t want to provide an automatic translation for your page if the user uses a different language.
The Revised Metadata
<meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm" />This pecifies the last modified date and time on which you have made certain changes.
The Rating Metadata
<meta name="rating" content="safe for kids">This specifies the expected audience for your page.
The Copyright Metadata
<meta name="copyright" content="Copyright 2022">This specifies a Copyright.
<meta http-equiv="…"/> tags
The Content-type
<meta http-equiv="content-type" content="text/html">This specifies the format of the document returned by the server.
The Default-style
<meta http-equiv="default-style"/>This specifies the format of the styling document.
The Refresh
<meta http-equiv="refresh" content="30">This field stands for HTTP equivalent, and it’s used to simulate HTTP response headers. This is rare to see, and it’s recommended to use HTTP headers over HTML HTTP-Equiv meta tags. For example, the example tag above would instruct the browser to refresh the page every 30 minutes.
The Content-language
<meta http-equiv=”Content-language”/>This specifies the language of the page
The Cache-Control
<meta http-equiv="Cache-Control" content="no-cache">This instructs the browser how to cache your page.
Responsive design/mobile meta tags
The Format-detection
<meta name="format-detection" content="telephone=yes"/>This indicates that telephone numbers should appear as hypertext links that can be clicked to make a phone call.
The HandheldFriendly
<meta name="HandheldFriendly" content="true"/>This specifies that the page can be properly visualized on mobile devices.
The Viewport Metadata
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>This specifies the area of the window in which web content can be seen.