学完这篇,你能照着把一套完整的 <meta> 标签填进站点 <head>,让搜索引擎正确抓取、社交平台分享出卡片、手机端显示不出错,同时避开几个最常见的配置坑。
<meta> 标签全部写在 HTML 的 <head> 里,改动方式取决于你的站点类型:纯静态页直接编辑 .html 文件;WordPress 装 Yoast 后在「SEO → 搜索外观」里改;Clara BBS 这类论坛则在后台「系统设置 → 基本设置」填站点地址,其余 GEO 相关标签由后台「系统设置 → GEO 优化」自动输出。
第一步:先放好三个不写就出事的标签
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>页面标题 —— 站点名</title>
charset 必须是 <head> 的前 1024 字节内出现,否则中文可能变乱码。viewport 决定手机端是按真实宽度渲染还是被缩成一小坨,缺了它所有响应式样式基本白写。
注意:viewport 里不要加 user-scalable=no 或 maximum-scale=1,这会禁止用户双指缩放,属于无障碍问题,iOS 也会在表单聚焦时自动放大导致布局跳动。
第二步:SEO 三件套
<meta name="description" content="120 字以内的页面摘要,写人话,不要堆关键词">
<meta name="robots" content="index,follow,max-image-preview:large">
<link rel="canonical" href="https://www.example.com/post/123.html">
description:建议 60–120 字,只在搜索结果摘要里参考使用,不影响排名,但影响点击率。
robots:noindex 用于后台、搜索结果页、用户中心这类不该被收录的页面;max-image-preview:large 能让图片在搜索结果里以大图展示,值得加。
canonical:解决 www 与裸域、带不带参数这类重复内容问题。
注意:keywords 标签百度、Google 早已明确不参与排名,留着不占多少体积,但别指望它有用。真正踩坑的是 canonical 写成相对路径或写错域名——必须写完整绝对地址。论坛类系统尤其常见:后台站点地址填了裸域,页面却从 www 访问,会导致会话丢失和 canonical 指向错误,务必填带 https:// 的主域名并保持全站一致。
第三步:社交分享卡片 og / twitter
<meta property="og:type" content="article">
<meta property="og:title" content="分享时显示的标题">
<meta property="og:description" content="分享时显示的描述">
<meta property="og:image" content="https://www.example.com/cover.jpg">
<meta property="og:url" content="https://www.example.com/post/123.html">
<meta name="twitter:card" content="summary_large_image">
og:* 微信、QQ、微博、Facebook、X 都读,twitter:* 主要给 X 用,不冲突可以都写。
注意:两个高频坑。一是 og:image 必须绝对路径且能被公网直接访问,用 CDN 防盗链图片会抓不到;二是图片尺寸建议 1200×630,小于 300×200 的平台会降级成纯文字卡片。
第四步:移动端与浏览器表现
<meta name="theme-color" content="#1a73e8">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
theme-color 决定安卓 Chrome 地址栏颜色;format-detection 关掉 iOS 自动把数字识别成电话号码(论坛里字数统计、电话格式的正文特别容易被误转)。
注意:apple-mobile-web-app-capable 是旧写法,新标准是 mobile-web-app-capable,两个都写最稳。做 PWA 还需要 manifest.json,光靠 meta 不够。
第五步:结构化数据与 AI 引用
现在的收录不只面向搜索引擎,也面向 AI 引擎。除了 JSON-LD 结构化数据(<script type="application/ld+json">,输出 Article、FAQPage、QAPage 等类型),部分系统还会额外输出 citation 引用元标签。
Clara BBS 在「系统设置 → GEO 优化」里默认全开:robots.txt 自动放行豆包、DeepSeek、Kimi、元宝等 16+ 中国系 AI 爬虫,/llms.txt、/llms-full.txt、/answers.html 问答聚合页自动生成,已解决的悬赏帖会输出 QAPage + acceptedAnswer 结构化数据,帖子页输出 citation 元标签。抓取情况能在后台同一页面看"AI 爬虫访问监控"表。
注意:结构化数据只输出游客可见内容,隐藏版块和权限版块不要外泄,否则等于把私密内容喂给了 AI。
第六步:写完之后怎么验证
- 浏览器打开页面,右键「查看网页源代码」,搜索
<head> 里的标签是否生效——注意不是「检查元素」,那里面是渲染后的 DOM,会骗你。
- 分享卡片用各平台的调试工具刷新缓存:Facebook Sharing Debugger、X Card Validator,微信/QQ 缓存较久,可加个
?v=1 参数测试。
- 结构化数据用 Google Rich Results Test 或百度站长平台的校验工具跑一遍。
- 收录进度:配置百度推送 Token 与 IndexNow(Clara BBS 默认开启),新帖发布自动推送,AI 平台爬虫通常 1–4 周到访。
小结
- 基础三件套
charset、viewport、title 缺一不可,viewport 别禁缩放。
- SEO 重点是
description 和 canonical,后者必须绝对路径,且与后台站点地址保持一致。
- 社交分享认
og:*,图片必须公网可访问、绝对路径、1200×630。
- 移动端加
theme-color 和 format-detection。
- 结构化数据与 citation 是给 AI 引擎看的,同时要确认隐私口径,别把权限内容输出出去。
- 验证看源代码,不看开发者工具的元素面板。