Quick Links
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.
What Are Meta Tags?
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 helpsimprove search engine rankings, contributes to website responsiveness and accessibility, andimproves the display of your pages on social media.
Meta tags are self-closing tags; there is no 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:
This example HTML boilerplate contains two meta tags in the head section. They supply information about the character set (UTF-8) and viewport, respectively.
Essential Meta Tags
Most meta tags use a combination of the following attributes to contain their data.
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.
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 likeog:title,og:description, andog: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 ofessential SEO best practices. They include attributes such asrobots,author, and more. While the importance of these tags has reduced over time, it’s still essential to include them in your HTML document.
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.
HTTP-Equiv Meta Tags
These meta tags are essential for controlling specific aspects of how browsers and servers process web pages. They include attributes likerefreshandX-UA-Compatible. While their direct impact on SEO may vary, they play a crucial role in influencing page behavior and compatibility.
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 providesbenefits in improving the organization of HTML documents.
Custom Meta Tags
Meta tags are flexible because:
Here’s an example of a custom meta tag:
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.
