Understand what a metatag is and how it works
 |
| Meta tag |
In web development, meta tags are brief passages of HTML code that include descriptive text about a webpage. Although they are integrated into the HTML code, they are not visible on the webpage itself. When it comes to search engine optimization (SEO) and enhancing a webpage's visibility in search engine results pages (SERPs), meta tags are essential.
The meta description tag is one of the most crucial meta tags since it offers a succinct overview of the webpage's contents. This description is frequently used by search engines to provide users with a sneak peek at the webpage in the SERPs. A well-crafted meta description can raise the probability that users will click the link and visit the website.
The meta keywords tag, which lists terms pertinent to the webpage's content, is another crucial meta tag. Although search engines used to extensively rely on this tag for SEO, they now give it less weight because they mostly examine the webpage's content to determine how relevant it is to a search query.
Additional meta tag kinds are the meta viewport tag, which manages how a webpage appears and scales across various devices, and the meta robots tag, which provides guidelines to search engines on how to index and crawl a webpage. All things considered, meta tags are an essential part of web construction that helps with SEO and user experience.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="This is a brief description of the webpage.">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<meta name="author" content="Your Name">
<title>Your Page Title</title>
</head>
<body>
<!-- Your page content here -->
</body>
</html>
The meta tags include:
1. charset: Indicates the document's character encoding.
2.http-equiv="X-UA-Compatible": Gives the browser guidance on how to display the webpage.
3. viewport: For responsive design, this sets the viewport width and initial scale.
4. description: Gives the webpage's synopsis to search engine results.
5. keywords: List keywords that are pertinent to the content of the webpage (less significant for SEO today).
6. author: identifies the webpage's author.
7. title: Modifies the webpage's title that shows up in the browser tab.