想学百度seo ajax？看完这篇你就入门了！

今天心血来潮，想搞搞百度SEO，让自己的网站能被更多人搜到。但你知道，现在很多网站都用Ajax技术，页面内容都是动态加载的，这就给SEO带来麻烦。百度蜘蛛不像人，它看不到那些动态加载的东西，所以收录就成问题。今天我就来实战一下，看看怎么解决这个问题。

啥是Ajax？

简单说，Ajax就是不用刷新整个网页，就能更新部分内容的技术。打个比方，你逛淘宝，往下滚动页面，新的商品就自动加载出来，这就是Ajax的功劳。这样做用户体验很但对搜索引擎不友

为啥Ajax对SEO不友

因为百度蜘蛛抓取网页内容时，主要看的是HTML代码。如果内容是通过JavaScript动态加载的，蜘蛛就看不到。就像你去图书馆找书，书架上只有书名，你翻开书，里面是空白的，啥内容也没有，这咋整？

我的实践过程

我先是建一个简单的网页，里面有一个按钮。点击按钮，就通过Ajax从服务器获取一段文字，然后显示在网页上。代码大概是这样的：

HTML部分：

<button id="myButton">点击加载内容</button>
<div id="content"></div>

JavaScript部分:

<script>
*("myButton").addEventListener("click", function() {
// 这里是Ajax请求的代码，我就不写那么详细，
// 反正就是向服务器请求数据，然后把数据放到 id="content" 的 div 里面
var xhr = new XMLHttpRequest();
*('GET', '你的服务器地址');
* = function() {
if (* >= 200 && * < 300) {
*('content').innerHTML = *;




</script>

然后，我用百度站长平台的抓取诊断工具，看看百度蜘蛛能抓到结果不出所料，抓到的HTML里面，那个<div id="content"></div>是空的，啥也没有。因为内容是点击按钮后才加载的，蜘蛛可不会帮你点按钮。

解决办法

我尝试几种方法：

• 预渲染(Prerendering)：这是我目前觉得最靠谱的方法。就是在服务器端，把Ajax要加载的内容，先生成好静态的HTML。这样蜘蛛抓取的时候，就能直接看到完整的内容。我用一些工具，比如Puppeteer，在服务器端模拟浏览器环境，把动态内容渲染成静态HTML。
• 同构JavaScript： 这种方法比较复杂，我也还在研究。大概意思就是，让JavaScript代码既能在服务器端运行，也能在浏览器端运行。这样服务器端可以先生成完整的HTML，浏览器端再接管，实现动态交互。
• HTML 静态化： 这种方法有点累，就是把所有的数据在后端处理好组装成静态的 HTML 文件。用户访问页面的时候直接返回 HTML，不用再通过AJAX请求数据。

一点小感悟

搞SEO真是个细致活，要考虑的东西太多。这回实践让我对Ajax和SEO有更深的理解。虽然过程有点折腾，但最终解决问题，还是挺有成就感的。希望我的分享对大家有帮助！