meta
HTML 中的 标签用于提供有关网页的元数据（即数据的描述性信息），通常位于 部分。它不直接显示在页面上，但对网页的 SEO（搜索引擎优化）、浏览器行为、字符编码等有重要影响。以下是一些常用的 标签及其功能：1. 字符编码 (Charset)
HTML 中的 <meta> 标签用于提供有关网页的元数据（即数据的描述性信息），通常位于 <head> 部分。它不直接显示在页面上，但对网页的 SEO（搜索引擎优化）、浏览器行为、字符编码等有重要影响。以下是一些常用的 <meta> 标签及其功能：
1. 字符编码 (Charset)
<meta charset="UTF-8">定义网页使用的字符编码。UTF-8 是目前最常见的编码方式，支持多语言字符集，确保页面在不同设备和浏览器中正确显示。
2. 页面描述 (Description)
<meta name="description" content="网页的简短描述">为网页提供简短的描述，通常在搜索引擎结果中显示，帮助用户了解页面的内容。良好的描述有助于提升 SEO。
3. 作者 (Author)
<meta name="author" content="作者名字">指定网页的作者或创作者的名称。
4. 关键词 (Keywords)
<meta name="keywords" content="HTML, CSS, JavaScript, 网站开发">提供一组与网页内容相关的关键词，帮助搜索引擎理解页面的主题。虽然现在大多数搜索引擎不再依赖这个标签，但它对一些旧搜索引擎仍有一定影响。
5. 视口设置 (Viewport)
<meta name="viewport" content="width=device-width, initial-scale=1.0">主要用于响应式设计，控制页面的缩放和尺寸，以适应不同的设备屏幕。width=device-width 指定页面宽度与设备的屏幕宽度一致，initial-scale=1.0 设定初始缩放比例。
6. 重定向 (Refresh)
<meta http-equiv="refresh" content="5; url=https://example.com">这个标签让页面在指定的时间（如 5 秒）后自动重定向到另一个 URL。content 属性的第一个值是延迟时间，第二个值是目标 URL。
7. HTTP 头信息 (HTTP-Equiv)
<meta http-equiv="X-UA-Compatible" content="IE=edge">指定浏览器如何处理页面。比如，X-UA-Compatible 用于确保页面在 Internet Explorer 浏览器中使用最新的渲染模式。
8. 内容类型 (Content-Type)
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">定义页面内容的 MIME 类型和字符集。通常 <meta charset="UTF-8"> 足够，但可以使用此方式进行更详细的设置。
9. robots 控制搜索引擎的索引和跟踪
<meta name="robots" content="noindex, nofollow">告知搜索引擎是否可以索引该页面并跟踪页面上的链接。noindex 表示不将页面加入搜索引擎索引，nofollow 表示不跟踪页面上的链接。
10. Open Graph (社交媒体分享)
<meta property="og:title" content="网页标题">
<meta property="og:description" content="网页描述">
<meta property="og:image" content="图片URL">
<meta property="og:url" content="网页URL">Open Graph 标签用于优化社交媒体平台（如 Facebook 和 Twitter）分享时的展示效果。它提供页面标题、描述、图片和 URL 等信息。
11. Twitter Cards (Twitter 分享优化)
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="网页标题">
<meta name="twitter:description" content="网页描述">
<meta name="twitter:image" content="图片URL">用于在 Twitter 上优化分享效果，可以设定卡片的类型（如 summary、summary_large_image、photo 等）以及相关内容。
这些 <meta> 标签都是网页开发中非常重要的工具，能够帮助提升页面在搜索引擎中的排名、改善用户体验，并控制浏览器的行为。除了之前提到的常见 <meta> 标签，HTML 中还有一些其他有用的 <meta> 标签，尽管它们不那么常见，但在某些特定场景下也非常有用。以下是一些额外的 <meta> 标签及其功能：
12. 视图的描述 (Viewport Scaling)
<meta name="viewport" content="width=device-width, user-scalable=no">该标签用于控制视口的缩放行为。user-scalable=no 禁用用户缩放页面，适用于一些固定布局的网页，避免用户通过手势缩放页面。
13. 资源类型 (Resource Type)
<meta name="resource-type" content="document">指示该网页的资源类型，document 表示该页面是文档类型。这个标签主要用于辅助分类和组织资源，但在实际开发中使用较少。
14. 内容语言 (Content Language)
<meta http-equiv="Content-Language" content="en">指定网页的内容语言，如 en（英语）、zh-CN（简体中文）等。这有助于浏览器或搜索引擎理解页面的语言，改善多语言支持。
15. 控制缓存 (Cache-Control)
<meta http-equiv="Cache-Control" content="no-cache">控制浏览器如何缓存页面内容。例如，no-cache 表示浏览器每次都重新请求页面，而不使用缓存。这个标签通常用在需要频繁更新内容的页面上。
16. 防止页面被框架嵌套 (X-Frame-Options)
<meta http-equiv="X-Frame-Options" content="deny">该标签防止网页被嵌入到 <iframe> 中，增加安全性。deny 表示不允许该页面被嵌入到任何 <iframe> 中，sameorigin 表示仅允许来自同一域名的页面嵌套。
17. 指定内容的应用程序类型 (Application Name)
<meta name="application-name" content="网页应用名称">设置网页应用程序的名称，通常用于增强在 Windows 8 或更高版本中启动器中的显示效果。
18. 主题颜色 (Theme Color)
<meta name="theme-color" content="#ff5733">设置浏览器地址栏或状态栏的主题颜色，尤其在移动设备上，帮助网站与设备的整体UI风格保持一致。
19. 禁止搜索引擎索引特定内容 (Noindex, Nofollow Specific Content)
<meta name="robots" content="noindex">
<meta name="robots" content="nofollow">除了页面级的 noindex 和 nofollow 外，还可以对特定内容应用这些规则，告诉搜索引擎不要索引特定的部分或链接。
20. Apple Touch Icon (苹果设备图标)
<link rel="apple-touch-icon" href="icon.png">为 Apple 设备（如 iPhone 和 iPad）指定一个图标，当用户将网页添加到主屏幕时使用。
21. Web App Manifest
<link rel="manifest" href="/manifest.json">指示浏览器加载一个 Web App Manifest 文件，允许你为网页应用配置图标、名称、显示模式等，通常用于 PWA（渐进式 Web 应用）。
22. Referrer Policy (引用来源策略)
<meta name="referrer" content="no-referrer">控制网页在发出请求时是否发送 Referer 头信息。no-referrer 表示不会发送来源信息，origin 只会发送来源的源域名。
23. Content-Security-Policy (CSP)
<meta http-equiv="Content-Security-Policy" content="default-src 'self';">用于定义内容安全策略（CSP），限制网页可以加载的资源类型和来源。可以帮助防止跨站脚本攻击（XSS）和数据注入攻击。
24. 苹果 iOS Web App Status Bar 样式
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">用于设置 Web 应用在 iOS 设备上的状态栏样式，常见的值包括：
default（默认样式）black（黑色背景）black-translucent（透明黑色背景）
25. Mobile Web App Capable (是否支持移动Web应用)
<meta name="mobile-web-app-capable" content="yes">指示该网页是否为移动 Web 应用。如果设置为 yes，该页面将表现得像一个本地应用，可以在全屏模式下打开，不显示浏览器界面。
26. 不自动加载（Autoplay）
<meta name="autoplay" content="false">这个标签通常与视频或音频媒体元素配合使用，指示浏览器不自动播放资源。
这些额外的 <meta> 标签在特定的需求下非常有用，能够进一步优化用户体验、提升页面安全性，或增强搜索引擎和社交媒体的兼容性。合理地使用这些 <meta> 标签可以为页面增加额外的功能和信息。虽然大部分常见的 <meta> 标签已经介绍了，但 HTML 生态中仍然有一些不太常见、但是功能独特的 <meta> 标签或属性，它们可能用于特定场景或特定需求。以下是一些额外的 <meta> 标签：
27. 清除缓存 (Pragma)
<meta http-equiv="Pragma" content="no-cache">该标签用于控制缓存行为，特别是在 HTTP 1.0 中，no-cache 表示禁止缓存。当现代浏览器支持 Cache-Control 时，这个标签通常不再那么常用了，但仍然可以在某些情况下使用。
28. 网页引用 (Citation)
<meta name="citation_title" content="文章标题">
<meta name="citation_author" content="作者姓名">
<meta name="citation_publication_date" content="出版日期">这类标签用于指定文献引用相关的元数据，尤其适用于学术或文献类网站。搜索引擎或数据库可以通过这些标签获取页面的引用信息。
29. 设置页面视图的方向 (Orientation)
<meta name="viewport" content="orientation=landscape">该标签指定页面应采用的方向，可以是 landscape（横向）或 portrait（纵向）。这通常与响应式设计一起使用，确保页面在不同设备上有适当的显示效果。
30. 自动刷新页面 (Auto-Refresh)
<meta http-equiv="refresh" content="10; url=https://example.com">这个标签指定页面在一定时间后自动刷新，content="10" 表示页面将在 10 秒后刷新。它常用于需要定期更新内容的页面，如新闻、股票或天气信息。
31. 资源隐藏 (Unlisted Resource)
<meta name="unlisted" content="true">标明资源不应出现在索引或显示中。这个标签不是标准的 HTML 元素，但在某些私有或自定义的环境中可能会使用。
32. 支持媒体查询 (Media Query)
<meta media="screen" content="width=device-width, initial-scale=1.0">media 属性允许你为特定的设备或屏幕尺寸提供不同的视口设置。它通常与 CSS 媒体查询配合使用，允许为不同设备（如手机、平板、桌面）定制不同的显示效果。
33. Apple Touch Startup Image
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Web App Title">为 iOS 设备上的 Web 应用指定一些设置，确保 Web 应用像本地应用一样启动、显示，并支持状态栏样式的自定义。
34. 定义网页的最大宽度 (Max-width)
<meta name="max-width" content="800px">这个标签指定页面内容的最大宽度。虽然这个属性并不是 HTML 标准的一部分，某些浏览器或工具可能会识别此标签。
35. 设置音视频元素的媒体类型 (Media Type for Audio/Video)
<meta name="media" content="audio/mpeg">这个标签可以为网页中的音频或视频元素提供 MIME 类型，通常用于音频或视频的嵌入中。
36. Google Webmasters Verification (谷歌网站管理员验证)
<meta name="google-site-verification" content="verification_token">这是 Google 用于验证网站所有权的一种方式。网站所有者会在 Google Search Console 中收到一个特定的验证 token，并将其放入网站的 <meta> 标签中以完成验证过程。
37. 指定页面的广告管理系统 (Ad Management System)
<meta name="ad_manager" content="GoogleAdSense">此标签指定网页使用的广告管理系统（例如 Google AdSense、DoubleClick 等）。它有助于广告网络确定网页的广告内容。
38. 社交媒体与搜索引擎的 SEO 配置 (SEO Tags)
<meta name="googlebot" content="index,follow">
<meta name="bingbot" content="index,follow">这些标签用于指定特定搜索引擎蜘蛛（如 Googlebot、Bingbot）如何抓取页面。index 表示允许索引，follow 表示允许跟踪页面上的链接。
39. 防止打印时显示某些内容 (Print Styles)
<meta name="robots" content="noarchive">这个标签可以阻止搜索引擎缓存页面，noarchive 表示禁止搜索引擎存储页面的快照。在某些页面或动态内容中，这可以增加隐私性。
40. 指定网页为 PWA (渐进式 Web 应用)
<meta name="theme-color" content="#000000">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">这些 <meta> 标签用于配置渐进式 Web 应用（PWA），使其在移动设备上能够像本地应用一样运行，并提供自定义颜色和UI体验。
41. Cookie 同意 (Cookie Consent)
<meta name="cookie-consent" content="true">在一些地区，尤其是欧盟国家，网页需要获取用户同意才能使用 Cookies。此标签用于标明网页是否已获得用户同意。
42. 指定文件格式 (File Format)
<meta name="file-format" content="PDF">该标签用于指示网页中主要内容的文件格式类型，如 PDF、DOCX、XLSX 等。
43. 页面加载模式 (Loading Mode)
<meta name="loading" content="eager">该标签可用于指定页面加载的模式，eager 表示立即加载页面，lazy 表示懒加载，尤其用于图像和媒体元素。
这些 <meta> 标签大部分用于特定的优化或定制页面行为，虽然它们不是每个项目都需要的，但在有特定需求时，合理使用可以大大改善页面的用户体验、SEO 和安全性。到目前为止，我们已经覆盖了大部分常见和一些不太常见的 <meta> 标签。HTML 规范并没有过多的 <meta> 标签，因此通常在开发中会遇到的就是上述这些。不过，在现代 Web 开发中，除了标准的 <meta> 标签，还有一些基于特定平台、库或功能的扩展标签。这些扩展标签虽然不属于 HTML 标准的一部分，但它们在实际开发中有时会被使用。以下是一些额外的 <meta> 标签或与 <meta> 标签相关的特定功能，部分基于特定技术、工具或平台：
44. WebP 图像格式支持 (WebP Image Format Support)
<meta name="supported-image-formats" content="webp">指定网页是否支持 WebP 图像格式。WebP 是一种现代图像格式，能够提供较小的文件大小和高质量的图像。在支持 WebP 的浏览器中，网页可以使用这种格式。
45. AMP 页面支持 (Accelerated Mobile Pages)
<meta name="amp-google-client-id-api" content="AMP_ID">AMP 是 Google 推出的加速移动页面项目，它使页面加载速度更快。这个标签与 AMP 页面相关，用于设置 AMP ID 客户端标识。
46. Google Ads 广告 (AdWords)
<meta name="google-ad-client" content="ca-pub-xxxxxx">指定网站与 Google Ads（以前的 AdWords）账户相关的广告客户 ID。这个标签帮助 Google Ads 确定广告投放的上下文。
47. Facebook Pixel (Facebook 广告跟踪)
<meta name="facebook-pixel-id" content="your-pixel-id">Facebook Pixel 用于在页面中嵌入 Facebook 广告跟踪代码。通过这种方式，站点可以收集访问者行为数据，进一步用于广告投放和优化。
48. Open Graph 视频属性 (Video Properties for Open Graph)
<meta property="og:video" content="video-url">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video:width" content="800">
<meta property="og:video:height" content="600">与 Open Graph（OG）协议相关，用于指定视频内容在社交媒体（如 Facebook）分享时的展示效果。可以定义视频的 URL、类型、宽度和高度。
49. Favicon 设置 (设置网站图标)
<link rel="icon" href="favicon.ico">
<meta name="msapplication-TileImage" content="favicon.ico">
<meta name="theme-color" content="#ffffff">这些标签不仅仅是 <meta> 标签，通常与 <link> 标签一起使用，用于设置网页的图标（favicon）。msapplication-TileImage 是 Windows 设备上的图标设置，而 theme-color 是设置浏览器地址栏颜色。
50. 跨站资源共享 (CORS) 设置
<meta name="crossorigin" content="anonymous">这个标签用于设置跨域请求时的 CORS 策略，控制如何从一个源加载资源到另一个源。anonymous 表示没有发送认证信息。
51. 语音识别支持 (Speech Recognition)
<meta name="speech-recognition" content="enabled">此标签可用于启用或禁用网页的语音识别功能，常见于需要语音输入的应用中，如语音助手或语音翻译工具。
52. 防止被屏蔽 (Prevent Blocking)
<meta name="robots" content="noindex, nofollow, noarchive">这个标签用于告诉搜索引擎蜘蛛（如 Googlebot）不仅不要索引网页，还要避免缓存和跟踪网页中的链接。它对隐私要求较高的页面或动态内容非常有用。
53. Googlebot 设置（使用 Googlebot 预设规则）
<meta name="googlebot" content="noindex, nofollow, noarchive">该标签用于为 Googlebot 指定页面的抓取和索引行为，例如 noindex 表示不允许索引，nofollow 表示不跟踪链接。
54. Link Preview for Instant Articles (即时文章链接预览)
<meta name="fb:article_id" content="article-id">这是 Facebook Instant Articles 相关的一个标签，用于设置即时文章的唯一标识符。它帮助 Facebook 识别和展示优化的文章内容。
55. App Link 支持 (App Link Support for Facebook)
<meta property="al:ios:url" content="app://open">
<meta property="al:android:url" content="myapp://open">这些标签帮助在移动应用与 Web 内容之间创建深度链接。它们主要用于社交平台（如 Facebook），支持在移动应用中打开网页内容。
56. Browser Extension Metadata
<meta name="extension-name" content="Extension ID">一些浏览器扩展或插件可能使用 <meta> 标签来识别并管理扩展相关的元数据。
57. 支持 Web 组件 (Web Components)
<meta name="custom-elements" content="true">用于标识网页支持 Web 组件技术，Web 组件允许开发者创建可重用的封装组件，这对于现代前端框架（如 Angular、React 等）非常重要。
58. 指定页面的 SEO 优化 (SEO Optimization)
<meta name="seo-category" content="technology">
<meta name="seo-rank" content="high">一些 SEO 工具或平台使用这些标签来标明页面的类别和优化级别。通过这种方式，它们帮助搜索引擎更好地分类和排名网页内容。
59. Web Share API 支持
<meta name="share-api" content="enabled">该标签用于标识网页是否支持 Web Share API，允许用户从网页共享文本、链接或文件到本地设备的应用程序（例如，社交媒体平台、电子邮件客户端等）。
总结
大多数 <meta> 标签已经覆盖了网页开发和优化的常见场景。然而，随着 Web 技术的发展，特定平台或技术（如 AMP、Facebook Instant Articles、Google Ads 等）也会引入一些专用的 <meta> 标签来支持特殊功能。除了标准的 <meta> 标签，我们还可以根据具体的需求使用这些扩展标签。实际开发时，应根据项目需求选择合适的 <meta> 标签，以增强页面性能、SEO、用户体验或社交媒体互动。
文章评论区
欢迎留言交流