你能想象没有方向盘的汽车或没有扬声器的声音吗？
这是许多视差和无限滚动网站在设计中没有考虑搜索引擎优化 (SEO) 时间的样子。它们不完整。
这就是为什么我开发了这个小指南来帮助你 SEO 将其集成到您的视差或无限滚动单页网站中。您可以跳过痛苦的学习曲线，避免反复测试，并有望跳过所有令人沮丧的挑战。
但在我们开始之前，让我们先找出一些技术术语，这样我们都可以在同一页。
视差和无限滚动技术是什么？
Parallax Scrolling Technique是网页设计中使用的一种特殊的滚动技术，使背景图像比前景中的内容移动得更慢，从而给用户一种 3D 类型的感觉。该技术被认为是网页设计中最受欢迎的趋势之一。
Infinite Scroll 本质上，Technique从后续页面提取内容，并直接添加到用户当前的活动页面。谷歌向高级网站管理员发布了一篇详细的支持博客文章，强调了在使用无限滚动技术时搜索友好性的建议。
据谷歌介绍，“无限滚动页面在转换为分页系列时变得“搜索友好”——每个组件页面都有类似之处 <title>，在 <head> 中声明了 rel=next/prev 值。”
一页视差设计和无限滚动技术 3 个主要 SEO 挑战
1.站点优化仅限于一页。不幸的是，设计为长滚动单页网站的网站只有一个元标题、一个元描述、一组结构化数据标记和一个 H1 标题；因此，在搜索引擎结果页面上排名多个页面和关键字的机会较少。
这将对网站的排名产生负面影响。搜索引擎依赖于搜索结果页面中包含的元数据和关键字 (SERP) 返回关于它的正确信息。总之：你拥有的页面越多，你的网站就越有可能在搜索结果页面上找到不同的目标关键字。
2.您只能优化主要关键字的页面。搜索引擎更喜欢你网站的每个页面，专注于特定的主要关键字（主题），这样他们的漫游器就可以捕捉每个页面并确定页面的内容。
3. 页面加载时间可能在视差设计网站上受到显著影响。自我 2010 多年来，搜索引擎将“网站速度”添加到其长排名因素列表中，这将影响网站 SERP 性能。页面加载时间越长，网站就在那里 SERP 排名越低。
基于组合方法的解决方案
该解决方案主要基于逐步增强和逐步增强 Ajax 方法。这个想法是，当用户通过滚动页面或单击导航元素到达时，不同的“子页面”（意味着长滚动页面的部分）通过 Ajax 动态加载。同时，寡妇浏览器上 URL 地址被“改变”，新的“子页面”有一个新的、唯一的 URL。
那怎样才能做到这一点呢？
将长滚动一页的内容分成不同的部分，每个部分代表现有的部分 HTML 将你的主页分成多个子页面的文件(页面)。
例子：主页有三个不同的部分和三个不同的现有部分 HTML 文件(页面)相关。这些页面应该使用自己的元数据和结构化标记来优化关键字。
-
将指向这些子页面 URL 保留在你的主页上，然后使用它 Ajax 当用户到达代表页面的特定部分时，脚本和清晰标记的导航元素在用户浏览器中动态启动 URL。
-
充分利用rel=canonical标签，避免长滚动页面上的子页面部分与调用这些子页面内容的页面文件之间的重复。
JavaScript 和 jQuery 教程
这是关于如何根据最佳搜索引擎优化 (SEO) 利用视差滚动技术设计单页主页的教程。
使用此解决方案可以在设计和现场优化方面提供更大的灵活性。这就是为什么我现在认为这是我的首选解决方案。
第 1 部分。将您的主页分成多个子页面并调用其内容
1. 主页设计的哪些部分将通过适当划分页面内容来确定。 URL。想象一下，有一个页面有多个子页面，看起来像面板(部分)。
2. 通过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>
4. 现在我们要做的就是告诉JQuery加载子页面的内容(比如servicee).html）。为此，你必须在那里 index.html 在页面结束标记前添加以下代码：
$(‘#servicepage’).load(‘service.html’, function() { //alert(‘Load was performed.’); });
基本上，上面的代码会插入你的段落标记<p id=”servicepage”></p>在指定的service之间.html文件的内容。
第 2 部分。更改用户浏览器窗口中子页面 URL
为此，您必须向单页滚动网站添加一些 JavaScript 代码，以便：
1. 将侦听器绑定到向下滚动到特定部分(子页)的主导航元素。
2. 检测给定部分(子页)何时突出显示在可见窗口，出现时更新浏览器历史记录。
3. 当页面正在(重新)加载或用户点击前进/后退按钮时，监控 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 优化单页视差滚动网站案例研究
这是一个很好的例子，说明当这项技术得到很好的实施时，它能实现什么：
1. 访问以下网站 http://flowerbeauty.com/（Drew Barrymore 化妆系列)。
2. 查看浏览器上的浏览器，当您开始向下滚动或单击顶部水平菜单时 URL 主要是当你向下滚动时，会发生什么？
3. 只需复制一个网站，打开一个新的浏览器窗口，并将其粘贴到地址栏中。。。会发生什么？然后，您将直接进入特定的网站 URL 相关特定部分。
4. 现在，打开 Google.com 并将其粘贴到搜索框中：站点：http://flowerbeauty.com/
查看每个子页面如何有其独特的元标题和描述。它们显然可以优化元数据，使它们更有吸引力，并优化关键字。但至少他们是 SEO 他们在结构上做得很好，建立了一个设计精美的单页滚动网站！
UX 和 SEO：现实一点
设计和 SEO 随着用户在线行为和搜索引擎功能的不断发展，技术不断发展。因此，请记住，上述教程中描述的不同功能有许多预构建的jQuery库，这就是为什么您必须在这方面进行尽职调查。
