HTML Meta Tag
Working with Meta Tag
In this lesson, we will learn about the mata tags and how to use them in HTML document.
What are Meta Tags in HTML
Meta tags are snippets of HTML code that provide metadata about a web page. They are placed within the <head> section of an HTML document and are not visible to website visitors. Meta tags contain information such as the page's title, description, keywords, author, and other relevant details.
Importance of Meta Tags
Meta tags are essential for several reasons. Firstly, they help search engines understand a web page's content, improving its chances of being indexed correctly.
Secondly, meta tags provide concise information that appears in search engine result pages (SERPs), influencing click-through rates.
Additionally, meta tags allow webmasters to control how their web pages are displayed when shared on social media platforms.
Meta Tag Structure
A typical meta tag consists of an opening <meta> tag followed by attributes and their values. The most common attributes used in meta tags are name and content. The name attribute specifies the type of metadata, while the content attribute contains the actual information.
Example
<meta name="..." content="...">Note: The meta does not have any closing tag. It is a self-closing tag.
Examples of Meta Tags
There are several types of meta tags used in HTML. Below is the list of important meta tags used in a webpage.
- <meta charset="...">
- <meta name="description" content="...">
- <meta name="keywords" content="...">
- <meta name="author" content="...">
- <meta name="viewport" content="...">
- <meta name="property" content="...">
- <meta name="robots" content="noindex">
Let's discuss each of the above meta tags in detail with examples.
<meta charset="...">
In HTML, the <meta charset="..."> tag is used to specify the character encoding for the web page. It It is placed within the <head> section of an HTML document and informs the web browser about the character set that should be used to interpret and display the text content of the webpage.
The charset attribute is used to specify the character encoding scheme. It can have values such as "UTF-8" (which is widely used and supports a wide range of characters and languages), "ISO-8859-1" (also known as Latin-1), "UTF-16" (which uses 16-bit characters), and others.
By specifying the correct character encoding, the web browser can properly interpret and display special characters, accented letters, symbols, and text in various languages. It ensures that the text content of the webpage is displayed correctly to the users.
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Meta Tags Example</title>
</head>
<body>
<!-- Your webpage content goes here -->
</body>
</html><meta name="description" content="...">
In HTML, the <meta name="description" content="..."> tag is used to provide a brief description of the web page's content. It is placed within the <head> section of an HTML document.
The name attribute is set to "description" to indicate that the content of the <meta> tag is a description of the page. The content attribute is used to specify the actual description of the page.
The description is typically a concise summary or overview of the page's content. It is often used by search engines to display a snippet or preview of the page in search results. Users can read the description and get an idea of what the page is about before clicking on the search result.
The description should be relevant, informative, and accurately represent the content of the page. It is recommended to keep the description length within 150-160 characters to ensure it is displayed properly in search results.
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Meta Tags Example</title>
<meta name="description" content="Your webpage description goes here.">
</head>
<body>
<!-- Your webpage content goes here -->
</body>
</html><meta name="keywords" content="...">
In HTML, the <meta name="keywords" content="..."> tag is used to specify the keywords or phrases that are relevant to the content of a web page. It is placed within the <head> section of an HTML document.
The name attribute is set to "keywords" to indicate that the content of the <meta> tag represents keywords. The content attribute is used to specify the actual keywords or phrases, separated by commas.
Keywords are words or terms that represent the main topics or themes of the web page. They help search engines understand the content and context of the page.
In the past, search engines used to rely heavily on the keywords meta tag to determine the relevance of a page to a user's search query. However, modern search engines have evolved and now emphasize more on other factors like content quality and relevance.
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Meta Tags Example</title>
<meta name="description" content="Your webpage description goes here.">
<meta name="keywords" content="Your webpage keywords goes here separated by commas like learn html, html tutorial">
</head>
<body>
<!-- Your webpage content goes here -->
</body>
</html><meta name="author" content="...">
In HTML, the <meta name="author" content="..."> tag is used to specify the author or creator of a web page. It is placed within the <head> section of an HTML document.
The name attribute is set to "author" to indicate that the content of the <meta> tag represents the author's information. The content attribute is used to specify the actual name or identification of the author.
This author meta tag is optional and is primarily used to provide attribution or credit to the person or organization responsible for creating the web page. It can be the name of an individual, a group, or a company.
The author meta tag can be useful in cases where the website has multiple contributors or when it's important to give proper recognition to the creator of the content. Additionally, it can assist in providing contact or reference information for users who may have questions or feedback regarding the page's content.
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Meta Tags Example</title>
<meta name="description" content="Your webpage description goes here.">
<meta name="keywords" content="Your webpage keywords goes here separated by commas like learn html, html tutorial">
<meta name="author" content="Information about the author goes here.">
</head>
<body>
<!-- Your webpage content goes here -->
</body>
</html><meta name="viewport" content="...">
In HTML, the <meta name="viewport" content="..."> tag is used to control and configure the viewport settings for a web page. It is placed within the <head> section of an HTML document.
The name attribute is set to "viewport" to indicate that the content of the <meta> tag represents the viewport settings. The content attribute is used to specify the actual configuration for the viewport.
The viewport refers to the visible area or the portion of the web page that is displayed within the browser window. The viewport settings help to determine how the web page is rendered and displayed on different devices, especially on mobile devices with varying screen sizes and resolutions.
The content attribute of the viewport meta tag can include various directives to control the viewport behavior, such as:
- width=device-width
Sets the width of the viewport to match the device's screen width. - initial-scale=1.0
Sets the initial zoom level to 100%. Default value is 1.0. - user-scalable=yes/no
Specifies whether the user can zoom in or out of the web page. - minimum-scale=0.1 and maximum-scale=10.0
Sets the minimum and maximum zoom levels allowed.
Note: Multiple viewport directives are written separated by commas.
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Meta Tags Example</title>
<meta name="description" content="Your webpage description goes here.">
<meta name="keywords" content="Your webpage keywords goes here separated by commas like learn html, html tutorial">
<meta name="author" content="Information about the author goes here.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>
<body>
<!-- Your webpage content goes here -->
</body>
</html><meta name="property" content="...">
In HTML, the <meta name="property" content="..."> tag is used to specify custom metadata properties for a web page. It is typically used in conjunction with Open Graph protocol (OGP) or other metadata frameworks.
The name attribute is set to "property" to indicate that the content of the <meta> tag represents a property or attribute. The content attribute is used to specify the actual value or content of the property.
Custom metadata properties can provide additional information about the web page, such as its title, description, image, URL, or other relevant data. These properties are often used by social media platforms and other services to generate rich previews when the page is shared or linked.
For example, the Open Graph protocol allows developers to define custom metadata properties using the property attribute. This can include properties like og:title, og:description, og:image, and more, which describe the title, description, and image associated with the web page.
By utilizing custom metadata properties, web developers can provide more context and enhance the presentation of their web pages when shared on various platforms and services. It allows for better control over how the page appears in social media posts, search results, and other related contexts.
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Meta Tags Example</title>
<meta name="description" content="Your webpage description goes here.">
<meta name="keywords" content="Your webpage keywords goes here separated by commas like learn html, html tutorial">
<meta name="author" content="Information about the author goes here.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<!-- how the page will look when shared on facebook -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="your site name goes here">
<meta property="og:url" content="your webpage URL goes here">
<meta property="og:title" content="your webpage title goes here">
<meta property="og:description" content="your webpage description goes here">
<meta property="og:image" content="an image URL about your webpage goes here">
<!-- how the page will look when shared on whatsapp -->
<meta property="og:image" content="an image URL about your webpage goes here">
<meta property="og:image:width" content="image width like 400">
<meta property="og:image:height" content="image height like 400">
<!-- how the page will look when shared on twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="your webpage URL goes here">
<meta property="twitter:title" content="your webpage title goes here">
<meta property="twitter:description" content="your webpage description goes here">
<meta property="twitter:image" content="an image URL about your webpage goes here">
</head>
<body>
<!-- Your webpage content goes here -->
</body>
</html><meta name="robots" content="noindex">
In HTML, the <meta name="robots" content="noindex"> tag is used to instruct search engine robots or crawlers not to index the web page. It is placed within the <head> section of an HTML document. This can be helpful for excluding certain pages that may not be accessible or relevant to all users.
The name attribute is set to "robots" to indicate that the content of the <meta> tag relates to the behavior of search engine robots. The content attribute is used to specify the specific instruction, in this case, "noindex", which tells search engine robots not to include the page in their index.
When a web page is indexed, it means that it is included in the search engine's database and can appear in search results when relevant queries are performed. By using the noindex value in the content attribute, webmasters can prevent search engines from indexing and displaying the page in search results.
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Meta Tags Example</title>
<meta name="robots" content="noindex">
</head>
<body>
<!-- Your webpage content goes here -->
</body>
</html>Note: It's important to note that while search engine robots generally honor the noindex instruction, it's not a foolproof method. Some search engines may still index the page despite the directive, and other factors can influence how search engines handle the indexing instructions.
