咨询题一 JavaScript渲染让爬虫抓瞎，网站收录像挤牙膏
我们做前端开发的都晓得，如今单页面使用（SPA）满天飞，Vue，React，Angular随意拎一个出来都能让页面炫到飞起，但搜索引擎爬虫可不吃这套，它们看不明白JavaScript静态渲染的内容，后果确实是网站收录量卡在三位数死活上不去，老总天天诘问SEO效果，你只无能焦急，不慌，我们有招
第一个绝招，预渲染大法，保举用Prerender那个神器，装置包npm install prerender，配置文件里改两行代码，就能在构建时把路由页面熟成静态HTML，爬虫来拜候时直截了当给现成的，亲测无效，但记得要扫除办理员后台这些不需求SEO的途径，不给本身挖坑
第二个方案，办事端渲染（SSR）直截了当上，Next.js或许Nuxt.js选一个，尽管学习本钱高点，但效果立竿见影，记得在getServerSideProps里写好数据猎取逻辑，不把数据库密码明文写在代码里，平安第一
第三个备胎方案，PhantomJS爬虫渲染，尽管这货曾经中止维护了，但小网站应急依然能顶，写个两头件判别User-Agent，遇到爬虫就调PhantomJS截图转文字，不外不用来搞黑产，小心律师函正告
咨询题二 静态内容加载像拆盲盒，爬虫总漏抓关键信息
你有没有遇到过这种状况，页面上用户评论，商品价钱这些中心内容基本上AJAX异步加载的，爬虫抓完首页就撤，基本不等你数据回来，这时分我们得让爬虫学会等一等
第一个技巧，用HTML5的history.pushState配合meta标签，在页面加载时就把骨架屏先扔给爬虫，等数据回来再交换内容，记得在noscript标签里放个备用版本，防着那些禁用JS的特殊爬虫
第二个骚操作，用Google的Rendertron办事，安排个Docker容器，给爬虫前往渲染后的页面，其他用户奔忙正常SPA流程，不外要留意不被歹意流量打爆容器，加个Cloudflare防火墙挡挡
第三个土方法，在页面底部加个隐藏的文本层，把关键信息用noscript标签包起来，尽管对用户体验不敌对，但关键时辰能保收录，用完记得删，不被老总发现那个野路子
咨询题三 交互事情绑定的内容，爬虫完全看不见
如今网站都盛行点击展开，鼠标悬停显示更多信息，这些交互内容爬虫基本触发不了，就像你精心预备了满汉全席，后果主人戴着眼罩来吃饭，气不气人
第一个破解法，用ARIA标签给可交互元素打标识表记标帜，role=button和aria-expanded属性支配上，尽管不克不及直截了当让爬虫看到内容，但能提示这是重要交互区域，谷歌如今越来越注重ARIA了
第二个硬核方案，把关键交互内容默许展开，用CSS的displaynone和hover操纵显示，再配合媒体查询针对爬虫User-Agent强迫展开，不外要小心被谷歌辨认为隐藏文字惩处
第三个取巧方式，在页面加载时用JavaScript自动触发一次点击事情，把需求展现的内容先展开，但得操纵好执行机遇，不在数据还没回来就触发，否则会抓到空内容
咨询题四 功能优化过头，反而坑了SEO
为了首屏加载速度，我们把CSS都内联，JS都延迟加载，后果爬虫来的时分页面依然个半成品，这就像你为了赶工夫，把菜炒到半熟就端给主人，能好吃才怪
第一个醒悟点，不把一切CSS都内联，至多留个关键途径的款式在head里，用link rel=preload提早加载主CSS文件，如此爬虫既能疾速看到构造，又能拿到完好款式
第二个留意事项，异步加载的JS要加上async或许defer属性，但关键交互脚本依然老实同步加载，特不是那些生成页面内容的JS，不为了那点功能分把SEO搭出来
第三个自检办法，用Chrome的Lighthouse跑个SEO审计，重点关注文档防止运用可执行代码和页面有可拜候的URL这两项，分数低于90分的赶忙改
最初讲句真实话，SEO优化没有银弹，但我们前端能做的确实是尽量让爬虫看得舒适，记得按期用反省网址工具在Google Search Console里提交渲染后的页面，你学会了吗，要不要如今就去反省下你担任的网站
