这篇文章涉及视差 SEO 问题并提供解决方案。 如果您至少不时关注网页设计的趋势,您可能知道视差滚动是我们所说的风靡一时的很酷的事情之一。 看起来这种趋势不会很快消失。 也就是说,您需要确保谨慎使用每种网页设计趋势。 否则有一天你可能会因为人们不再在谷歌上找到你而大吃一惊。
你的观众真的喜欢它吗?
如果您正在创建或重新设计您的网站,并且实际上正在考虑为您的网站添加一些视差功能,请再想一想。 如您所知,您需要向网站访问者提供他们想要的东西,而不是您个人认为必要或很棒的东西。 您是愿意在您的网站设计中添加一些令人叹为观止的东西并失去潜在客户(流量),还是实际上为您的访问者提供他们想要的东西? 当然,有一些例子是公司创造了需求,然后用他们的产品来满足它——比如苹果公司——但这种情况并不经常发生。 再加上太多的风险。 因此,您想进行一项调查,看看在您的网站上使用视差滚动是否有意义。 如果这不是你能负担得起的,那就问问你的一些朋友和熟人他们对你的想法的看法。
如果您真的想在您的网站上添加一些视差滚动噱头,您可以在页眉或页脚中添加一些内容。 因此,它不会对您网站的性能产生太大影响。 如果您想扩展您的知识,您可以查看这篇解释如何使用视差滚动背景工具为您的网站创建简单效果的帖子。 你不应该有任何编程技能来做到这一点。
也就是说,您可能想知道您的网站会发生什么,以及如果您最终完全实施该效果,您应该注意什么。 所以,这是你需要首先考虑的。
体重增加
根据经验,视差滚动站点是使用一页模板创建的。 这意味着您的网站实际上是一个 HTML 页面,您可以对其进行修改以编辑您的内容。 这听起来很舒服,因为您不应该浏览大量文件,试图找到合适的文件来编辑那件小事。 不用说,这绝对是这方面的优势。
令人沮丧的消息是,您的网站将所有内容都放在一个文件中。 也就是说,当有人访问您的站点时,浏览器将一次性加载所有文本、图像和视频。 这将增加您网站的加载速度。 因此,您会得到一个包含大量内容的巨大文件。 这意味着您的网站变得越来越慢。
实际上,用户不喜欢速度慢的网站。 如果您的网站没有在 1-3 秒内加载,用户将放弃并返回到他或她的搜索引擎结果页面,以获取他或她试图查找的不同资源。
更重要的是,谷歌对慢速网站也不满意。 如果您的网站加载速度比 Google 喜欢的慢(超过 2-3 秒),您的目标关键字的排名就会更差。 因此,更少的搜索者会在 Google 中看到您的代码段。 这意味着您将获得更少的客户。 链的末端。 :)
有限优化
如果你还不够害怕,还有更多适合你的。 关键是您可以针对 1-3 个关键字优化网站的每个页面。 因此,如果您有 10 个页面,则可以针对 10-30 个关键字对其进行优化。 现在,如果您使用一页视差滚动设计,则您只能使用一页。 你猜怎么了? 这意味着您的网站只能针对 1-3 个关键字进行优化。 基本上,当您的网站设计阻止您进行适当的搜索引擎优化时,就会出现这种情况。
一个H1
在您网站的标题(H1 标签)中使用您的关键字也是最佳 SEO 做法。 问题是,您需要每页使用一个 H1 标签。 这又是数学。 您有一页,每页可以使用一个 H1 标签。 这是另一个限制。 每个站点只能使用一个标题标签!
另外,您很可能会在标题中使用一个关键字。 因此,您将无法针对所有 3 个关键字正确优化您的网站。
元资料
您的元数据也是如此。 由于您的站点最终是一个文件(页面),因此您只能使用一组元数据。 也就是说,您可以为整个网站使用一个元标题和元描述。 看起来您故意删除了广告位(Google 代码段),以便更少的人看到您的网站提供的内容。
残障响应
如果您还下定决心使用另一种网页设计趋势,例如响应式,您将不得不稍微掏出一点白色。 那是因为结合这两种效果需要网页设计师非常先进的技能。 而这样的设计师并不真正为 cookie 工作。 它可能真的要花你一条胳膊和一条腿。 因此,在您尝试实施视差滚动和其他在当今网页设计领域风靡一时的令人敬畏的事情之前,您需要考虑所有的利弊。
怎么修
也就是说,您仍然可以在您的网站上使用视差滚动。 你只需要确保你做的正确。 由于单页方法是错误的,我们将专门解决这方面的问题。 我将为您提供一些解决方案,您可以从中选择。 您需要选择在您的特定情况下效果最好的那个。
分离
鉴于您擅长 HTML/CSS,此修复不需要任何额外技能。 一般的想法是您可以在您的网站上使用视差滚动效果。 只需将您的内容分发到几个页面,以便每个页面(理想情况下)都可以针对一个关键字进行优化。 这些将是具有不错的谷歌排名的页面。 为了让搜索引擎和访问者都可以访问您的二级页面,请从您的主页放置指向它们的链接。 就如此容易。 您会喜欢这种方法不需要任何其他调整的事实,这与我在下面提供的解决方案不同。
免责声明
无论如何,我都不是程序员或网络开发人员。 我专门学习了 PHP、JavaScript 和 jQuery 的基础知识,以找出如何解决一页视差滚动设计导致的 SEO 问题。 更重要的是,我有一种预感,甚至还有更好的技术解决方案,我真诚地希望你也能提出一些有趣的想法。 我要说的是我的代码并不完美,我知道,但它解决了相关问题。
PHP 和外部文件
该解决方案认为您熟悉 PHP 的基本要素是理所当然的。 未恐慌。 你不应该是 PHP 大师。 实际上,只要您遵循有关如何将外部文件中的内容加载到主文件(页面)中的 PHP 教程,您就可以实现此解决方案。 如果您愿意,您甚至可以复制和粘贴。
对于初学者,您需要将 index.html 文件转换为 PHP 文件。 这里没有魔法。 只需将文件的扩展名更改为 .php 即可。 完成后,您可以使用 PHP 函数将内容从外部文件加载到全新的 index.php 文件(主页)。 假设您想从名为 about.html 的页面加载内容 首先,确保这样的页面存在并且它位于 index.php 文件所在的同一文件夹(目录)中。 现在您检查了所有内容,您可以使用以下代码从 about.html 文件中加载所有内容:
$stream = fopen("file.php","r"); // open the file and allow it to read stuff
$string = stream_get_contents($stream); // create a variable with content of your about.html file
echo $string; // display the content of the $string variable
fclose($stream); // and finally close the file you got that content from
正如您自己所看到的,这是一个非常简单的代码,可以让您很好地完成工作。 您可以将其复制并粘贴到 index.php 文件中要显示 about.html 文件内容的位置。
由于这会引发重复内容的问题(您的主页和外部文件将包含部分相同或相似的内容),因此您也需要注意该问题。 否则,您的网站可能会遇到主要搜索引擎的严重问题。
简而言之,这是解决方案:
一种。 rel=canonical 用于主页。 因此,谷歌将知道哪个是主页,哪个是次要页面。
湾。 阻止您的主页被索引。 您可以在 robots.txt 的帮助下做到这一点,您的主页将对搜索引擎变得不可见。
c.您主页上的独特内容。 此修复程序只会部分解决该问题,但就 Google 的理解方式而言,您的主页会更厚(好)。
JavaScript 和 jQuery
此外,如果您不喜欢在 PHP 中做事,您可以在 jQuery 的帮助下从外部文件加载内容。 优点是您不需要本地服务器来测试它。 另外,您将能够加载整个外部文件和其中的某些部分(特定 div 的内容)。
好消息是,与 PHP 解决方案不同,您不应该更改文件扩展名来实现 jQuery 解决方案。 您需要创建一个 HTML 文件,其中包含要加载到主页的内容 (index.hmtl)。 现在,打开您的 index.html 文件并在 head 部分添加以下代码:
<script src="https://davidwalsh.name/https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
它只是使您的文件能够在其中使用 jQuery。 此时,您应该创建一个段落,以显示外部文件中的内容。 我将在我的段落中添加一个 ID 并将其称为“关于”。 只是因为我将从 about.html 页面加载内容。 因此,该代码应该类似于以下代码:
<p id="about"></p>
您可能会对开头和结尾段落标签之间没有任何内容这一事实感到困惑,但应该是这样的。 我将从外部文件动态加载内容。
现在只需在 index.html 文件中的