AJAX加载和SEO优化

发表于 分类于 阅读次数： 本文字数： 397 阅读时长 ≈ 1 分钟

前言

搜索引擎是不执行JavaScript的, 换言之, 搜索引擎和AJAX加载数据是水火不容的。
不过听说谷歌的搜索引擎可以执行AJAX, 不愧是谷人希。

解决方案

既然搜索引擎不能爬到AJAX数据, 那么只要将数据写到JSP中就可以了。
但是这样就失去了AJAX局部加载的功能。

搜索引擎是爬取链接的, 那么只要以下形式加载数据, 就可以兼顾搜索引擎和AJAX了。

1
2
3
<!-- http://localhost:8080/blog-1 -->
<c:set var="next" value="${page+1}"/><!-- JSP标签, next值为2 -->
<a href="/blog-${next}" onclick="ajaxBlog(${next}); return false;">加载第${next}页的blog</a>

在点击<a>标签的时候, 会执行以下顺序

  1. 执行onclick()函数
  2. 执行ajaxBlog()函数加载下一页的博客
  3. onclick()函数return false拦截点击事件
  4. href链接跳转被拦截, 不执行

数据加载就解决了, 但是又有个问题, 这个<a>标签也必须写在JSP中, 不能通过JavaScript生成, 因为搜索引擎不爬取JavaScript。
也就是说, 这个<a>标签, 分页器, 需要在Java代码拼接Html分页器。

分页器如下, 需要Java代码拼接Html, 传到JSP中。

1
2
3
4
<a href="/blog-1" onclick="ajaxBlog(1); return false;">加载第1页的blog</a>
<a href="/blog-2" onclick="ajaxBlog(2); return false;">加载第2页的blog</a>
<a href="/blog-3" onclick="ajaxBlog(3); return false;">加载第3页的blog</a>
<a href="/blog-4" onclick="ajaxBlog(4); return false;">加载第4页的blog</a>

参考资料