51工具盒子
您能想象没有方向盘的汽车或没有扬声器的音响吗？
这就是许多视差和无限滚动网站在设计时没有考虑搜索引擎优化 (SEO) 时的样子。它们是不完整的。
这就是为什么我开发了这个小指南来将您的 SEO 集成到您的视差或无限滚动单页网站。您可以跳过痛苦的学习曲线，避免反复试验，并有望跳过所有令人沮丧的挑战。
但在我们开始之前，让我们先弄清楚一些技术术语，以便我们都在同一页上。
什么是视差和无限滚动技术？ {#what-are-parallax-and-infinite-scrolling-techniques}
Parallax Scrolling Technique是网页设计中使用的一种特殊滚动技术，使背景图像比前景中的内容移动得慢，从而给用户一种 3D 类型的感觉。这种技术被认为是目前网页设计中最热门的趋势之一。
Infinite Scroll Technique本质上是从后续页面预取内容，并将其直接添加到用户当前的活动页面。谷歌为高级网站管理员发布了一篇详细的支持博客文章，其中强调了使用无限滚动技术时搜索友好的建议。
根据谷歌的说法，"无限滚动页面在转换为分页系列时变得"搜索友好"------每个组件页面都有一个类似的 <title>，在 <head> 中声明了 rel=next/prev 值。"
一页视差设计和无限滚动技术的 3 个主要 SEO 挑战 {#3-main-seo-challenges-of-one-page-parallax-design-and-infinite-scrolling-techniques}
1.站内优化仅限于一页。不幸的是，设计为长滚动单页网站的网站只有一个元标题、一个元描述、一组结构化数据标记和一个 H1 标题；因此，在搜索引擎结果页面上对多个页面和关键字进行排名的机会较少。
这将对网站的排名产生负面影响。搜索引擎依靠元数据和页面内容中包含的关键字在搜索结果页面 (SERP) 上返回有关它的正确信息。一句话：您拥有的页面越多，您的网站就越有可能在针对不同目标关键字的搜索结果页面上被发现。
2.您只能针对一个主要关键字优化页面。搜索引擎更喜欢您网站的每个页面都专注于特定的主要关键字（主题），这样他们的漫游器就可以抓取每个页面并确定该页面的内容。
- 在视差设计的网站上，页面加载时间可能会受到显着影响。自 2010 年以来，搜索引擎将"网站速度"添加到其长长的排名因素列表中，这些因素会影响网站在 SERP 上的表现。页面加载时间越长，网站在 SERP 上的排名越低。
基于组合方法的解决方案 {#solution-based-on-a-combination-approach}
该解决方案主要基于渐进增强的、基于 Ajax 的方法。这个想法是，当用户通过滚动页面到达它或通过单击导航元素到达它时，不同的"子页面"（意味着长滚动页面的部分）通过 Ajax 动态加载。同时，寡妇浏览器上的 URL 地址被"改变"，新的"子页面"有一个新的、唯一的 URL。
那么我们如何才能做到这一点呢？
通过将长滚动一页的内容分成不同的部分，每个部分代表一个现有的 HTML 文件（页面），将您的主页分成多个子页面。
示例：具有三个不同部分的主页与三个不同的现有 HTML 文件（页面）相关。这些页面应该使用自己的元数据和结构化标记等进行关键字优化。
- 将指向这些子页面的 URL 保留在您的主页上，然后使用 Ajax 脚本和清晰标记的导航元素在用户到达代表子页面的特定部分时在用户浏览器中动态启动 URL。
- 充分利用rel=canonical标签，避免长滚动页面上的子页面部分与调用这些子页面内容的页面文件之间出现重复内容。
JavaScript 和 jQuery 教程 {#javascript-and-jquery-tutorial}
这是关于如何根据最佳搜索引擎优化 (SEO) 实践使用视差滚动技术设计单页主页的教程。
使用此解决方案可在设计和现场优化方面提供更大的灵活性。这就是为什么我现在将其视为我的首选解决方案。
第 1 部分。将您的主页分成多个子页面并调用它们的内容
-
通过适当划分页面内容来确定主页设计的哪些部分将拥有自己的 URL。想象一下，有一个页面有多个子页面，看起来像面板（部分）。
-
通过在index.html文件的标签之间添加以下代码，在索引文件中添加并"打开" jQuery：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
3.使用jQuery标记创建ID并将其添加到要从主页 ( index.html ) 加载的页面文件的内容片段：
例如： <p id="servicepage">应该在长滚动的"一页"设计中显示的内容放在这里</p>
- 现在我们要做的是告诉jQuery加载子页面的内容（例如service.html）。为此，您必须在 index.html 页面的结束标记之前添加以下代码：
$('#servicepage').load('service.html', function() { //alert('Load was performed.'); });
基本上，上面的代码将插入您在段落标记<p id="servicepage"></p>之间指定的service.html文件的内容。
第 2 部分。更改用户浏览器窗口中子页面的 URL
为此，您必须向单页滚动网站添加一些 JavaScript 代码，以便：
-
将侦听器绑定到向下滚动到特定部分（子页面）的主导航元素。
-
检测给定部分（子页面）何时在可见窗口中突出显示，并在出现时更新浏览器历史记录。
-
当页面正在（重新）加载或用户点击前进/后退按钮时，监听 URL 的变化。发生这种情况时，您应该使用脚本来触发适当的剖面视图。
重要提示： Google 和 Bing 都指出pushState() JavaScript方法是指示 Ajax 加载应该被索引并被视为唯一页面的首选方法。
此外，在 Bing 网站管理员博客上："此 pushState 函数允许 Web 开发人员使用 JavaScript 更改整个显示 URL------域、端口和方案 (http://) 部分除外。它还允许 Web 开发人员修改页面标题和会话历史信息。这种能力是 AJAX SEO 的游戏规则改变者。"
技术考虑
如果您的用户禁用了 JavaScript，他们仍应点击进入子页面。您甚至可以使这些页面动态化，因此仅当页面未通过 Ajax 调用访问时才会显示页眉和页脚等元素。
执行结果
一旦您实施并集成了所有必要的编码并相应地重组了您的 URL，您最终应该为您网站的不同内容生成单独的文件。所有这些文件都针对您要为其排名的特定关键字进行了 SEO 优化，并且它们具有独特的实时 URL 地址、元数据和结构化标记等。
再次提醒我为什么我们必须保持子页面 URL 有效？好吧，因为我们可以使用搜索引擎可以在其 SERP 上显示的元数据和结构化标记来优化文件。当用户在搜索引擎上找到 URL 并单击时，他们应该到达主要长滚动页面中内容被分段的特定部分。
通过实现这一点，您将能够使用单页视差和无限滚动设计，同时在主单页站点设计中仍然有多个子页面形式的页面。因此，您将拥有多个 URL，并能够在整个站点的多个标题和元数据中使用特定关键字。
SEO 优化的单页视差滚动网站案例研究 {#case-study-of-a-well-seo-optimized-one-page-parallax-scrolling-site}
这是一个很好的例子，说明当这种技术得到很好的实施时可以实现什么：
-
访问以下网站 http://flowerbeauty.com/（Drew Barrymore 的彩妆系列）。
-
查看当您开始向下滚动或单击顶部水平菜单时浏览器上的 URL 会发生什么情况，主要是当您向下滚动时。
-
只需复制一个网址，打开一个新的浏览器窗口并将其粘贴到地址栏中......会发生什么？那么，您将直接进入与该特定 URL 相关的特定部分。
-
现在，打开 Google.com 并将其粘贴到搜索框中：站点：http://flowerbeauty.com/
查看每个子页面如何具有其独特的元标题和描述。他们显然可以优化元数据，使它们更吸引人并优化关键字。但至少他们在 SEO 结构方面做得很好，他们建立了一个设计精美的单页滚动网站！
UX 和 SEO：现实一点 {#ux-&-seo:-let’s-be-realistic}
设计和 SEO 技术随着用户的在线行为和搜索引擎功能不断发展。所以请记住，有许多预构建的jQuery库允许上面教程中描述的不同功能，这就是为什么您必须在这方面进行自己的尽职调查。
