文档head中应该放置哪些重要的meta标签？

Question

Accepted Answer

`` 标签在 `` 中提供关于页面的元数据——字符编码、viewport行为、SEO描述和社交分享预览。它们不会被渲染，但会被浏览器、搜索引擎和社交平台读取。 ## 为什么这很重要 ```html ``` - **`charset`** 确保文本（特别是非ASCII字符）正确解码。应该首先放置。 - **`viewport`** 是使网站在移动设备上**响应式**的关键——没有它，手机会以虚拟980px宽度渲染并缩小，破坏你的响应式CSS。 ## SEO meta标签 ```html Page Title — 50–60 chars ``` `` 和 `description` 是Google搜索结果中显示的内容，因此它们驱动点击率。`canonical` 告诉搜索引擎权威URL是哪个。 ## Open Graph——社交分享预览 ```html <meta property="og:title" content="Shareable title" /> <meta property="og:description" content="Shown when shared" /> <meta property="og:image" content="https://site.com/preview.jpg" /> <meta property="og:url" content="https://site.com/page" /> <meta name="twitter:card" content="summary_large_image" /> ``` 这些控制当你的链接在Facebook、LinkedIn、Slack、X等平台上共享时出现的卡片——没有它们你会得到丑陋或空白的预览。 ## 为什么这很重要 `charset` 和 `viewport` 对于正确的渲染和移动响应式至关重要；`title`/`description`/`canonical` 驱动SEO；Open Graph标签控制你的链接在共享时的显示方式。总之，这些是元数据层，使页面正确渲染、排名良好并易于分享。