Meta tags are snippets of text that provide metadata about your website to search engines and other web services. They are placed in the <head> section of your HTML document. Here are the most common meta tags and their purposes:
Basic Meta Tags
<title>
- Defines the title of the web page, displayed on browser tabs and in search engine results.
<title>Your Page Title</title><meta charset>
- Specifies the character encoding for the document, commonly set to UTF-8.
<meta charset="UTF-8"><meta name="description">
- Provides a brief description of the page content, which is often used in search engine results.
<meta name="description" content="A brief description of your page content"><meta name="keywords">
- Lists keywords relevant to the page, though less commonly used for SEO nowadays.
<meta name="keywords" content="keyword1, keyword2, keyword3"><meta name="author">
- Specifies the author of the webpage.
<meta name="author" content="Author Name"><meta name="viewport">
- Controls the layout on mobile browsers.
<meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible">
- Specifies compatibility with Internet Explorer.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
SEO and Social Media Meta Tags
Open Graph (OG) Meta Tags (For Facebook and other platforms)
- Help control how your page appears when shared on social media.
<meta property="og:title" content="Your Page Title"> <meta property="og:url" content="https://www.example.com/"> <meta property="og:type" content="website"> <meta property="og:image" content="URL of the image to display"> <meta property="og:description" content="A description of your page content">Twitter Card Meta Tags
- Similar to Open Graph but specifically for Twitter.
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Your Page Title"> <meta name="twitter:image" content="URL of the image to display"> <meta name="twitter:description" content="A description of your page content"><meta name="robots">
- Instructs search engine crawlers on how to index your page.
<meta name="robots" content="index, follow">
Meta Tags for Performance and Accessibility
<meta http-equiv="refresh">
- Refreshes or redirects a webpage after a specific time.
<meta http-equiv="refresh" content="30"><meta name="theme-color">
- Specifies the color of the browser's address bar in mobile browsers.
<meta name="theme-color" content="#4285f4">
Security Meta Tags
<meta http-equiv="Content-Security-Policy">
- Implements security policies to prevent cross-site scripting (XSS), clickjacking, etc.
<meta http-equiv="Content-Security-Policy" content="default-src 'self'"><meta http-equiv="Permissions-Policy">
- Manages the permissions for browser features (like camera, microphone, etc.)
<meta http-equiv="Permissions-Policy" content="camera=(), microphone=()"><meta name="referrer">
- Controls how much referrer information is passed along when navigating from your site to another.
<meta name="referrer" content="no-referrer">
Miscellaneous Meta Tags
<meta name="generator">
- Indicates the software used to generate the webpage.
<meta name="generator" content="WordPress 5.8"><meta name="application-name">
- Defines the name of the web application.
<meta name="application-name" content="My Web App"><meta http-equiv="Content-Language">
- Sets the language of the content.
<meta http-equiv="Content-Language" content="en">
Meta Tags for Web Apps
<meta name="apple-mobile-web-app-capable">
- Enables a web app to run in full-screen mode on iOS.
<meta name="apple-mobile-web-app-capable" content="yes"><meta name="msapplication-TileColor">
- Specifies the tile color for Windows Start Screen.
<meta name="msapplication-TileColor" content="#da532c">