We, the people, we open a website and we read the text and see the images. Computers see our pages slightly differently. While search engines can analyze the content and deside on ranking based on keyword density and other content parameters, they also rely on metadata to understand the context of the page.
Meta tags are snippets of text that describe a page's content. They don't appear on the page itself, but only in the page's code.
Meta tags are used to provide information about the webpage to search engines and other web services. They can help improve the visibility of your website in search engine results pagesand enhance the user experience.
On top of that with meta tags we can control the appearance of those preview cards we see when we share a link through a messanger app or a some social media.
Having proper metadata set for your website is like a cherry on top of a cake, absence of metadata make ruin the impression of otherwise a perfectly made website and it can negatively affect the SEO of your website. Bummer.
How to check the metadata of your website?
There are many tools available to check the metadata of your website. One of the most popular ones is Check Yo Meta. This tool allows you to enter your website's URL and view all the meta tags present on the page. It also provides information about the title, description, keywords, and other important metadata.
On top of that you can check some crucial SEO metrics and Accessibility issues of your page.
If you enter the websiite's domain or URL in the input field and click on the "Check Yo Meta" button, you will see a detailed report of the metadata present on the page. The report includes information about the title, description, keywords, Open Graph tags, Twitter Card tags, and other important metadata.
You can see a preview of the social cards that will be displayed when the page is shared on social media platforms and if your website's URL is shared through some messaging app.
With the meta tags editor you can add or update the tags and see the results in the preview cards.
Finally you can get the metadata code snippet which is updated in real-time as you are changing any metadata in the form and add it to yur website's <head></head> section.
So let's make sure we have it all set up properly.
What are the most important metadata affecting your website SEO and visibility?
Title tag
The title tag is an HTML element that specifies the title of a webpage. It is displayed in the browser's title bar or tab and is also used by search engines as the clickable headline for search results. The title tag should be concise, descriptive, and relevant to the content of the page. It should ideally be between 50-60 characters long and include relevant keywords.
<title>Your Page Title</title>
Meta description
The meta description is a brief summary of the webpage's content. It appears below the title in search engine results and provides users with a preview of what to expect on the page. A well-written meta description can improve click-through rates (CTR) and attract more visitors to your site. It should be between 150-160 characters long and include relevant keywords.
<meta name="description" content="A brief description of your webpage's content.">
Meta keywords
The meta keywords tag is used to specify a list of keywords relevant to the webpage's content. However, most search engines no longer use this tag for ranking purposes, as it was often abused by webmasters. It's still a good practice to include it for completeness, but it may not have a significant impact on SEO.
<meta name="keywords" content="keyword1, keyword2, keyword3">
Robots meta tag
The robots meta tag is used to control how search engines index and crawl a webpage. It can be used to prevent search engines from indexing a page, following links, or archiving content. This tag is useful for controlling the visibility of certain pages on your site.
<meta name="robots" content="noindex, nofollow">
Open Graph meta tags
Open Graph meta tags are used to control how your webpage appears when shared on social media platforms like Facebook and Twitter. These tags allow you to specify the title, description, and image that will be displayed when your page is shared. This can significantly improve the appearance of your links on social media and increase engagement.
<meta property="og:title" content="Your Open Graph Title">
<meta property="og:description" content="Your Open Graph Description">
<meta property="og:image" content="URL to your image">
<meta property="og:url" content="URL of your webpage">
Twitter Card meta tags
Twitter Card meta tags are similar to Open Graph tags but specifically designed for Twitter. They allow you to control how your content appears when shared on Twitter, including the title, description, and image.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Twitter Card Title">
<meta name="twitter:description" content="Your Twitter Card Description">
<meta name="twitter:image" content="URL to your image">
Canonical tag
The canonical tag is used to indicate the preferred version of a webpage when there are multiple versions with similar content. This helps search engines understand which version to index and rank, preventing duplicate content issues.
<link rel="canonical" href="https://www.example.com/your-page-url">
Viewport meta tag
The viewport meta tag is essential for responsive web design. It controls how a webpage is displayed on different devices, ensuring that it looks good on both desktop and mobile screens, by setting the initial scale of a webpage to be calculated based on the screensize of a user device. This tag is crucial for improving user experience and SEO.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Charset meta tag
The charset meta tag specifies the character encoding for the HTML document. It ensures that the text is displayed correctly in different browsers and devices, especially for non-latin characters. The most common encoding is UTF-8.
<meta charset="UTF-8">
Author meta tag
The author meta tag is used to specify the name of the author of the webpage. While it doesn't directly impact SEO, it can provide additional context about the content and its creator.
<meta name="author" content="Your Name">
Language meta tag
The language meta tag specifies the primary language of the webpage's content. This helps search engines understand the language of the page and can improve its visibility in relevant search results.
Also, the browser's built-in language translation features will rely in this tag to understand the original language of the page and offer your visitors corect translation features if needed.
<meta http-equiv="Content-Language" content="en">
Adding the meta tags to your website
To add meta tags to your website, you can include them in the <head> section of your HTML document. Here's an example of how to structure your HTML with meta tags:
<!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 brief description of your webpage's content.">
<meta name="keywords" content="keyword1, keyword2, keyword3">
<meta name="author" content="Your Name">
<meta http-equiv="Content-Language" content="en">
<title>Your Page Title</title>
<!-- Open Graph tags -->
<meta property="og:title" content="Your Open Graph Title">
<meta property="og:description" content="Your Open Graph Description">
<meta property="og:image" content="URL to your image">
<meta property="og:url" content="URL of your webpage">
<!-- Twitter Card tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Twitter Card Title">
<meta name="twitter:description" content="Your Twitter Card Description">
<meta name="twitter:image" content="URL to your image">
<link rel="canonical" href="https://www.example.com/your-page-url">
</head>
<body>
<!-- Your webpage content goes here -->
</body>
</html>
Best practices for meta tags
- Keep it concise: Meta tags should be brief and to the point. Avoid using unnecessary words or phrases.
- Use relevant keywords: Include keywords that are relevant to the content of the page. This can help improve SEO and make it easier for users to find your site.
- Avoid keyword stuffing: Don't overuse keywords in your meta tags. This can lead to penalties from search engines and negatively impact your SEO.
- Use unique meta tags for each page: Each page on your website should have its own unique set of meta tags. This helps search engines understand the context of each page and improves SEO.
- Test your meta tags: Use tools like Google's Structured Data Testing Tool to test your meta tags and ensure they are working correctly.
- Monitor performance: Keep an eye on your website's performance in search engine results and social media shares. Adjust your meta tags as needed to improve visibility and engagement.
- Stay updated: SEO best practices and social media platforms' requirements can change over time. Stay informed about the latest trends and updates to ensure your meta tags remain effective.
- Use structured data: Consider using structured data markup (Schema.org) to provide additional context about your content. This can help search engines better understand your website and improve its visibility in search results.
- Optimize for mobile: Ensure that your meta tags are optimized for mobile devices, as more users are accessing websites on their smartphones and tablets.
Adding meta tags to your website is a simple yet effective way to improve its visibility and SEO. By including relevant title tags, meta descriptions, Open Graph tags, and other important metadata, you can enhance the user experience and increase the chances of your website ranking higher in search engine results.
Meta tags provide valuable information to search engines and social media platforms, helping them understand the context of your content.
By following best practices for meta tags, you can ensure that your website is well-optimized for search engines and provides a great user experience.
Yours truly, GK