安达发|电器行业生产突围战：APS高级排程打造“智慧工厂”新内核
2026/1/15 17:40:21
网站标签SEO实战指南：小白也能让搜索引擎爱上你
- 网站标签SEO实战指南：小白也能让搜索引擎爱上你
- 我当年乱打标签，被百度当成垃圾站按在地上摩擦
- 标签到底是个啥？别把情书写成请假条
- 现在还用 keywords？你要这么写就等着被嫌弃
- 写 title 像写抖音文案：前 10 个字必须勾魂
- 技术规范
- 反面教材
- 正面示范
- description 不是摘要，是广告位！CTR 翻倍的骚操作
- 技术规范
- 实战案例
- canonical：重复内容大杀器，电商站必背
- 代码模板
- 注意
- hreflang：做多语言站不加？等着全球流量打水漂
- 代码模板
- 容易踩的坑
- OG + Twitter Card：社交分享时的脸面，别让用户看到一坨码
- 最小可用模板
- 注意
- 结构化数据：让爬虫秒懂你，星级评分、价格、库存全展示
- 图书商品页示例
- 效果
- 移动端与 PC 标签不一致？爬虫：你这是在玩我
- SPA 项目用 Vue/React？别天真以为 `vue-meta` 就万事大吉
- Nuxt 3 示例
- 标签字符数限制不是死的，但超出一定被截断
- CDN 缓存导致标签更新不生效？清缓存姿势要对
- 突然没流量？先别甩锅算法，标签自查 5 分钟搞定
- 快速清单
- 与其花 5 万买外链，不如先把这几行代码写对
网站标签SEO实战指南：小白也能让搜索引擎爱上你
友情提示：本文全程碎碎念，代码管饱，吐槽管够，阅读时建议配一杯冰美式，防止上头。
我当年乱打标签，被百度当成垃圾站按在地上摩擦
先交代黑历史。18 年我搭了个 WordPress 博客，主题不换、插件不装，上来就啪啪啪给每篇文章打 30 个 tag，从“人工智能”到“红烧肉”应有尽有，心想“这不得把所有流量都薅来？”结果一周后site一下，百度只给我首页一个面子，其余全扔沙盒。我屁颠跑去百度站长工具，反馈区赫然一行字：“关键词堆砌，疑似垃圾站。”
当场社死。
那一刻我才懂：标签不是给老板看的，不是给用户看的，是写给爬虫的情书。情书写成流水账，人家直接把你拉黑。
标签到底是个啥？别把情书写成请假条
先把概念捋顺，省得一会代码甩你脸上时懵逼。
网页标签分两大派：
- 肉眼可见派：
<title>、<h1>、<img alt>、<a>，用户能看见，爬虫也看。 - 幕后黑手派：
<meta name="description">、<meta name="robots">、<link rel="canonical">，藏在<head>里，用户懒得翻，爬虫先翻。
搜索引擎爬虫进门顺序大概这样：
① 先瞄一眼<title>，看看这页主题是不是它要的菜；
② 再扫<meta description>，判断摘要值不值得它带回数据库；
③ 扫<h1>～<h3>，快速理解段落语义；
④ 发现重复内容时，翻 canonical 决定留谁；
⑤ 看到 hreflang，才知道“哦，原来这页还有英文版”。
顺序一旦翻车，爬虫直接摔门走人。
现在还用 keywords？你要这么写就等着被嫌弃
早年的<meta name="keywords">就像 10 年前的 QQ 签名，谁都在用，现在还在用的人要么情怀，要么真·小白。
Google 08 年就公开说不看 keywords，百度 13 年也表态“只作参考”，参考的意思你懂的——基本忽略。
可老板非让写怎么办？给你个“保命”写法，写完别到处说是我教的：
<!-- 实在推脱不了，就放 3 个以内，千万别堆 --><metaname="keywords"content="前端 SEO, 标签优化, 实战">记住，keywords 不写不会死，写多了必死。
写 title 像写抖音文案：前 10 个字必须勾魂
技术规范
- 长度 30 个汉字以内，超了百度直接砍尾，Google 会 middle-truncate。
- 核心关键词靠前放，品牌词甩最后，除非你是天猫。
- 禁止整站一个 title，爬虫会以为你全站就一页。
反面教材
<title>新闻中心-新闻中心-新闻中心</title>百度：？？？
用户：告辞！
正面示范
假设你做的是“深圳二手书交易”，文章讲“2026 年最值得入手的编程书”：
<title>2026 编程书二手交易指南 - 深圳书香网</title>关键词“2026 编程书”“二手交易”全在前半段，品牌“深圳书香网”放后，一眼让爬虫知道这页卖啥，也让用户知道点进来不会被骗。
description 不是摘要，是广告位！CTR 翻倍的骚操作
技术规范
- 150～200 字区间，手机端 120 字以内就被截断。
- 完整出现主关键词 1 次，长尾词 1 次，千万别硬堆。
- 加号召性动词：免费领取、立即查看、低至 5 折……你懂的。
实战案例
继续二手书场景，正文第一段是：“本文介绍了 2026 年最值得入手的编程书……”
如果你直接把前 100 字粘贴到 description，搜索结果就显示：
“本文介绍了 2026 年最……”
用户内心 OS：废话文学？
换个广告腔：
<metaname="description"content="想花 20 块读懂 Vue3 源码？2026 年深圳二手编程书交易榜单出炉，TOP10 均价不到 3 折，扫码即可预约线下自提！">爬虫：这页很新鲜。
用户：20 块？冲！
CTR 直接干上去 30%不是玄学 。
canonical：重复内容大杀器，电商站必背
电商最头大：一个商品 5 个颜色，URL 不同内容 90% 重复，权重被五等分，排名集体沉底。
canonical 就是告诉爬虫：“别分了，它们都是一个人的小号”。
代码模板
<!-- 在粉色鞋页面 head 里指向主页面 --><linkrel="canonical"href="https://shop.com/shoes/air-max">注意
- 只能指向站内URL，别瞎指到淘宝去。
- 指向的页面200 状态码必须正常返回，404 会炸。
- 一个页面只能有一个 canonical，多写爬虫选择困难症。
hreflang：做多语言站不加？等着全球流量打水漂
公司要做中英文双语，目录结构却长成：
/en/xxx.html /zh/xxx.html爬虫一看：咦，内容 80% 重复，先砍一个。
hreflang 就是告诉它“这是不同语言，不是抄袭”。
代码模板
<!-- 中文版 --><linkrel="alternate"hreflang="zh-CN"href="https://site.com/zh/xxx.html"><!-- 英文版 --><linkrel="alternate"hreflang="en"href="https://site.com/en/xxx.html"><!-- 默认 fallback --><linkrel="alternate"hreflang="x-default"href="https://site.com/en/xxx.html">容易踩的坑
- hreflang 与 canonical别互斥，一个页面只能有一个“正宫”。
- 语言代码写全，简体中文是
zh-CN，别写成zh-cn，大小写敏感部分引擎会误判。
OG + Twitter Card：社交分享时的脸面，别让用户看到一坨码
当用户把你的链接甩到微信 / 微博 / Twitter，没有 OG 标签就像出门不洗脸，系统自动抓第一张图 + 前 100 字，丑到没人点。
最小可用模板
<!-- Open Graph --><metaproperty="og:title"content="2026 深圳二手编程书榜单"><metaproperty="og:description"content="20 元读懂 Vue3 源码，附线下自提地址"><metaproperty="og:image"content="https://site.com/img/book.jpg"><metaproperty="og:url"content="https://site.com/zh/2026-book"><metaproperty="og:type"content="article"><!-- Twitter Card --><metaname="twitter:card"content="summary_large_image"><metaname="twitter:title"content="2026 深圳二手编程书榜单"><metaname="twitter:description"content="20 元读懂 Vue3 源码"><metaname="twitter:image"content="https://site.com/img/book.jpg">注意
og:image尺寸建议 1200×630，小于 200KB，否则微信抓图失败。- 绝对路径，带 https://，相对路径会被某些平台直接无视。
结构化数据：让爬虫秒懂你，星级评分、价格、库存全展示
Google 富媒体结果、百度专业问答，背后都是 Schema.org 的 JSON-LD。
不加也能收录，加了就是 VIP 通道。
图书商品页示例
<scripttype="application/ld+json">{"@context":"https://schema.org","@type":"Product","name":"Vue3 源码完全解读","image":"https://site.com/img/book.jpg","description":"二手九成新，附作者签名","sku":"book-123","brand":{"@type":"Brand","name":"电子工业出版社"},"offers":{"@type":"Offer","url":"https://site.com/zh/2026-book","priceCurrency":"CNY","price":"20","availability":"https://schema.org/InStock"},"aggregateRating":{"@type":"AggregateRating","ratingValue":"4.8","reviewCount":"42"}}</script>效果
搜索结果右侧出现星级、价格、库存，CTR 提升 20%～50%。
百度现在对 JSON-LD 解析也越来越友好，中文站大胆用。
移动端与 PC 标签不一致？爬虫：你这是在玩我
很多团队把移动端扔给前端自由发挥，结果：
- PC 端 title 30 字，移动端 20 字；
- PC 端 description 带促销，移动端纯技术；
- canonical 一个指
/product，一个指/m/product。
爬虫：？？？直接归类为作弊，降权不商量。
正确姿势：响应式一套 HTML，所有标签保持一致；
如果独立域名/m.xxx.com，各自页面也要一一对应，别偷懒全站一个 title。
SPA 项目用 Vue/React？别天真以为vue-meta就万事大吉
单页应用最尴尬：爬虫只看到<div id="app"></div>，里面空空如也。
解决方案只有两条路：
- 服务端渲染（SSR）：Next.js、Nuxt.js，真·SEO 亲儿子；
- 预渲染（Prerender）：如果是企业站、活动页，无交互用 prerender-spa-plugin 一把梭。
Nuxt 3 示例
// pages/book/[id].vueexportdefault{head(){return{title:`${this.bookName}- 深圳二手书`,meta:[{name:'description',content:`仅需${this.price}元，九成新《${this.bookName}》线下自提，附作者签名`},{property:'og:title',content:this.bookName},{property:'og:image',content:this.coverImage}],link:[{rel:'canonical',href:`https://site.com/book/${this.id}`}]}}}注意：vue-meta只在已经加载的页面里插标签，首屏 HTML 源码里没有，爬虫看不到等于白搭。
所以必须 SSR，再高级的 meta 框架也救不了裸奔的 HTML。
标签字符数限制不是死的，但超出一定被截断
经验值（2026 年实测）：
| 标签 | 百度 | |
|---|---|---|
| title | 30 汉字 | 65 字符 |
| description | 120 汉字 | 160 字符 |
| og:title | 32 汉字 | 40 汉字 |
| og:description | 54 汉字 | 65 汉字 |
超出不会报错，但后半截直接“…”，关键词如果被腰斩，排名随缘。
实战技巧：写完先丢到百度搜索资源平台 → 流量与关键词 → 网页分析看是否被改写；
Google 直接用SERP preview tool模拟 。
CDN 缓存导致标签更新不生效？清缓存姿势要对
上线后改完 title，前端 F5 看见新内容，爬虫那边还是老页面，为啥？
CDN 缓存没刷。
正确流程：
- 代码里给文件名加 hash，
main.abc.js强制浏览器拉新； - CDN 控制台单 URL 刷新，别整目录刷新，量大了心疼；
- 百度资源平台主动推送更新 URL，让爬虫第一时间再来爬。
突然没流量？先别甩锅算法，标签自查 5 分钟搞定
快速清单
- GSC → 覆盖率 → 看“已提交未索引”是不是暴涨；
- 批量爬全站，Screaming Frog 免费 500 URL，查缺失 title、重复 description；
- 看 source，确认上线时别把 head 整段注释掉（真干过）；
- SPA 站用view-source:协议看首屏 HTML，是不是空；
- 百度站长工具 → 抓取诊断，看返回 502/503 没。
90%“算法误伤”其实都是技术乌龙，别一上来就写检讨信，先把标签拍平再说。
与其花 5 万买外链，不如先把这几行代码写对
SEO 圈里老油条总结过：
“内容为王，外链为皇，速度是宰相，标签就是地基。”
地基塌陷，王和皇住哪？
标签免费、可控、立竿见影，新手第一天就能上手，比氪金买 100 条 DA30 外链靠谱多了。
把这篇文章打印出来贴工位，每写一个新页面就对照打钩，坚持一个月，site 数据要是没涨，你来深圳请我喝奶茶——我直播把杯子吃掉。
（全文完，写代码手酸，去撸串了。）
欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。
推荐：DTcode7的博客首页。
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
| 专栏系列（点击解锁） | 学习路线(点击解锁） | 知识定位 |
|---|---|---|
| 《微信小程序相关博客》 | 持续更新中~ | 结合微信官方原生框架、uniapp等小程序框架，记录请求、封装、tabbar、UI组件的学习记录和使用技巧等 |
| 《AIGC相关博客》 | 持续更新中~ | AIGC、AI生产力工具的介绍，例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结 |
| 《HTML网站开发相关》 | 《前端基础入门三大核心之html相关博客》 | 前端基础入门三大核心之html板块的内容，入坑前端或者辅助学习的必看知识 |
| 《前端基础入门三大核心之JS相关博客》 | 前端JS是JavaScript语言在网页开发中的应用，负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客，共同构建用户界面。 通过操作DOM元素、响应事件、发起网络请求等，JS使页面能够响应用户行为，实现数据动态展示和页面流畅跳转，是现代Web开发的核心 | |
| 《前端基础入门三大核心之CSS相关博客》 | 介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法，同时收集精美的CSS效果代码，用来丰富你的web网页 | |
| 《canvas绘图相关博客》 | Canvas是HTML5中用于绘制图形的元素，通过JavaScript及其提供的绘图API，开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力，使得前端绘图技术更加丰富和多样化 | |
| 《Vue实战相关博客》 | 持续更新中~ | 详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅 |
| 《python相关博客》 | 持续更新中~ | Python，简洁易学的编程语言，强大到足以应对各种应用场景，是编程新手的理想选择，也是专业人士的得力工具 |
| 《sql数据库相关博客》 | 持续更新中~ | SQL数据库：高效管理数据的利器，学会SQL，轻松驾驭结构化数据，解锁数据分析与挖掘的无限可能 |
| 《算法系列相关博客》 | 持续更新中~ | 算法与数据结构学习总结，通过JS来编写处理复杂有趣的算法问题，提升你的技术思维 |
| 《IT信息技术相关博客》 | 持续更新中~ | 作为信息化人员所需要掌握的底层技术，涉及软件开发、网络建设、系统维护等领域的知识 |
| 《信息化人员基础技能知识相关博客》 | 无论你是开发、产品、实施、经理，只要是从事信息化相关行业的人员，都应该掌握这些信息化的基础知识，可以不精通但是一定要了解，避免日常工作中贻笑大方 | |
| 《信息化技能面试宝典相关博客》 | 涉及信息化相关工作基础知识和面试技巧，提升自我能力与面试通过率，扩展知识面 | |
| 《前端开发习惯与小技巧相关博客》 | 持续更新中~ | 罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等 |
| 《photoshop相关博客》 | 持续更新中~ | 基础的PS学习记录，含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结 |
| 日常开发&办公&生产【实用工具】分享相关博客》 | 持续更新中~ | 分享介绍各种开发中、工作中、个人生产以及学习上的工具，丰富阅历，给大家提供处理事情的更多角度，学习了解更多的便利工具，如Fiddler抓包、办公快捷键、虚拟机VMware等工具 |
吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤
非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！