HTML <meta> Tag
The <meta> tag is a fundamental HTML element used to define metadata about an HTML document. Metadata is "data about data," providing information about the webpage itself rather than its visible content. These tags are crucial for SEO, controlling how browsers display content, defining character sets, setting viewport configuration and enhancing social sharing. The <meta> tag is always placed inside the <head> section of your HTML document.
Syntax
<meta name="attribute_name" content="attribute_value">
<meta http-equiv="header_name" content="header_value">
<meta charset="character_set">
Attributes
| Attribute | Value | Description |
|---|---|---|
name |
author, description, keywords, robots, viewport, etc. |
Specifies the name of the metadata. Used for information like site description, author, etc. |
content |
Any text value | Specifies the value associated with the name or http-equiv attribute. |
http-equiv |
content-type, default-style, refresh, X-UA-Compatible |
Provides an HTTP header for the information/content. Used to control browser behavior. |
charset |
UTF-8, ISO-8859-1, etc. |
Specifies the character encoding for the HTML document, most commonly UTF-8. |
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A sample webpage demonstrating HTML meta tags.">
<meta name="keywords" content="HTML, meta tags, SEO, web development">
<title>HTML Meta Tag Example</title>
</head>
<body>
<!-- Your page content here -->
</body>
</html>
More Examples
Specifying the Character Set
The charset attribute is used to define the character encoding for your document. UTF-8 is the most commonly used and recommended character set, capable of handling a wide range of characters across different languages.
<meta charset="UTF-8">
Controlling the Viewport
The viewport meta tag is crucial for responsive web design, ensuring your website renders correctly across various devices.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width: Sets the width of the viewport to the device's width.initial-scale=1.0: Sets the initial zoom level when the page is first loaded.
Adding a Description for Search Engines
The description meta tag provides a short summary of the page's content, which search engines often display in search results. It should be concise and compelling.
<meta name="description" content="This is an example website showcasing the usage of HTML meta tags for SEO and website optimization.">
Defining Keywords
The keywords meta tag is used to define keywords or phrases that are relevant to the webpage. However, this tag is less important for SEO than it used to be, and modern search engines rely more on content analysis.
<meta name="keywords" content="HTML, meta tags, web development, SEO, metadata">
Setting the Author
The author meta tag can be used to specify the author of the document.
<meta name="author" content="CodeLucky.com">
Controlling Search Engine Crawlers with Robots
The robots meta tag dictates how search engine crawlers should behave when they visit your page.
<meta name="robots" content="index, follow">
Common content values include:
index: Allow search engines to index the page.noindex: Prevent search engines from indexing the page.follow: Allow search engines to follow links on the page.nofollow: Prevent search engines from following links on the page.
Redirecting Users
The http-equiv="refresh" tag redirects users after a specific number of seconds.
<meta http-equiv="refresh" content="5;url=https://www.example.com">
This will redirect the user to https://www.example.com after 5 seconds.
Specifying Content Type
The http-equiv="content-type" meta tag can be used to declare the MIME type of a document and character set. However, It's generally recommended to use the charset attribute instead.
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
Social Media Meta Tags (Open Graph and Twitter Cards)
Open Graph meta tags (e.g., og:title, og:description, og:image) and Twitter Cards meta tags (e.g., twitter:title, twitter:description, twitter:image) are crucial for controlling how your content looks when shared on social media platforms.
<meta property="og:title" content="My Page Title">
<meta property="og:description" content="A description for social media sharing.">
<meta property="og:image" content="https://www.example.com/image.jpg">
<meta property="og:url" content="https://www.example.com/page">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="My Page Title">
<meta name="twitter:description" content="A description for social media sharing.">
<meta name="twitter:image" content="https://www.example.com/image.jpg">
Browser Support
The <meta> tag is universally supported by all modern browsers including:
- Chrome
- Firefox
- Safari
- Edge
- Opera
Notes and Tips
- Always include a
charsetmeta tag,UTF-8is highly recommended. - Use the
viewportmeta tag for responsive design. - Provide unique and relevant descriptions using the
descriptionmeta tag, to improve search rankings. - While keyword meta tag is less important, consider adding if relevant to your content.
- Leverage social media meta tags for better sharing on social media platforms.
- The meta tag is self-closing so don't add an end tag to it.
- Ensure to place all
<meta>tags inside the<head>element of your HTML document.
