SEO Checklist- Part 4

What is Meta Data?

Meta Data refers to the information that describes or gives context to a webpage’s content, but it is not visible on the page itself. It’s a critical SEO element, and it should be concise, descriptive, and contain relevant keywords. It is typically included in the HTML of the page and helps search engines understand the content of a webpage, which can impact SEO rankings.

How to check the meta data of any website page?

Open any webpage on your browser. Press Ctrl+U on your keyboard and another tab will open on the same browser displaying the source code of that particular page. Consider the example below:-

Types of Meta Data:

1. Meta Title (Title Tag):

Meta Title is the title that appears in search engine results and the browser tab. The meta title is displayed in the HTML source code of a webpage within the <title> tag , located inside the <head> section of the HTML. It is visible in two key places:

Search Engine Results Pages (SERPs): The meta title appears as the clickable headline for a webpage in search engine results. Example: Image 1
Browser Tab: The meta title appears in the browser tab when a user visits the page. Example: Image 2

**Image 1** | In the image the lines written in big blue letters are the meta titles.

**Image 2** | Home page title tag of www.spencers.in

Viewing Meta Title from Source:

To view the meta title in a browser, right-click on the page and select “View Page Source” (or press Ctrl+U in most browsers). In the source code, you will find the meta title inside the <title> tag.

The Image 3 (below) is the snapshot of the source code of the home page of spencers.in. I took this one as an example because it has all the meta data I am going to discuss right now. The <title> tag for the home page of this domain is:

<title>Online Grocery Shopping | Grocery Store in India – Spencers</title>

(see the last line of the code)

**Image 3** | Snapshot of the source code

It appears:

In Google SERPs as “Grocery Store in India – Kolkata – Spencers” (Consider Image 4)
In the browser tab as “Online Grocery Shopping | Grocery Store in India – Spencers” (Consider Image 2)

By following the best practices you can avoid the common mistakes in creating Title Tags for your webpages and make your site optimized for the search engines.

2. Meta Description:

The meta description tag in HTML is the 150-160 character snippet used to summarize a web page’s content. Search engines sometimes use these snippets in search results to let visitors know what a page is about before they click on it. While it doesn’t directly impact rankings, a well-crafted meta description can improve click-through rates.

Example:- Consider Image 4 the meta description tag is written as

It appears in the browser tab as shown in Image 4

A good meta description should consider the following aspects:-

Keywords: do make sure your most important keywords for the webpage show up in the meta description. Often search engines will highlight in bold where it finds the searchers query in your snippet.
Write legible, readable copy: this is essential. Keyword stuffing your meta description is bad and it doesn’t help the searcher as they’ll assume your result leads to a spammy website. Make sure your description reads like a normal, human-written sentence.
Treat the meta description as if it’s an advert for your web-page: make it as compelling and as relevant as possible. The description MUST match the content on the page, but you should also make it as appealing as possible.
Length: a meta description should be no longer than 135 – 160 characters long (although Google has recently been testing longer snippets). Any longer and search engines will chop the end off, so make sure any important keywords are nearer the front.
Do not duplicate meta descriptions: As with title tags, the meta descriptions must be written differently for every page. Google may penalize you for mass duplicating your meta descriptions.
Consider using rich snippets: by using schema markup you can add elements to the snippets to increase their appeal. For instance: star ratings, customer ratings, product information, calorie counts etc.

3. Meta Keywords (historically used but now largely irrelevant):

A list of keywords that are relevant to the page content. This tag is no longer a ranking factor for major search engines like Google.

Example: Consider Image 3 where you will find the Meta Keyword tag written as

4. Meta Robots:

Meta Robots directs search engine crawlers on how to index and follow links on the page. Common directives include:

index/noindex: Tells whether the page should be indexed.
follow/nofollow: Controls whether links on the page should pass link equity.

Example: Consider Image 3 where you will find the Meta Robots tag written as

A detailed discussion on Meta Robots had been done previously in our SEO Checklist – Part 3 – Robots blog.

5. Meta Charset:

It defines the character encoding for the webpage (e.g., UTF-8), ensuring that text displays correctly across different devices and languages. Specifically, it sets the character encoding to UTF-8, which is a widely used character encoding standard capable of representing almost all characters from every writing system in the world.

Example: Consider Image 3 where you will find the Meta Charset tag written as

What is the purpose of `<meta charset="utf-8"/>` tag?

Ensures Correct Character Display: By declaring UTF-8 as the character encoding, this tag ensures that any characters used in the document (such as accented characters, symbols, or non-Latin scripts like Chinese, Arabic, etc.) are displayed correctly.
Prevents Encoding Issues: Without setting a character encoding, browsers might attempt to guess the encoding of the page, which can lead to incorrect rendering of characters (e.g., seeing garbled text or question marks instead of characters).
Improves Page Load Performance: Including this declaration early in the HTML document (preferably in the <head> section) ensures that the browser doesn’t need to guess the encoding after it starts rendering the page. This can improve rendering speed.

Where to Place `<meta charset="utf-8"/>` tag?

The <meta charset="utf-8"/> tag should be placed as the first element inside the <head> section of your HTML document to ensure that the encoding is recognized as soon as the page starts to load.

6. Open Graph Tags (OG Tags):

Open Graph tags are used to control how your content appears on social media platforms (like Facebook). OG tags define the title, description, and image that will be shown when a page is shared.

Common OG tags include:

og:title: Title of the page (appears as the headline).
og:description: A brief summary of the page content.
og:image: Image to display when the page is shared.
og:url: The URL of the page.

**Image 5** | Source: sallysbakingaddiction.com

Example: Consider Image 5 above where the OG tags are written as

7. Twitter Cards:

Similar to Open Graph, but specifically for X (Twitter), Twitter Cards are meta tags used to enhance content sharing on Twitter.

They allow you to control how your content appears when shared, including the title, description, image, and media type (summary, image, video). The most common types are:

Summary Card – Basic title, description, and image.
Summary Card with Large Image – Same as above but with a larger image.
Player Card – For videos or interactive media.
App Card – For mobile apps.

8. Meta Viewport:

It defines how the page should be displayed on mobile devices (responsive design), ensuring that the page adjusts to different screen sizes.

Example: Consider Image 6 below where the Meta Viewport tag is written as

In summary, meta data provides crucial information to search engines and helps in improving visibility, ranking, and user engagement for webpages.

SB DIGITAL