如果你使用Angular来增强你的网站,那么当涉及到搜索引擎优化时,你就需要跨越一个额外的障碍。幸运的是,Angular Universal很容易跳过它。
请记住,“简单”在这里是一个相对的术语。这涉及到相当多的技术魔法。
您几乎肯定需要一个开发团队的参与。
但一旦完成的产品交付,你的网站将提供优化的页面,搜索引擎将很容易找到和索引。
在这个指南中,我将解释Angular Universal以及它对市场营销人员的重要性。
搜索引擎优化的问题
Angular对于交付模块化的、用户友好的web应用程序来说是一个非常棒的框架。不幸的是,它有点敌视搜索引擎优化。
这有两个原因。
首先,Angular很大程度上依赖于脚本来交付内容。因此,一些搜索机器人无法“看到”用户看到的内容。
看一看Angular Universal文档。毫无疑问,这个页面是用Angular呈现的。
向下滚动,您将看到相当多的内容。你会认为它都是可索引的。
不一定。右键单击页面并从出现的上下文菜单中选择“查看页面源”。
只有100行源代码。在那里你看不到你正常浏览页面时看到的内容。
简而言之,这就是Angular的问题所在。人类访客将看到内容,但搜索机器人将看到源代码。
而且源文件没有内容!
还有另一个SEO问题:速度。Angular应用通常加载速度不快。
有些网站在显示主页之前会出现几秒钟的空白屏幕。这可能会导致游客失去耐心而离开。
网站速度是手机排名的一个因素,所以如果你的网站在手机平台上加载速度不够快,你的排名就会受到影响。
但谷歌表示……
谷歌声称它的机器人可以索引脚本驱动的网站。有很多证据可以支持这一点,但这并不意味着你可以在优化Angular网站时避免付出额外的代价。
首先,谷歌并不是唯一的搜索引擎。如果你想让你的Angular应用在Bing和DuckDuckGo上排名,你必须采取措施来实现这一点。
接下来,可能是谷歌可以索引一些Angular站点,但不能索引你的站点。不是所有的Angular应用程序都是一样的。你的可能是谷歌索引算法的例外。
根据我的经验,从HTML到Angular的网站在大多数情况下会减少搜索引擎带来的大量流量。事实上,在过去的一年里,我有三个客户来找我,因为Angular的原因,我们不得不重新修复网站。
有解决方案
幸运的是,有一些方法可以使你的Angular站点SEO友好。
一个比较流行的选项是使用动态渲染。这时您可以使用Puppeteer这样的工具来生成静态HTML文件,web爬虫程序可以更容易地使用这些文件。
然后,配置你的web服务器,当用户浏览正常的Angular应用时,引导搜索机器人到预先呈现的页面。
这是一个不错的解决方案,但仍然没有解决速度问题。为此,你可能会想使用Angular Universal。
什么是Angular Universal?
Angular Universal在服务器上运行web应用,而不是在浏览器上运行。
这是一个重要的区别。通常,Angular应用是客户端应用。
搜索机器人的问题是,它们并不总是像浏览器那样“处理”客户端代码,当它为你提供一个网页时。这就是为什么你会看到Angular Universal documentation页面与其源代码之间的差异。
Angular Universal处理服务器端呈现(SSR)。它预先将HTML和CSS内容呈现给用户。
这意味着用户将加载静态HTML页面,而不是客户端代码。因此,页面加载速度会更快。
此外,因为它是静态HTML,搜索机器人可以索引内容。
每个人都赢了。
为什么它很重要
如果你是数字营销的一员,那么你已经知道大部分的战斗都是为了获得在线曝光。这就是为什么你要联系有影响力的人,在社交媒体上发布更新,优化你的网站以获得更好的排名。
简单地说:如果你的网站不能被索引,你的网站就不能被排名。如果Angular正在为你的网站提供动力,你需要采取额外的步骤来确保它的内容出现在搜索引擎中。
这就是为什么你需要一个Angular通用的解决方案。
当然,它的缺点是要花钱。你将需要雇佣一个合格的开发团队添加SSR到你的网站。
如果你的网站在与你的利基相关的关键搜索关键词中排名靠前,那么这笔费用将远远超过它本身。
如何在Angular Universal上运行Angular应用程序
如果您喜欢亲自动手编写代码,或者只是想节省开发成本,您可以自行部署服务器端应用程序。
在你做这些之前,你最好对Angular有一个基本的了解,命令行界面(CLI), TypeScript,