网站开发人员的SEO基本指南(附代码)

140 阅读9分钟

网站开发人员的SEO基本指南

网络开发者的责任比仅仅设计和开发一个应用程序更广泛。除了为应用程序添加正确的功能集外,你还必须采取积极的行动,以确保用户会接受它。

照顾SEO是属于这个类别的东西。

如果你想让你的应用程序在搜索引擎排名中表现良好,那么在开发应用程序时加入SEO技术是每个网络开发者必须要做的事情。

这份针对网络开发者的SEO基本指南将让你在不到10分钟的时间内了解到你在开发网络应用时应该使用的最新SEO技术。

首先,对于那些不完全熟悉SEO概念的人来说,让我们来了解一下基础知识。


什么是SEO,为什么你需要它?

SEO是搜索引擎优化的意思。这个词本身就给出了SEO到底是什么。

当你在浏览器的搜索框中输入一些搜索关键词时,搜索引擎必须决定如何显示结果,哪些网页列在前10个结果中,哪些是下一个。

如果你想吸引那些正在寻找与你所提供的内容相似的用户,尽可能排在结果列表的顶部是你让他们访问你的网站的最佳选择。

搜索引擎算法使用它所储存的关于每个网页的数据来决定哪些网页提供的内容最接近用户的关键词所要寻找的内容。

搜索引擎优化的目的是使搜索引擎算法相信你的网页是拥有用户正在寻找的内容的网页。

除了网页的内容外,排名算法更愿意将提供最佳用户体验的网站显示在结果页的顶部。

将这两个要求结合起来,你就会得到对网站开发人员的需求,他们在开发过程中会照顾到网站的SEO方面。

作为一名开发人员,你的责任在于SEO的技术方面,这需要对代码进行一些修改、添加和调整,以实现优化。

现在,基础知识已经涵盖了,让我们开始去了解网站开发人员的基本SEO技巧。


添加相关的HTML元标签

搜索引擎爬虫会查看网页上的某些HTML标签,以确定它所提供的内容类型。与SEO最相关的两个标签是标题和描述标签。

如果你自己编写一个网站的元标签,你需要考虑关键词的作用。

什么是关键词?

在搜索引擎方面,关键词是用户在浏览器的搜索框中输入的阶段。

为了把搜索引擎的用户吸引到你的网页上,你首先需要确定寻找与你所提供的内容类似的用户正在搜索的关键词。

一旦你确定了相关的关键词,你就应该在网页的内容中使用它们。

使用确定的关键词的最重要的地方是网页的标题标签和H1标签。

你也应该在H2和其他标题和段落内使用这些关键词。但是,它们对搜索引擎的排名算法的影响要比首先提到的那些要小。

要注意不要在网页上过度使用关键词。排名算法认为过度使用关键词是试图误导算法,并因此而对你进行处罚。

关键字与单词的良好比例是多少?这是个百万美元的问题。

标题标签

在标题标签中放置关键词的最有效位置是其开头。如果这不可能,就在标题内的任何地方使用关键词。

一个经过优化的标题标签不应超过60个字符,包括空格和其他特殊字符:

<title>Introduction to SEO for beginners</title>

元描述标签

描述标签对排名算法的结果没有什么权重。但是,由于你提供的描述会在SERP上显示给用户,让他们了解网页上的内容,所以它的编写应该是为了迫使用户点击你的网页链接:

<meta name="description" content="A short description that describes the content in the web page">

Robots.txt文件和robots元标签

使用robots.txt文件来告诉搜索引擎不要抓取文件中指定的网页。通常情况下,阻止爬虫从某一网页上爬行,是为了阻止爬虫的请求压倒应用程序的服务器。只有在减少发送到服务器的请求数量对网页性能至关重要的情况下才这样做。

你也可以阻止对网站上不重要的页面的抓取。

你可以使用robots.txt文件来防止网页被谷歌或类似的搜索引擎收录。但这并不完全成功。如果有另一个页面链接到当前页面,它仍然可能被索引。

如果你想一劳永逸地消除一个页面被索引的情况,请在该页面的HTML代码中添加noindexrobots元标签:

<meta name="robots" content="noindex">

关注和不关注链接

爬虫通常会抓取它已经在访问的页面中的链接页面。

有时,你可能想阻止一个被链接的网页与你的网站相关联,或者不从当前页面中抓取它。在这种情况下,你可以传递nofollow作为rel属性的值:

<a href="https://example.com" rel="nofollow">

然而,谷歌宣布,自2020年起,他们只把nofollow作为一种提示,而不是一种规则。因此,使用nofollow只会暗示谷歌你不希望被抓取的链接页面;谷歌可能会也可能不会决定按你的意愿行事。

如果你不希望爬虫跟踪你的任何链接,你可以在你的元机器人标签上用一行字指示它们:

<meta name="robots" content="nofollow">

结构化数据

你可能已经看到,有时,搜索结果页是如何以特殊格式显示结果的。例如,如果你在谷歌上搜索 "意大利面食谱",结果页会显示带有不同食谱页面链接的特殊卡片:

谷歌上的搜索结果卡的例子

谷歌和大多数其他搜索引擎都使用网页中提供的结构化数据来检索数据,以显示像这样的特殊功能。

用于编写结构化数据的词汇大多类似于schema.org中定义的词汇。然而,你应该参考搜索引擎的文档,看看它所接受的确切格式。如果你正在为谷歌进行优化,你可以使用谷歌的丰富结果测试来测试和验证你的结构化数据。

现在,让我们看看如何在我们的网页上使用结构化数据,向谷歌提供有关其内容的正确信息。

如果我们的网页是一个菜谱页面,你可以使用以下以JSON-LD格式编写的结构化数据,来提供菜谱的名称、作者、评分和其他相关数据:

<html>
  <head>
    <title>Italian Pasta Recipe</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Recipe",
      "name": "Italian Pasta Recipe",
      "author": "Jane Smith",
      "image": "https://cdn.pixabay.com/photo/2016/12/26/17/28/food-1932466_960_720.jpg",
      "description": "An easy Italian pasta recipe.",
      "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.5",
        "reviewCount": "123",
        "bestRating": "5",
        "worstRating": "3"
      },
      "prepTime": "PT30M",
      "totalTime": "PT1H",
      "recipeYield": "4",
      "nutrition": {
        "@type": "NutritionInformation",
        "calories": "430 calories"
      }
    }
    </script>
  </head>
  <body>
  </body>
</html>

页面加载速度

页面加载速度是向用户提供更好的用户体验的主要方面之一。

谷歌在2018年进行的一项调查发现,当页面加载时间从1s到3s时,跳出的概率增加了32%,当页面加载时间从1s到5s时,跳出的概率增加了90%。

由于页面速度对用户体验的重要性,谷歌开始在其排名算法中把它作为一个排名因素。现在,页面加载速度的提高是你的网页在谷歌结果页上排名更高的一个原因。

虽然让你的网页加载速度快是至关重要的,但让用户感觉加载速度快也是至关重要的。你必须减少页面上显示一些内容的时间,以保持用户的注意力,而其他内容则在后台加载,让用户感觉你的页面加载速度更快。

谷歌的Lighthouse是一个衡量你网站性能的好工具。它的性能得分不仅仅是基于完美网络条件下的实际页面速度。它考虑了你的网站在蹩脚的3G连接下的表现。Lighthouse是一个很好的工具,可以衡量你的页面加载时间对实际用户的感觉。

你可以使用几种方法来提高网页的加载速度:

  • 最小化CSS、Javascript和HTML
  • 减少重定向的数量
  • 利用浏览器缓存的优势
  • 优化图像尺寸
  • 利用懒惰加载的优势
  • 利用谷歌的加速移动页面(AMP)的优势。

移动友好性

当大多数在线内容采取移动优先的方式时,谷歌也采取了行动,将网页的移动友好性纳入其排名算法。

一个移动友好的网站为移动用户提供了更好的用户体验。当通过手机访问网络的用户数量达到历史最高水平时,改造你的网络应用以更好地服务于移动用户,应该是不费吹灰之力的事情。

你可以采取三种主要方法,使你的网站更有利于移动。

使用响应式设计

将你目前的设计转换为响应式设计,对你现有的代码库影响最小。

你可以设置新的视口元标签,调整CSS,使其对不同的屏幕分辨率更加灵活,从而使网页设计具有响应性。

使用动态设计

动态设计在检测到请求内容的用户代理类型后,向移动和桌面用户提供不同的HTML内容。它比响应式设计需要更多的努力来实现,因为它需要为移动和桌面用户提供不同的渲染页面。

使用一个移动子域

一些Web应用程序为移动用户使用一个单独的子域。通常情况下,子域的名字类似于mobile.example.com或m.example.com。这种方法需要更多的时间和精力来实施。一般不建议中小型网站使用这种方法,特别是如果你不会有两个不同版本的网站。


结论

虽然担心SEO可能看起来像是网站开发人员工作描述之外的事情,但我希望这篇文章能够说服你,考虑SEO是向你的客户提供一个完整的网络应用的必要条件。

虽然这篇文章提到了网络开发者应该关注的SEO的最重要方面,但其他几个技术因素也对排名算法的决定产生了影响。

作为网络开发人员掌握SEO的下一步,你可以研究更多的技术性SEO做法,并利用它们让你的网站在搜索结果页的顶部排名。

谢谢你的阅读!