Key Takeaways
- Meta tags provide vital information about a web page for search engines, browsers, and web services.
- Essential types include meta description, open graph, viewport, and HTTP-equiv tags.
- Custom meta tags offer flexibility but require careful documentation and planning.
Alongside your page’s title, and the scripts and style sheets it uses, an HTML head section can include meta tags. These are vital for SEO, accessibility, and overall website performance.
Learn how to use meta tags and find out about the information they can provide.
Meta tags are elements that provide additional information about a web page. Browsers don’t display this metadata directly, but any tool can use it for various purposes. This includes search engines, browsers, and other web services.
The data you supply in meta tags helps improve search engine rankings, contributes to website responsiveness and accessibility, and improves the display of your pages on social media.
Meta tags are self-closing tags; there is no </meta> because they do not enclose any content. They contain all their data in attributes. You can add meta tags to the head section of your HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0"> <title>Document</title>
</head>
<body>
</body>
</html>
This example HTML boilerplate contains two meta tags in the head section. They supply information about the character set (UTF-8) and viewport, respectively.
Most meta tags use a combination of the following attributes to contain their data.
- name and content: The name attribute is like a label, while the content attribute stores the data associated with that label. This provides a flexible, extensible system to store whatever metadata you require.
- property: This attribute is sometimes used as an alternative to name and serves much the same purpose.
- http-equiv: Standing for “HTTP equivalent”, this attribute defines an HTTP header for the value specified in the content attribute.
- scheme: This attribute, used with name, defines the data type in the content attribute.
You’ll find the following meta tags are commonly supported by various web services and browsers.
Meta Description Tag
This snippet of up to 155 characters summarizes a page’s content. Search engines often display it under the page title and URL. It is essential to provide a concise and accurate description to encourage users to click the link and visit your page.
<meta name="description" content="A brief description of your page">
Open Graph Meta Tags
Facebook, and other social media platforms, make significant use of these tags. They use the information in these tags to improve the presentation of links to your page when users share it. Open Graph meta tags include attributes like og:title, og:description, and og:image:
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A brief description of your page">
<meta property="og:image" content="URL of a related image">
SEO Meta Tags
These tags provide information for search engines and can help improve your page’s rank. They’re also included on the list of essential SEO best practices. They include attributes such as robots, author, and more. While the importance of these tags has reduced over time, it’s still essential to include them in your HTML document.
<meta name="robots" content="index, follow">
<meta name="author" content="Your Name">
Viewport Meta Tag
The viewport meta tag is an essential element in responsive web design. It tells the browser to adjust the webpage layout according to the device’s width, ensuring the content displays correctly and is readable on mobile devices.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
HTTP-Equiv Meta Tags
These meta tags are essential for controlling specific aspects of how browsers and servers process web pages. They include attributes like refresh and X-UA-Compatible. While their direct impact on SEO may vary, they play a crucial role in influencing page behavior and compatibility.
<meta http-equiv="refresh" content="5;url=https://example.com">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
You won’t be using them all at once in your projects, but it’s still important to have a good understanding of the different meta tags available. Also, using meta tags provides benefits in improving the organization of HTML documents.
Meta tags are flexible because:
- You are free to use a name of your choice to store whatever data you want.
- Browsers will not display their content, although it will always be viewable in the page source.
Here’s an example of a custom meta tag:
<meta name="target-audience" content="developers">
In this example, the custom tag specifies the target audience of the content, indicating that it targets developers.
Custom meta tags offer a way to extend the standard set of tags that are widely recognized. However, it’s important to carefully document the custom tags you use and have a good understanding of how you will use them. Other services won’t use or recognize them by default, so you’ll probably be writing your own code at some point to process them.
