我犯的SEO错误以及我是如何修复它们的

在大约一年的时间里，从0到9万的印象，遵循搜索引擎优化的良好实践是帮助我的博客和读者增长的关键。然而，当我开始的时候，我犯了一些可怕的错误，一些懂SEO的人几乎可以说是自我破坏。

因此，我想用这篇博文来回顾一下在处理SEO和Gatsby时给我和其他许多人带来的无数令人头疼的3个问题，以及我采取的解决这些问题的步骤。我希望这将有助于解决你目前在你的精彩博客或投资组合上可能存在的一些问题，而你甚至都没有意识到它们，启动你的受众增长，并在🚀上被发现。

你可能对SEO的幕后工作知之甚少。至少在我看来，它看起来像是一门晦涩难懂、前后矛盾的伪科学，只有营销人员才能理解(剧透提醒)。但是，在获得@monicalent的精彩课程bloggingfordevs之后，它让我更清楚地了解了与SEO相关的内部工作原理和良好做法。引用她第一份时事通讯中的话。

SEO是一种确保搜索引擎能够理解您的页面是关于什么的一种方式，它包含来自权威来源的高质量的最新信息，并将回答搜索者心中的问题。

有了好的SEO，搜索引擎可以知道你的内容是什么，发现你写的所有博客帖子，如果你幸运的话，还会把你弹到给定关键词的搜索结果首位。此外，在Twitter和Reddit上分享我的最新文章只会导致几天的流量激增，而SEO可以帮助你在网站上获得更稳定的流量，并保持更长的时间。后者是我最长时间缺乏的，尽管我已经正确地设置了我的Gatsby网站和SEO组件(或者至少我是这么认为的)。

Gatsby的文档中有一个写得非常好的章节，介绍如何构建一个SEO组件来帮助您入门。然而，单凭这一点并不足以让我的博客在早期被发现，正如你在下面的图表中看到的那样，它代表了我自从开通这个博客以来每天收到的印象数量：

在第一年的大部分时间里，我的博客每天得到的印象不到50次。今天，在解决了我将要谈到的问题之后，我每天获得超过1000次印象，而且还在增长！当然，搜索引擎优化不是这里唯一的组成部分，我今年也创造了更多的内容，并选择了更好的方式来推广它们，但它仍然是你上面看到的增长的重要驱动力。

你重新阅读这篇文章的博客是与Gatsby一起建立的，并托管在Netlify上。遗憾的是，同时使用这两个工具而不注意URL末尾不一致的尾部斜杠/可能会导致一些不希望看到的结果。

其中一个结果是，当读者导航到我的文章时，我的分析中记录了大量301个重定向。在我的博客上，指向我的博客帖子的链接通常是这样的：/post/Learning-in-public，但是当读者点击它时，Netlify会在它的末尾附加一个斜杠，从而重定向用户。

我的朋友们，这对SEO来说是非常不好的。它影响了我网站上几个不相关的领域，例如：

Opengraph图像或Twitter卡片呈现不一致：读者有时会共享链接，不管是否带有尾随斜杠，这将使一些服务很难获得适当的元数据，从而呈现一个简单的链接，而不是适当的预览卡。

网站地图中的无效URL：我的网站地图是在构建时自动生成的，基于我的网站的URL和页面使用Gatsby插件。由于我的URL末尾没有尾随斜杠，它将生成没有它们的网站地图，一旦上传到Google搜索控制台，就会导致大量关于无效URL的警告，因为Google引用了带有尾随斜杠的URL。

因为谷歌已经用斜杠引用了我的博客帖子，所以我决定使用选项2。

这一变化可能看起来微不足道，但它导致了许多奇怪的问题突然消失。此外，在解决我即将开始谈论😄！的问题之前，解决这个问题对我来说很重要。

如果您关注我已经有一段时间了，您可能已经开始阅读Medium上的我的内容了。大约一年前，当我写下这些话的时候，我创办了blog.maxeherkel.com。本网站上所有可以追溯到2019年8月之前的内容最初都是在Medium上发布的。

最重要的是，当我把文章移植到这个网站时，我没有编辑它们，也没有删除中等的文章。这导致了重复的内容，这意味着我新部署的博客在谷歌排名方面与Medium在相同的关键词、相同的内容上来自同一作者展开竞争。

谢天谢地，有一种方法可以避免这种情况：设置规范的URL。这些URL放在您的博客帖子源代码的<；head&>中，并指定此帖子是包含该给定内容的原始帖子。

您需要将它们添加到您帖子的<；head&>。例如：<；link Rel="；Canonical"；href="；https://blog.maximeheckel.com/posts/learning-in-public/"；/>；

去你过去用过的任何有内容的第三方平台，把这个规范的URL添加到你帖子的设置页面中。我按照Medium上的这个指南更新了我以前的博客帖子。

当然，你不能做的第一步，直到你已经修复了任何潜在的尾随斜杠问题，你可能会有类似我刚才分享的问题。

如果您和我一样是Gatsby用户，那么您可能会尝试使用Gatsby-plugin-canonical-urls，它会在构建时将规范的URL添加到站点的HTML页面。

我尝试过，它始终无法放置正确的URL，特别是因为我的网站作为脱机支持有时会在我的HTML页面的<；head/>；中写入脱机后备URL。在您自己的SEO组件中以编程方式添加规范链接会更安全。有关示例，请参阅下面的代码片段。

注意尾部斜杠的一致性！不一致会导致排名不佳。

如果您联合您的内容，不要忘记添加规范的URL。直到今年年底，我基本上还在与我自己的媒体帖子竞争，错过了更多的流量和潜在的读者。

不要盲目信任Gatsby插件！尤其是那些在页面头部注入内容的页面。如果误用，它们可能会非常有害，甚至你都不知道。

检查您网站的页面来源！通过开发工具进行检查有时不足以确保元标记被正确注入到您的站点中。

确保您的meta标记不会因为依赖SSR时的客户端效应而被阻止呈现。

有疑问的时候：编写测试！我专门写了一整篇关于CI/CD的博客文章，在那里我展示了伟大的测试和伟大的CI/CD渠道如何帮助我保持内心的平静。

如果你想进一步了解如何建立受众，并了解更多关于创建内容和搜索引擎优化的知识，我强烈建议你关注Twitter上的@monicalent以及她的Devs博客课程。她是一位搜索引擎优化专家，我在一份时事通讯中学到了更多关于高效搜索引擎优化技术的知识！

您有任何问题、意见或只是想私下与我联系吗？别犹豫，在推特上给我拍个DM吧。