Metadata Cheat Sheet

HTML <meta> tags are essential for conveying information to search engines and improving the way your page is indexed and displayed. This cheat sheet will help you understand the basic structure of meta tags and how to use them effectively in your web applications.

Structure of a Meta Tag

A typical <meta> tag structure consists of the following:

• Name: Specifies the name of the property (e.g., author, description).
• Content: Specifies the value of the property (e.g., John Doe, English).
• Charset: Specifies the character encoding for the document (e.g., UTF-8).
• HTTP-equiv: Simulates HTTP response headers and is typically used less frequently.

Example:

<meta name="author" content="John Doe">

Basic Meta Tags (For SEO)

<meta name="description"/>

Provides a brief description of the web page, important for search engine results.

<meta name="description" content="This is a brief description of the page's content.">

<meta name="title"/>

Specifies the title of the web page, often displayed in the browser's title bar or tab.

<meta name="title" content="My Web Page Title">

<meta name="author" content="name">

Specifies the author of the web page.

<meta name="author" content="John Doe">

<meta name="language" content="english">

Specifies the language of the web page for search engines and browsers.

<meta name="language" content="english">

<meta name="robots" content="index,follow"/>

Tells search engines how to crawl or index a certain page.

<meta name="robots" content="index,follow">

<meta name="google"/>

Tells Google not to show the sitelinks search box for your page when showing search results.

<meta name="google" content="nositelinkssearchbox">

<meta name="googlebot" content="notranslate"/>

Instructs Google not to provide an automatic translation for the page if the user uses a different language.

<meta name="googlebot" content="notranslate">

<meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm"/>

Specifies the last modified date and time of the page.

<meta name="revised" content="Sunday, July 18th, 2020, 5:15 pm">

<meta name="rating" content="safe for kids"/>

Specifies the expected audience for your page.

<meta name="rating" content="safe for kids">

<meta name="copyright" content="Copyright 2022"/>

Specifies copyright information for the page.

<meta name="copyright" content="Copyright 2022">

<meta http-equiv="..."/>

<meta http-equiv="content-type" content="text/html">

Specifies the format of the document returned by the server.

<meta http-equiv="content-type" content="text/html">

<meta http-equiv="default-style"/>

Specifies the format of the styling document.

<meta http-equiv="default-style" content="default.css">

<meta http-equiv="refresh"/>

Specifies the duration of the page before it’s considered stale (refreshes the page).

<meta http-equiv="refresh" content="30">

<meta http-equiv="Content-language"/>

Specifies the language of the page.

<meta http-equiv="Content-language" content="en-US">

<meta http-equiv="Cache-Control" content="no-cache">

Instructs the browser on how to cache your page.

<meta http-equiv="Cache-Control" content="no-cache">

Responsive Design / Mobile Meta Tags

<meta name="format-detection" content="telephone=yes"/>

Indicates that telephone numbers should appear as hypertext links that can be clicked to make a phone call.

<meta name="format-detection" content="telephone=yes">

<meta name="HandheldFriendly" content="true"/>

Specifies that the page can be properly visualized on mobile devices.

<meta name="HandheldFriendly" content="true">

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

Specifies the area of the window in which web content can be seen, essential for responsive design.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Conclusion

Meta tags are a fundamental part of web development that help with SEO, mobile optimization, and controlling how your pages are displayed across different devices and browsers. Keep this cheat sheet handy while building your web applications to ensure you’re using the most relevant and effective meta tags.