第 3 / 105 道3 / 105 · #381
meta 标签有什么用
What is the importance of the meta tag?
先自己答，再往下看Answer it yourself first
一句话：meta 放的是 「关于这个页面的信息」—— 浏览器、搜索引擎、社交平台读它，用户看不到它。
真正天天用到的就四个，答这四个就够：
<meta charset="UTF-8">——必须放在 head 最前面。 没有它中文会乱码，因为浏览器得先知道用什么编码去解析后面的字节。viewport——移动端适配的前提。 不写这一行，手机浏览器会假装自己有 980px 宽然后整页缩小， 你写的所有响应式 CSS 全白费（见 #274）。description—— 搜索结果里那段摘要。 它不影响排名，但影响点击率。- Open Graph（
og:title、og:image）—— 链接分享到微信 / Slack / Twitter 时显示的卡片。
会追问：「keywords 还有用吗？」 —— 没用了，Google 早就不看，因为被滥用成了堆关键词。 这个点能答出来说明你不是背的旧教程。
In one line: meta carries information about the page — browsers, search engines and social platforms read it; users never see it.
Only four of them actually matter day to day:
<meta charset="UTF-8">— must be first in the head. Without it non-ASCII text turns to mojibake, because the browser has to know the encoding before it can parse the bytes that follow.viewport— the precondition for mobile. Without this line a phone browser pretends it is 980px wide and scales the whole page down, which throws away every responsive rule you wrote (see #274).description— the snippet in search results. It does not affect ranking, but it affects click-through.- Open Graph (
og:title,og:image) — the card shown when the link is shared into Slack, Twitter or a chat app.
Follow-up: “Does keywords still do anything?” — no. Google stopped reading it long ago because it was abused into keyword stuffing. Knowing this shows you are not reciting an old tutorial.
1<head>
2 <meta charset="UTF-8"> <!-- 必须最先 -->
3 <meta name="viewport" content="width=device-width, initial-scale=1">
4 <meta name="description" content="一句话说明这个页面是干什么的">
5 <meta property="og:title" content="分享出去显示的标题">
6 <meta property="og:image" content="https://…/cover.png">
7 <title>页面标题</title>
8</head>
1<head>
2 <meta charset="UTF-8"> <!-- must come first -->
3 <meta name="viewport" content="width=device-width, initial-scale=1">
4 <meta name="description" content="one sentence on what this page is for">
5 <meta property="og:title" content="the title shown when shared">
6 <meta property="og:image" content="https://…/cover.png">
7 <title>Page title</title>
8</head>
这道题的出处：Comes from: 课程里的这一节 →this lesson →用抽认卡过一遍Run a flashcard round