阿里云主机折上折
  • 微信号
Current Site：Index > Common uses of meta tags

Common uses of meta tags

Author：Chuan Chen 阅读数：49837人阅读 分类： HTML

Basic Concepts of Meta Tags

Meta tags are HTML elements used to provide metadata in a document, typically located in the head section. This metadata is not directly displayed on the page but is crucial for browsers, search engines, and other web services. Meta tags define various types of meta information through attributes like name, http-equiv, or charset, controlling multiple behavioral characteristics of a webpage.

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

Character Encoding Declaration

The charset attribute specifies the document's character encoding, one of the most fundamental uses of meta tags. UTF-8 is the most commonly used encoding, supporting multilingual character display.

<meta charset="UTF-8">

Failure to declare character encoding may result in garbled text. For Chinese webpages, UTF-8 encoding is essential to ensure proper display of Chinese characters.

Viewport Settings

The viewport meta tag is critical for responsive design, controlling how pages are displayed on mobile devices. By setting different content values, parameters like page width and initial zoom level can be adjusted.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Common configuration parameters include:

  • width=device-width: Matches the page width to the device width
  • initial-scale=1.0: Sets the initial zoom level to 1
  • minimum-scale=1.0: Sets the minimum zoom level
  • maximum-scale=1.0: Sets the maximum zoom level
  • user-scalable=no: Disables user zooming

Page Description and Keywords

description and keywords are among the most important meta tags for SEO optimization. The description appears in search engine results, while keywords were once a significant ranking factor.

<meta name="description" content="This is a detailed guide on the usage of HTML meta tags">
<meta name="keywords" content="HTML, meta tags, front-end development, web design">

Although modern search engines place less weight on keywords, a well-crafted description can still improve click-through rates. Descriptions should be concise, ideally between 150-160 characters, clearly summarizing the page content.

Search Engine Indexing Control

The robots meta tag controls how search engines index and display page content, particularly useful for pages that should not be indexed.

<meta name="robots" content="noindex, nofollow">

Common directives include:

  • index/noindex: Whether to allow indexing of the page
  • follow/nofollow: Whether to follow links on the page
  • archive/noarchive: Whether to show cached copies in search results
  • snippet/nosnippet: Whether to display descriptive snippets in search results

Social Sharing Optimization

Open Graph protocol and Twitter Card meta tags enhance social media sharing by controlling how content appears on platforms.

<!-- Open Graph -->
<meta property="og:title" content="Common Uses of Meta Tags">
<meta property="og:description" content="Detailed explanation of various uses of HTML meta tags">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/meta-tags">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Common Uses of Meta Tags">
<meta name="twitter:description" content="Detailed explanation of various uses of HTML meta tags">
<meta name="twitter:image" content="https://example.com/image.jpg">

These tags ensure that when a page is shared on platforms like Facebook or Twitter, the correct title, description, and thumbnail are displayed.

Browser Compatibility Settings

The X-UA-Compatible meta tag controls IE's document mode, ensuring proper display across different IE versions.

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

This tag instructs IE to use the latest rendering engine, avoiding issues with compatibility view. For websites needing to support older IE versions, specific document modes can be specified:

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

Auto-Refresh and Redirects

The refresh meta tag enables automatic page refresh or redirection, often used for temporary maintenance pages or URL changes.

<!-- Refresh page after 5 seconds -->
<meta http-equiv="refresh" content="5">

<!-- Redirect to new URL after 3 seconds -->
<meta http-equiv="refresh" content="3;url=https://new.example.com">

Note that excessive use of auto-redirects may negatively impact user experience and SEO, so use them judiciously.

Mobile-Specific Meta Tags

For mobile devices, specialized meta tags can optimize user experience:

<!-- Disable automatic phone number detection -->
<meta name="format-detection" content="telephone=no">

<!-- Disable automatic email detection -->
<meta name="format-detection" content="email=no">

<!-- Enable full-screen mode when added to home screen -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Set status bar style -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

These tags help address default behaviors on mobile devices, such as phone numbers being automatically converted to clickable links.

Security-Related Meta Tags

Security-focused meta tags can enhance website protection:

<!-- Prevent iframe embedding -->
<meta http-equiv="X-Frame-Options" content="deny">

<!-- Enable XSS protection -->
<meta http-equiv="X-XSS-Protection" content="1; mode=block">

<!-- Disable content type sniffing -->
<meta http-equiv="X-Content-Type-Options" content="nosniff">

<!-- CSP policy -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

These security-related tags help prevent clickjacking, XSS attacks, and other security issues. Content-Security-Policy (CSP) is particularly effective at controlling which resources a page can load.

Theme Color Settings

The theme-color meta tag sets the theme color for browser address bars or PWAs, enhancing visual consistency.

<!-- Set theme color -->
<meta name="theme-color" content="#4285f4">

<!-- Media query-supported theme colors -->
<meta name="theme-color" media="(prefers-color-scheme: light)" content="white">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black">

This tag is especially useful in mobile browsers, allowing browser UI to match the website's design aesthetic.

Application Configuration Meta Tags

For web apps or PWAs, specialized meta tags configure app behavior:

<!-- Specify app name -->
<meta name="application-name" content="My App">

<!-- Disable iOS Safari toolbar and menu bar -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Specify iOS Safari status bar style -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!-- Specify Windows tile color -->
<meta name="msapplication-TileColor" content="#ffffff">

<!-- Specify Windows tile icon -->
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

<!-- Specify Windows splash screen -->
<meta name="msapplication-config" content="/browserconfig.xml">

These tags help web apps achieve a more native-like experience across different platforms.

Other Useful Meta Tags

Some less common but practical meta tags:

<!-- Specify author information -->
<meta name="author" content="John Doe">

<!-- Specify generation tool -->
<meta name="generator" content="Visual Studio Code">

<!-- Specify copyright information -->
<meta name="copyright" content="Copyright 2023">

<!-- Specify content language -->
<meta http-equiv="Content-Language" content="zh-CN">

<!-- Specify page expiration time -->
<meta http-equiv="expires" content="Wed, 21 Dec 2023 12:00:00 GMT">

<!-- Specify page cache control -->
<meta http-equiv="cache-control" content="no-cache">

<!-- Specify page last modified time -->
<meta http-equiv="last-modified" content="Wed, 21 Dec 2022 12:00:00 GMT">

These tags provide additional metadata about the page, which may not directly affect display but can be helpful for document management and specific scenarios.

Website Ownership Verification

Meta tags can verify website ownership, commonly used with search engine webmaster tools:

<!-- Google Search Console verification -->
<meta name="google-site-verification" content="your-verification-code">

<!-- Bing Webmaster verification -->
<meta name="msvalidate.01" content="your-verification-code">

<!-- Yandex Webmaster verification -->
<meta name="yandex-verification" content="your-verification-code">

These verification tags are typically provided by search engines to prove ownership and access various webmaster tools.

Browser Behavior and Feature Control

Some meta tags control specific browser behaviors and features:

<!-- Disable automatic translation -->
<meta name="google" content="notranslate">

<!-- Specify preferred stylesheet -->
<meta http-equiv="Default-Style" content="main">

<!-- Specify page creation date -->
<meta name="created" content="2023-01-01">

<!-- Specify page revision date -->
<meta name="revised" content="2023-02-01">

<!-- Specify page rating -->
<meta http-equiv="PICS-Label" content='(PICS-1.1 "http://www.rsac.org/ratingsv01.html" l gen true comment "RSACi North America Server" by "inet@microsoft.com" for "http://www.microsoft.com" on "1997.06.30T14:21-0500" exp "1997.12.31T23:59-0000" r (n 0 s 0 v 0 l 0))'>

These tags fine-tune how browsers handle pages to meet specific requirements.

Mobile-Specific Behavior Control

For mobile device behaviors, specialized meta tags exist:

<!-- Disable iOS Safari phone number detection -->
<meta name="format-detection" content="telephone=no">

<!-- Disable iOS Safari address detection -->
<meta name="format-detection" content="address=no">

<!-- Disable iOS Safari date detection -->
<meta name="format-detection" content="date=no">

<!-- Specify iOS Web App title -->
<meta name="apple-mobile-web-app-title" content="App Title">

<!-- Specify iOS Web App launch image -->
<link rel="apple-touch-startup-image" href="/launch.png">

<!-- Specify Android Chrome theme color -->
<meta name="theme-color" content="#2196F3">

<!-- Specify Android Chrome mobile URL -->
<meta name="mobile-web-app-capable" content="yes">

These tags optimize website performance on mobile devices, improving user experience.

SEO Optimization Extensions

Beyond basic description and keywords, extended SEO-related meta tags include:

<!-- Specify canonical URL -->
<link rel="canonical" href="https://example.com/page">

<!-- Specify alternate language versions -->
<link rel="alternate" hreflang="en" href="https://example.com/en/page">

<!-- Specify search action -->
<link rel="search" type="application/opensearchdescription+xml" title="Site Search" href="/opensearch.xml">

<!-- Specify geographic location -->
<meta name="geo.region" content="US-NY">
<meta name="geo.placename" content="New York">
<meta name="geo.position" content="40.7128;-74.0060">
<meta name="ICBM" content="40.7128, -74.0060">

<!-- Specify page type -->
<meta name="page-type" content="product">

These tags help search engines better understand website content, improving search result accuracy.

Browser Compatibility Hints

Some meta tags hint at how browsers should handle pages:

<!-- Specify IE compatibility mode -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<!-- Specify IE document mode -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

<!-- Specify IE rendering engine -->
<meta http-equiv="X-UA-Compatible" content="IE=9">

<!-- Specify IE plugin invocation -->
<meta http-equiv="X-UA-Compatible" content="requiresActiveX=true">

These tags primarily target older IE browsers, as modern browsers generally don't require such settings.

Content Type and Character Set

Beyond basic charset declarations, related meta tags include:

<!-- Specify content type -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- Specify content style type -->
<meta http-equiv="Content-Style-Type" content="text/css">

<!-- Specify content script type -->
<meta http-equiv="Content-Script-Type" content="text/javascript">

These tags provide more detailed content type information, helping browsers process page content correctly.

Page Refresh and Cache Control

More detailed page refresh and cache control meta tags:

<!-- Specify page expiration time -->
<meta http-equiv="expires" content="0">
<meta http-equiv="expires" content="Wed, 21 Dec 2023 12:00:00 GMT">

<!-- Specify page caching strategy -->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="cache-control" content="public">
<meta http-equiv="cache-control" content="private">
<meta http-equiv="cache-control" content="max-age=3600">

These tags precisely control browser caching behavior, useful for scenarios requiring strict cache management.

Mobile Device-Specific Display Settings

Display settings for different mobile devices:

<!-- Specify iOS Web App status bar style -->
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

<!-- Specify Android Chrome top color -->
<meta name="theme-color" content="#4285f4">

<!-- Specify Windows Phone tile color -->
<meta name="msapplication-navbutton-color" content="#4285f4">

<!-- Specify Windows Phone start screen icon -->
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="msapplication-TileColor" content="#4285f4">

These tags optimize website display across different mobile platforms.

Social Media Platform Integration

Meta tags for various social media platforms:

<!-- Facebook Open Graph -->
<meta property="fb:app_id" content="your-app-id">
<meta property="og:site_name" content="Site Name">
<meta property="og:type" content="website">
<meta property="og:locale" content="en_US">
<meta property="og:video" content="https://example.com/video.mp4">

<!-- Twitter Card -->
<meta name="twitter:site" content="@username">
<meta name="twitter:creator" content="@creator">
<meta name="twitter:player" content="https://example.com/player">

<!-- Pinterest verification -->
<meta name="p:domain_verify" content="your-verification-code">

<!-- LinkedIn sharing optimization -->
<meta property="og:title" content="Title">
<meta property="og:description" content="Description">
<meta property="og:image" content="https://example.com/image.jpg">

These tags optimize content sharing across different social platforms.

Browser Extension and Plugin Integration

Meta tags that interact with browser extensions or plugins:

<!-- Specify RSS feed -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml">

<!-- Specify Atom feed -->
<link rel="alternate" type="application/atom+xml" title="Atom" href="/atom.xml">

<!-- Specify Web App Manifest -->
<link rel="manifest" href="/manifest.json">

<!-- Specify browser configuration -->
<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/itemID">

<!-- Specify Safari extension -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

These tags enhance integration between browsers and websites or web apps.

Content Security and Policy Control

More detailed content security policy settings:

<!-- CSP policy -->
<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  script-src 'self' https://apis.google.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' https://*.example.com;
  font-src 'self' https://fonts.googleapis.com;
  connect-src 'self' https://api.example.com;
  media-src 'none';
  object-src 'none';
  child-src 'self';
  frame-ancestors 'none';
  form-action 'self';
  upgrade-insecure-requests;
">

<!-- Specify referrer policy -->
<meta name="referrer" content="no-referrer">
<meta name="referrer" content="origin">
<meta name="referrer" content="no-referrer-when-downgrade">

<!-- Specify expected client certificate -->
<meta http-equiv="Expect-CT" content="max-age=86400, enforce, report-uri='https://example.com/report'">

These security-related meta tags significantly improve website security, preventing various attacks.

Page Transition Effects

Though not recommended, meta tags can control page transition effects:

<!-- Specify page enter effect -->
<meta http-equiv="Page-Enter" content="RevealTrans(Duration=1.0,Transition=12)">

<!-- Specify page exit effect -->
<meta http-equiv="Page-Exit" content="RevealTrans(Duration=1.0,Transition=12)">

<!-- Specify site enter effect -->
<meta http-equiv="Site-Enter" content="RevealTrans(Duration=1.0,Transition=12)">

<!-- Specify site exit effect -->
<meta http-equiv="Site-Exit" content="RevealTrans(Duration=1.0,Transition=12)">

These tags are IE-specific; modern web design typically uses CSS for transitions.

Browser Toolbar and UI Control

Meta tags that control browser UI elements:

<!-- Specify IE toolbar buttons -->
<meta name="application-name" content="Application Name">
<meta name="msapplication-tooltip" content="Tooltip Text">
<meta name="msapplication-starturl" content="/">
<meta name="msapplication-task" content="name=Task 1;action-uri=/task1;icon-uri=/task1.ico">
<meta name="msapplication-task-separator" content="1">

<!-- Specify IE navigation bar color -->
<meta name="msapplication-navbutton-color" content="#4285f4">

<!-- Specify IE window control -->
<meta name="msapplication-window" content="width=1024;height=768">

These tags primarily target IE browsers, customizing certain aspects of the browser UI.

Mobile App Deep Linking

Meta tags supporting mobile app deep linking:

<!-- Specify iOS app deep link -->
<meta property="al:ios:url" content="app://path">
<meta property="al:ios:app_store_id" content="123456789">
<meta property="al
做个网站！

本站部分内容来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn

上一篇：title标签的重要性

下一篇：关键字和描述信息

Front End Chuan

Front End Chuan, Chen Chuan's Code Teahouse 🍵, specializing in exorcising all kinds of stubborn bugs 💻. Daily serving baldness-warning-level development insights 🛠️, with a bonus of one-liners that'll make you laugh for ten years 🐟. Occasionally drops pixel-perfect romance brewed in a coffee cup ☕.

相关文章