Meta tags in HTML provide metadata about a web page. Metadata is information about the page rather than visible page content. Meta tags can describe character encoding, viewport behavior, page description, search engine indexing, social sharing previews, author information, theme color, and other browser or crawler instructions.
Most meta tags are written inside the <head> section of an HTML document. They do not appear as normal content on the page, but they can strongly affect how the page is displayed, indexed, previewed, and understood by browsers, search engines, and social platforms.
Basic Syntax of Meta Tags in HTML
A meta tag is usually a void element, which means it does not need a closing tag. The most common forms use attributes such as charset, name, content, property, and http-equiv.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn HTML meta tags with examples.">
</head>The charset meta tag declares the document character encoding. The viewport meta tag controls responsive layout behavior on mobile devices. The description meta tag gives a short summary of the page for search engines and previews.
Common Meta Tags
| Meta Tag | Purpose |
|---|---|
charset | Defines character encoding, usually UTF-8 |
viewport | Controls mobile layout and scaling |
description | Provides a page summary for search engines |
robots | Gives indexing and crawling instructions |
author | Names the page or content author |
theme-color | Sets browser UI color in supported browsers |
og:title | Open Graph title for social sharing |
twitter:card | Twitter/X card preview format |
Charset Meta Tag
The charset meta tag should appear early in the head section. It tells the browser how to interpret characters in the document. Most modern websites use UTF-8 because it supports a wide range of characters, symbols, and languages.
<meta charset="UTF-8">Without the correct encoding, special characters may display incorrectly. UTF-8 is the normal choice for modern web pages, and it should be included in almost every HTML document.
Viewport Meta Tag
The viewport meta tag is essential for responsive web design. Without it, mobile browsers may render the page using a desktop-width layout and then scale it down, making text and layouts awkward.
<meta name="viewport" content="width=device-width, initial-scale=1.0">The value width=device-width tells the browser to match the layout viewport to the device width. The value initial-scale=1.0 sets the initial zoom level. This is one of the most important meta tags for mobile-friendly pages.
Meta Description Tag
The meta description gives a short summary of the page. Search engines may use it as the search result snippet, although they can rewrite it depending on the search query. A good description should be clear, accurate, and specific to the page.
<meta
name="description"
content="Learn meta tags in HTML, including charset, viewport, description, robots, Open Graph, and SEO examples.">Avoid duplicate descriptions across many pages. Every important page should have its own description. The description should match the real content of the page instead of stuffing keywords unnaturally.
Robots Meta Tag
The robots meta tag gives instructions to search engine crawlers. It can ask crawlers to index or not index a page, follow or not follow links, and control snippet behavior. Common values include index, noindex, follow, and nofollow.
<meta name="robots" content="index, follow">
<meta name="robots" content="noindex, nofollow">Use robots rules carefully. Accidentally adding noindex to an important page can remove it from search results. For WordPress sites, SEO plugins often manage these values through page settings.
Open Graph Meta Tags
Open Graph meta tags control how a page appears when shared on platforms such as Facebook, LinkedIn, WhatsApp, and other services that read Open Graph data. They commonly define title, description, image, URL, and content type.
<meta property="og:title" content="Meta Tags in HTML">
<meta property="og:description" content="Learn important HTML meta tags with examples.">
<meta property="og:image" content="https://example.com/meta-tags.png">
<meta property="og:url" content="https://example.com/meta-tags-in-html/">
<meta property="og:type" content="article">The Open Graph image is especially important because it controls the preview thumbnail in many sharing contexts. A missing or poor image can make the shared link look unfinished.
Twitter Card Meta Tags
Twitter Card tags define how a page appears when shared on X/Twitter and services that support similar card metadata. The twitter:card value controls the preview style.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Meta Tags in HTML">
<meta name="twitter:description" content="Learn meta tags in HTML with examples.">
<meta name="twitter:image" content="https://example.com/meta-tags.png">Theme Color Meta Tag
The theme color meta tag allows supported browsers to style parts of the browser UI using a chosen color. It is often used on mobile browsers and progressive web apps to match the website brand.
<meta name="theme-color" content="#111160">This does not change the page background. It gives the browser a suggested UI color. Support can vary by browser and platform, so treat it as an enhancement.
HTTP-Equiv Meta Tags
Some meta tags use http-equiv to simulate certain HTTP header-like instructions. One example is refresh, which can redirect or reload a page after a delay. This should be used carefully because unexpected refreshes can be bad for usability and accessibility.
<meta http-equiv="refresh" content="5; url=https://example.com/">This redirects the user after five seconds. Server-side redirects are usually better for real redirects because they are faster, clearer, and more reliable for SEO and accessibility.
Meta Tags and SEO
Meta tags are important for SEO, but they are not magic ranking buttons. A good title, good content, fast page, internal links, proper headings, helpful images, and search intent matter more than simply adding many meta tags. The meta description helps presentation, while robots controls indexing behavior.
The old meta keywords tag is not useful for modern Google SEO and should not be treated as a ranking strategy. Focus on useful descriptions, correct indexing settings, Open Graph previews, and technically clean pages.
Title Tag vs Meta Tags
The page title is written with the <title> element, not a meta tag. It is still part of the head section and is very important for browser tabs, bookmarks, and search results. Many beginners group it mentally with meta tags because it is also page metadata, but technically it is a separate HTML element.
<title>Meta Tags in HTML: Complete Guide</title>A strong title should be specific to the page. It should not be the same on every page of a website. In WordPress and SEO plugins, the SEO title field usually controls the title shown to search engines, while the HTML title is generated automatically from that setting.
Canonical URL and Meta-Like Head Data
The canonical URL is also placed in the head, but it uses a link tag instead of a meta tag. It tells search engines which URL should be treated as the main version when similar or duplicate pages exist. This is useful for pages with tracking parameters, pagination, filters, or duplicate paths.
<link rel="canonical" href="https://example.com/meta-tags-in-html/">Canonical tags and meta robots tags are often managed together by SEO plugins. The important point is that head metadata works as a system. Title, description, robots, canonical, Open Graph, and structured data all help machines understand how the page should be displayed and indexed.
Meta Tags in WordPress
In WordPress, many meta tags are generated by the theme, WordPress core, and SEO plugins. A plugin such as Rank Math can output SEO title, meta description, robots directives, Open Graph tags, Twitter card tags, and schema-related metadata. That means you usually do not manually edit the HTML head for every post.
Even when a plugin handles output, you still need to write good metadata. The title and description fields should match the post topic. Social image settings should use the correct featured image. Indexing settings should be checked before publishing important pages.
Meta Tags for Social Sharing
Social sharing metadata should be checked whenever a post has a featured image or important preview text. A strong title, description, and image make the shared link easier to understand before someone clicks it. If these tags are missing, platforms may guess from page content and choose the wrong image or text.
For blogs, tutorials, and product pages, social preview metadata should be treated as part of publishing quality. The preview should match the page topic, not show a random logo, sidebar image, or unrelated graphic.
Testing the final shared preview is a smart habit before promoting an important page online to readers anywhere.
It prevents avoidable preview mistakes.
Common Mistakes with Meta Tags
- Forgetting the viewport meta tag and breaking mobile layout.
- Using duplicate meta descriptions on many pages.
- Accidentally adding noindex to important pages.
- Stuffing keywords in the description unnaturally.
- Using broken Open Graph image URLs.
- Adding too many unnecessary meta tags without purpose.
Meta tags are small, but they shape how browsers, search engines, and social platforms understand a page. Use charset and viewport as basics, write a useful description, control indexing carefully, and add social preview tags when sharing appearance matters.
Where are meta tags written in HTML?
Meta tags are written inside the head section of the HTML document.
Is meta keywords tag useful for SEO?
The meta keywords tag is not useful for modern Google SEO. Use strong content, titles, descriptions, and indexing settings instead.
Continue learning HTML in order
Follow the topic sequence with the previous and next lesson.