HTML Meta Tags Cheat Sheet
Meta tags are essential for conveying information to search engines and improving the
categorization of web pages. Here’s a concise guide to the structure and types of meta tags you can
use in your web applications.
Structure of a Meta Tag
• Name: Identifies the property. Example: <meta name="author" content="name">
• Content: Specifies the property's value. Example: <meta name="language"
content="english">
• Charset: Defines the character encoding for the page. Commonly used is UTF-8: <meta
charset="UTF-8">
• HTTP-equiv: Simulates HTTP response headers. Example: <meta http-equiv="refresh"
content="30"> (refreshes the page every 30 seconds).
Basic Meta Tags for SEO
• <meta name="description" content="Your page description here"/>: Provides a brief
description of the web page.
• <meta name="title" content="Your Page Title"/>: Specifies the title of the web page.
• <meta name="author" content="name">: States the author of the page.
• <meta name="language" content="english">: Specifies the language of the web page.
• <meta name="robots" content="index,follow"/>: Instructs search engines on how to crawl
or index the page.
• <meta name="google" content="nositelinkssearchbox"/>: Prevents Google from showing
the sitelinks search box for your page.
• <meta name="googlebot" content="notranslate"/>: Indicates that you do not want
automatic translation for your page.
• <meta name="revised" content="Date and Time"/>: Specifies the last modified date and
time of the page.
• <meta name="rating" content="safe for kids"/>: Indicates the expected audience for your
page.
• <meta name="copyright" content="Copyright 2022"/>: Specifies copyright information.
HTTP-equiv Meta Tags
• <meta http-equiv="content-type" content="text/html">: Specifies the document format
returned by the server.
• <meta http-equiv="default-style" content="style.css">: Specifies the default stylesheet.
• <meta http-equiv="refresh" content="30">: Refreshes the page every 30 seconds.
• <meta http-equiv="Content-Language" content="en">: Specifies the language of the page.
• <meta http-equiv="Cache-Control" content="no-cache">: Instructs the browser on caching
behavior.
Responsive Design / Mobile Meta Tags
• <meta name="format-detection" content="telephone=yes"/>: Makes telephone numbers
clickable links.
• <meta name="HandheldFriendly" content="true"/>: Indicates that the page is optimized for
mobile devices.
• <meta name="viewport" content="width=device-width, initial-scale=1.0"/>: Sets the
viewport to control layout on mobile browsers.
Conclusion
Keeping this cheat sheet handy will help you effectively implement meta tags in your web
applications, enhancing both SEO and user experience.