Return to site

网站seo-SEO的单页应用程序(SPA)生存指南

网站seo

· seo优化

SEO要注意:如果你还没有听说过单页应用程序(简称SPA),或者如果你一直不愿意学习这些用于创建网站的JavaScript方法,那么隐藏你的头脑的时间已经过去了。

查看Google网站管理员趋势分析师John Mueller的推文:

网络已经从简单的HTML转移 - 作为SEO推广你可以接受它。向JS开发人员学习并与他们分享SEO知识。JS不会消失。

约翰穆勒是对的。它不会消失。

通过Google趋势快速搜索“单页应用程序”,可以看出随着时间的推移,SPA受欢迎程度和知名度的急剧上升:

一些开发人员非常喜欢使用JavaScript框架和库来创建网站seo,并且SPA的流行度一直在稳步增长。

以Angular为例(也称为AngularJS和Angular.js)。

以下是Google趋势搜索Angular JavaScript框架,显示过去5年,趋势甚至认可应用程序平台 - 您可以看到过去几年的受欢迎程度大大增加:

在我作为专业搜索引擎优化的角色中,我不能说单页应用程序是规则而不是例外,当涉及到企业如何选择开发网站时,我正在越来越多的SPA运行,所以我的同事们。

是的,JavaScript确实从未用于网页内容交付。
是的,到目前为止,SPA确实对搜索引擎优化不太好。
是的,许多开发人员使用SPA快速创建网站时,他们确实需要花费更多时间来修复搜索引擎优化问题,而不是花费时间,如果他们只是将网站编码为首先通过HTML5传送内容。
但是,这一切都不重要,我的SEO朋友。

无论喜欢与否,SPA看起来都像是留在这里。

现在是时候停止思考关于SPA的坏想法,并试图让他们进入玉米地。

单页应用:阻力是徒劳的
我承认 - 有一段时间我希望我可以忽略单页应用程序,也许最终SPA最终会陷入过时网站趋势的垃圾堆中,例如<blink>标签,以及没有烦人的网页内容。侵入性广告中断。

编程和编码语言由开发人员采用生存和死亡。例如,如果由于一些奇怪的事件发生,世界各地的开发人员突然决定他们讨厌PHP并爱上了一些超酷的新服务器端脚本语言,那么PHP就会枯萎,甚至可能会死掉。

就是这么简单。

这就是为什么,例如,谷歌一直在推动加速移动页面(AMP)的超级难度 - 因为他们需要主要和广泛的开发人员采用AMP才能成功,而不是作为<blink>标签的室友。

与使用Angular,React或其他JavaScript框架或库创建网站的开发人员交谈。看看他们是否在谈论开发的简易性和速度以及如何调试并不像谣言那么难以点亮。

SPA受到开发人员的欢迎,而且这种受欢迎程度并未表现出任何放缓的迹象。

将脚趾浸入SPA中
从SPA的“幕后”看,一个显着的特点是服务器和浏览器之间来回向服务器发出的请求要少得多。

在初始JavaScript框架下载到浏览器和第一页面视图后,导航到第二页,第三页和第四页(等)页面时没有页面重新加载,因此单页面应用程序的“单页”部分。

在初始JavaScript框架下载和第一页面视图之后,查看的后续页面加载速度非常快,这完全是因为服务器和浏览器之间缺乏来自“传统”网站所需的来回请求。

这意味着非常好的用户体验,因为没有额外的页面加载意味着没有额外的等待时间。而且,众所周知,每个人都喜欢快速加载页面。

这里要记住的主要方面是,使用SPA,浏览器和服务器之间的来回少得多。

但JavaScript从未用于网页内容交付
在JavaScript开始在网站开发中常用之前,网页是静态的,并使用HTML创建。

使用启用JavaScript的网站开发人员为其网页添加交互性,例如当用户填写表单时弹出对话框,当用户点击文本或按钮时可扩展内容,或者当用户徘徊时使用下拉菜单他们的鼠标在导航元素上。

JavaScript允许的这些和其他用户交互功能可以在浏览器中执行而无需调用服务器。

因此,多年来,网站开发人员使用HTML进行内容交付,使用CSS进行布局和样式,使用JavaScript进行添加用户交互。

JavaScript对网站和开发人员的简历至关重要,这是一个公平的概括; JavaScript几乎无处不在。与完整的编程语言(如Java和C ++)相比,JavaScript并不难学。AJAX和jQuery中的“J”是 - 你猜对了 - JavaScript。

我只是提起这件事,因为回想起来,后见之明总是20/20,我们所有人都应该看到单页应用程序的兴起即将来临。

但是,考虑到玻璃半满,SPA的崛起为具有技术头脑的SEO提供了获得经验并在现在和将来变得更有价值的机会。

如果SPA可能导致SEO营销问题,那么为什么开发人员会创建SPA网站?
如果你从未做过任何编码,那么你可能没有意识到在开发人员的心态中是什么感觉。

以这种方式思考:如果你不得不坐下来编写代码来创建某个网页功能,你可以编写10行代码来实现这一点,或编写1000行代码,你会选择哪一行?您可以选择10行代码,对吧?

开发人员并不懒惰; 在编写代码时,他们更喜欢高效和优雅。我见过开发人员框架代码并将其挂在办公室墙上。有没有听说过“代码是诗歌?”

如果你想以最快的方式到达某个地方,你采取最短的路线,对吗?

单页应用程序框架和库,在原始摘要中,提供了允许开发人员快速有效地创建网站的构建块。

考虑到SPA允许开发人员有效地创建现代化的网站,可以快速加载页面,从而提供出色的用户体验,您可以看到为什么您可以选择SPA而不是从头开始编写HTML,CSS和JavaScript编码网站或者讨厌内容管理系统的限制。

SPA提供快速加载的用户体验,因为他们不需要像“传统”网站那样每次用户交互重新加载大多数资源,如HTML,CSS和脚本。这些文件只需要初始加载,然后只检索新数据并从服务器下载。

SPA主要通过将繁重的数据处理从服务器移动到浏览器来缩短响应时间。

鉴于SPA发展的优势,事后的想法,或者在网站开发过程中根本没有考虑因素,SEO推广可能是一个较小的考虑因素。任何长期从事数字营销的SEO专业人士已经看到了一个公司开发网站的常见情况,后来才提出问题“我们如何搜索这个东西?”

不是每个人都意识到搜索引擎优化应该在开始时进行烘焙,而不是在最后进行,或者他们的网站开发选择对SEO有明确的下游负面影响。

JavaScript库与JavaScript框架
解开SPA背后的技术最终将我们引向JavaScript库和框架的主题。

问一个开发人员“库和框架之间有什么区别”,你会得到很多有趣的答案。

你反复听到的一个最重要的区别是这样的:

您编写的代码调用库,而框架调用您编写的代码。

React和Angular都是SPA,但React在技术上是一个库,而Angular在技术上是一个框架。但是,您经常会听到人们将SPA技术称为“JavaScript框架”。

框架可以被认为是一种结构,就像预制房屋一样,它带有框架,干墙,管道和电线,所有你需要做的就是添加电器,窗户和覆盖物,地板,油漆等。

可以将库视为包含一组随时可用的预构建工具和功能的地方。您可以在代码中调用特定函数的库。

您可以看到,使用框架和/或库启动Web开发项目可以简化流程,而不是从头开始编写创建网站所需的所有代码。

单页应用程序的常见SEO问题
有很多关于Google在抓取和索引编制方面能够处理JavaScript的问题。

抓取和索引对排名至关重要。

Google在一个非常快速的过程中使用名为Googlebot的软件发现网页,这个过程通常称为“抓取”或“抓取”,在此过程中,它会下载找到的HTML文件,提取链接并同时访问它们,然后将下载的资源发送给索引器。

但是当谈到基于JavaScript的单页面应用程序网站时,这个过程会变得有点复杂。

这就像上面提到的那个过程,但是有一个延迟和额外的步骤,因为索引器的一部分必须通过解析和执行JavaScript来做一些繁重的工作,然后找到的新链接必须传递回爬行器以查看然后送回索引器; 你可以看到,由于JavaScript,效率较低。

SEO不仅仅是拥有“精彩内容”并且获得高质量的链接; 这也是为了让您的网页易于被谷歌等搜索引擎发现,并让他们通过内部链接了解哪些页面比其他页面更重要。

“传统的”基于HTML的网站更容易抓取和索引,并且通过扩展,更容易排名。Google可以轻松获取所有链接,并通过内部链接了解网页的重要性。

基于JavaScript的SPA网站让Google的生活变得更加困难,而且一些测试似乎表明,在依赖JavaScript进行索引时可能存在缺点。

谷歌显然愿意在这里做更多繁重的工作,而且在我看来,这表明他们会随着时间的推移而改进,而不是在未来向网站管理员宣布他们已经决定他们不想费心去做所需的额外工作。抓取并索引基于JavaScript的网站。

与发现链接的额外工作相关的另一个潜在的SEO问题是Google可能在评估这些页面的链接公平性方面存在问题。

很可能在时间上,至少一些流行使用的SPA框架将改进渲染过程,使Google更容易抓取和索引,甚至可能使其与“传统的”基于HTML的网站相提并论。

但与此同时,我们就在那里,那些测试过谷歌处理基于JavaScript的网站的能力的人已经证明了Google的能力不一致,而且我们仍然处在那些经常开发SPA的地方必须使用变通方法,例如使用prerender.io和Angular将完全呈现的页面提供给爬虫。

另一个解决方案是同构JavaScript,有时称为“通用JavaScript”,其中页面可以在服务器上生成并发送到浏览器,可以立即呈现和显示页面。这解决了SEO问题,因为Google不必在索引器中执行和呈现JavaScript。

无头Chrome是谷歌工程师最近提出的另一种选择,它也提到了另一个名为Preact的解决方案,该解决方案附带服务器端渲染。

创建格式正确的XML Sitemap并将其提交给Google Search Console 也是一个好主意。

现在,如果您是SEO帮助客户使用SPA启动或重新开发网站,那么似乎没有任何单一的解决方案或逐个数字的方法来解决您可能遇到的问题。

它归结为有效地传达所需的正确最终结果,并根据所部署的库或框架处理问题。

一些重要的单页应用程序资源
一些超级锐利的SEO和开发人员撰写了有关单页应用程序的有用文章,这里有一些我喜欢的资源,我认为你会发现有用的:

Tomasz Rudzki在这里写了一篇很棒的文章; 标题说明了一切:JavaScript SEO的终极指南
观看此视频由Google高级网站管理员趋势分析师John Mueller撰写 - 他提供了一个非常棒的单页应用程序概述以及Google如何对待它们
Justin Briggs非常熟悉搜索引擎优化和JavaScript,并编写了2篇你应该查看的内容:审计搜索引擎优化的SEO和JavaScript的搜索引擎优化的核心原则
Richard Baxter写了一段时间,但它仍然非常值得您花时间:AngularJS中的JavaScript框架SEO基础知识
Critchlow是否会分享这篇优秀文章:分裂测试JavaScript的早期结果
当您点击Barry Adams的JavaScript和SEO:最终资源列表时,请抓住您的帽子
如果你的时间有点短,这是一个很好的快速阅读:单页应用程序的SEO注意事项
我绝对建议您从Angular大学阅读这篇文章:Angular Single Page Applications(SPA):有什么好处?
这篇微软文章不适合SEO,但它是一个快速而有用的读物​​:在传统Web应用程序和单页应用程序(SPA)之间进行选择
这也是Johann Wagner对一些不同SPA类型的相对快速的阅读
最后,我强烈建议您抽出时间阅读本文,这是一个非常好的概述:单页应用程序:何时以及为什么要使用它们
最后的想法
单页应用程序正在迅速发展,Web技术领域也是如此。值得专业的SEO尽可能熟悉单页应用程序,还有加速移动页面,渐进式网络应用程序,内容管理系统,以及网站从头开始编码的技术。

我对情况的看法是,SPA和Google处理基于JavaScript的网站的能力将会加快,因为所涉及的利益相关者都知道SPA现在具有明确的SEO缺点。

完全有可能在一年左右的时间内,最受欢迎的SPA将附带内置的SEO解决方案,因为对SEO友好的基于JavaScript的网站的需求的认识正在增长。但是不能保证很快就会发生这种情况,所以我对今天的SEO的建议就是对这种技术趋势感到兴奋和拥抱。

All Posts
×

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!

OKSubscriptions powered by Strikingly