HTML Meta Tag Glossary

Meta tags live inside the head section of your HTML and provide metadata about the web page. They do not appear visually but affect SEO, social sharing, responsiveness, and browser behavior.

Basic Meta Tags

charset- Defines the character encoding. UTF-8 is the most common and supports most characters.

<meta charset="UTF-8">

viewport- Ensures the page is responsive by setting the viewport to the device width.

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

title- Sets the title shown in the browser tab and search engine listings.

<title>Web Page Title<>

description- Shown in search engine results. Import for SEO. The meta description can be any length, but Google truncates the snippet to 155-160 characters.

<meta name="description" content="Summary of the webpage...">

author- Establishes the author of the webpage.

<meta name="author" content="Author name or company name">

*Make certain to always include charset, title, description, and viewport meta tags.

Robots & Indexing

robots- Controls how search engines crawl your page. Values include:

index
noindex
follow
nofollow
noarchive

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

Mobile & Device Meta Tags

theme-color- Indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface.

<meta name="theme-color" content="#f2f3f1">

A valid color value, such as hexadecimal, named color, RGB, etc. can be used

apple-mobile-web-app-capable- Allows your site to open in full-screen mode on iOS when saved to home screen.

<meta name="apple-mobile-web-app-capable" content="yes">

Open Graph Tags

Used by social platforms such as Facebook and LinkedIn to generate generate preview links of your content.

<meta property="og:title" content="Content Title">
<meta property="og:description" content="Content summary">
<meta property="og:image" content="https://linkto.com/image.png"><meta property="og:url" content="https://yourcontent.com/url">
<meta property="og:type" content="website">

Twitter (X) Card Tags

Twitter (X) are meta tags used to display text, images and media such as video and audio.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content summary">
<meta name="twitter:image" content="https://linkto.com/image.png">
<meta name="twitter:site" content="@yourHandle">

twitter:card will determine the type of card to use such as:
summary_large_image: provides a summary card with a large image.
summary: provides summary card with a small square image.
app: provides app card for mobile apps.
player: provides a player card with embedded video and audio streams.

HTTP Equiv Tags

Refresh Page

Refreshes the page every 30 seconds

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

Redirect

Redirects to another page immediately after loading page

<meta http-equiv="refresh" content="0; https://another.site">

X-AU-Compatible

Controls how Internet Explorer renders the page. It ensures that IE uses the latest rendering engine to allow your webpage function properly improving performance and design

<meta http-equiv="X-UA-Compatible" content="IE=edge">

HTML Meta Tag Glossary

Additional Docs