我正在为我的 ajax 网站寻找 SEO 方法一段时间。我知道有多种方法可以解决这个问题,但我想知道我的解决方案是否有效。
所以如果我有这样的index.html。
<header>
<a href="/otherpage" class="ajax-load">Link to other page</a>
</header>
然后检查它是否不是 Google bot,并将 href 替换为 ajax 链接。
var isGoogleBot = navigator.userAgent.toLowerCase().indexOf('googlebot') > 0;
//Check if it's not Google Bot
if( !isGoogleBot ) {
//Convert link to ajax link
$('.ajax-load').each(function(i,el){
var href = $(el).attr('href');
$(el).attr('href', '#' + href);
});
}
在“/otherpage”目录中,我将创建index.php 文件包含:
<?php
include("../header.php");
include("content.php");
include("../footer.php");
?>
因此,如果它是 Google 机器人链接,则不会更改,机器人会抓取 http://example.com/otherpage (由 php 生成),如果它是真实用户,我只会将 content.php 加载到我的包装器通过ajax而不跳转。
有效果吗?
您的解决方案很有创意,旨在弥合使用 AJAX 提供良好的用户体验和保持 SEO 友好性之间的差距。然而,虽然它有潜力,但也有一些重要的考虑因素和潜在的陷阱:
它是如何工作的: 对于 Googlebot:
当 Googlebot 访问您的网站时,JavaScript 会检测到它是 Googlebot(使用 userAgent),因此不会修改链接。因此,Googlebot 会抓取原始 URL,这些 URL 提供具有适当内容的完整 HTML 页面,这有利于 SEO。 对于普通用户:
对于普通用户,JavaScript 将 href 属性修改为 AJAX 样式链接(例如,href="#/otherpage")。当用户单击链接时,它会通过 AJAX 动态加载内容,而无需刷新整个页面。 潜在问题: 用户代理检测:
不准确:用户代理检测并不完全可靠。虽然它可能适用于 Googlebot,但对于其他机器人甚至未来版本的 Googlebot 来说很容易失败。此外,某些机器人可能不会将自己标识为 Googlebot,从而导致潜在的 SEO 问题。 维护:依赖 userAgent 字符串可能会成为维护负担,尤其是随着浏览器和机器人的发展。 SEO 关注点:
片段标识符:URL 中的 # (href="#/otherpage") 不会发送到服务器,因此如果用户共享此 URL,他们可能只会共享
http://example.com/
,这并不代表预期的页面。这会对用户体验和搜索引擎优化产生负面影响。
AJAX 内容抓取:现代搜索引擎可以执行 JavaScript 并抓取 AJAX 加载的内容。然而,他们可能仍然更喜欢完整的、静态的 HTML 内容来建立索引。如果 AJAX 使用不当,可能会导致内容丢失或索引不正确。
渐进增强:
降级:理想情况下,如果 JavaScript 被禁用,您的网站应该正常降级。使用您当前的方法,如果用户禁用 JavaScript,他们将只能导航到完整页面,但会失去 AJAX 功能。 Google 的 AJAX 抓取指南:
预渲染:Google 建议使用服务器端渲染 (SSR) 或使用 Prerender.io 等工具向机器人提供完整的 HTML 快照,同时仍为用户提供 AJAX 体验。这确保了内容被正确索引,而不依赖于客户端检测。 更适合 SEO 的方法: 不要依赖用户代理检测,请考虑以下方法之一:
渐进增强:
完整链接:向所有用户提供常规链接(例如 href="/otherpage")。当页面加载时,使用 JavaScript 拦截对这些链接的点击并使用 AJAX 进行处理。 PushState:使用 HTML5 History.pushState() 方法更新浏览器地址栏中的 URL,而不会导致整个页面重新加载,因此用户仍然可以共享正确的 URL。 服务器端渲染(SSR):
渲染完整页面:在服务器上渲染包含 content.php 内容的完整 HTML 页面。当机器人或用户访问 URL 时,他们会得到一个完全渲染的页面。使用 JavaScript 在适当的时候通过 AJAX 加载内容来增强体验。 混合方法:
静态快照:使用工具生成动态内容的静态 HTML 快照,这些快照可以提供给机器人。这可确保机器人将内容视为静态 HTML,而用户则与动态、AJAX 驱动的网站进行交互。 结论: 您的方法在某些情况下可能有效,但它不是在 AJAX 驱动的网站上处理 SEO 的最强大或面向未来的方法。考虑使用渐进增强或服务器端渲染来确保用户和搜索引擎都拥有最佳体验。这将帮助您保持良好的 SEO 实践,同时提供流畅的用户体验。