谈谈 SEO，你应该知道的 10 个技巧

2025-05-28

谈谈 SEO，你应该知道的 10 个技巧

对于大多数公司来说，排名第一对他们的业务来说就像是一种福气。然而，大多数网站开发人员并不清楚该如何才能达到这一目标。

在本文中，我们将介绍 10 个简单的步骤，帮助您自然提升排名，而无需付费让搜索引擎帮我们完成。那么，你准备好了吗🧐？

HTML 标签告诉搜索引擎什么？

某些 HTML 标签会告诉搜索引擎如何正确读取您的文档，并根据特定关键词对其进行索引。换句话说，当搜索引擎抓取网页时，会根据一些关键词对您的页面进行分类，然后在用户搜索时显示这些关键词。

其中一些标签还能改善访问者在搜索引擎中查看您内容的方式。此外，社交媒体还会使用内容标签来展示您的文章，例如👇🏽。

Liquid 错误：内部

那么让我们看看这些标签是什么。

1. 标题标签

或许最重要的标签之一就是标题。它作为页面的标签，定义了 Google 和 Bing 等搜索引擎如何查看您的页面以及如何在搜索结果中显示它。

大多数情况下，此标签反映的是文章/页面本身的标题。这并非坏习惯，但你会错失一些在 Google 等搜索引擎上获得高排名的机会。

随之而来的问题是，标题必须和关键词一样吗？答案是绝对不需要。不过，最好确保不要让读者感到困惑😉。这给了你机会去扩展你的页面与搜索引擎相关的内容。标题应该简短，这样使用不同但相关的标签才能让更广泛的搜索范围更容易被找到。

正常的标题标签如下所示：

<title>Your Title Text for Search Engines</title>
Enter fullscreen mode Exit fullscreen mode

听起来很简单，对吧？虽然看起来很简单，但以下是撰写标题时需要考虑的几点：

  • 仅使用一个标题标签
  • 尝试创建一个独特的标题
  • 不要将标题关键词用作元标签（进一步阅读标签）
  • 使其与内容相关
  • 最好保持在 60 个字符以内
  • 尽量不要使用停用词
  • 最后展示品牌
  • 使其可读
  • 如果相关，请使用日期、数字和问题

以下是我的一篇文章成为 Google 搜索结果第一名的示例😍：

标题帮助 SEO

2. 元描述标签

正如我上面提到的，除了标题之外，描述标签确实有助于让您的页面接触到更广泛的搜索范围。

<meta name="description" content="Key HTML tags to have better SEO."/>
Enter fullscreen mode Exit fullscreen mode

例如，上面有一个标签，有人试图突出显示“关键 HTML 标签”和“更好的 SEO”短语，并将其显示在搜索结果中。

注意：截至 2019 年，谷歌已宣布您不应过多关注这些，因为他们会首先考虑内容。

3. 标题标签

千万别低估标题标签的作用。它们通常用来分隔内容，让阅读更轻松。想象一下，我的文章被分成了一大段，而不是被这些精心分割的段落。

据发现，大约 %55 的用户最多会花 15 秒浏览您的文本。就 SEO 而言，大多数搜索引擎使用标题标签来帮助确定内容片段并创建精选的丰富摘要。

这些标签如下：

  • <h1></h1>– 通常用于网页标题。
  • <h2></h2>– 突出其后内容的主题。
  • <h3></h3>– 反映与主题相关的要点。
  • <h4></h4>– 支持来自的观点<h3>。
  • <h5></h5>– 不常用，但非常适合支持<h4>

4. 图像的 Alt 标签

这通常是图片标签中最重要的部分，不仅对SEO至关重要，也对可访问性至关重要。不幸的是，搜索引擎无法确定要显示哪些图片。这时，alt标签就派上用场了。

例如：

<img src="cute-puppy.jpg" />
Enter fullscreen mode Exit fullscreen mode

搜索引擎无法判断这张图片是一只可爱的小狗还是一只猫。因此，添加alt标签可以帮助搜索引擎理解图片，并进行分类。

<img src="cute-puppy.jpg" alt="Such a cute puppy"/>
Enter fullscreen mode Exit fullscreen mode

上述标签将帮助搜索引擎正确识别图片内容。例如，当有人尝试使用 Google 图片搜索“可爱的小狗”时，这将有助于显示这张图片。

5.超链接

虽然看起来并非如此，但超链接至关重要，不仅指向外部内容，也指向您自己的内容。举个例子，当我在Dev 社区发布关于 Web 性能的系列文章中的第一篇时，我添加了指向我网站上其他文章的链接。这导致我的网站流量激增，这不仅帮助我的自然流量上升，也帮助搜索引擎将这些文章链接在一起。

通过链接分享我的文章

从本质上讲，它们就像您对其他内容进行投票一样，因此请利用它来为自己谋利并确保链接的内容是相关的。

<a href="https://dev.to/yashints/pet-projects-the-secret-to-keep-yourself-updated-51e0">
  My previous post about pet projects
</a>
Enter fullscreen mode Exit fullscreen mode

如果您出于某种原因不希望搜索引擎与您链接的内容建立联系，请考虑使用rel=nofollow。这会告诉搜索引擎不要将您当前的文章与链接目标链接起来。换句话说，您无法帮助提升外部网站的域名权重。

<a href="https://dev.to/yashints/pet-projects-the-secret-to-keep-yourself-updated-51e0"
  rel="nofollow">
  My previous post about pet projects
</a>
Enter fullscreen mode Exit fullscreen mode

6. 开放图谱标签

这些标签非常适合在社交媒体上展示格式良好的页面版本。你可能之前见过，但我的帖子在 LinkedIn 上的显示效果如下👇🏽：

开放图谱标签

以下是开放图谱标签的示例：

<meta name="og:title" property="og:title" content="The Title of Your Article"/>
Enter fullscreen mode Exit fullscreen mode

现在，如果这篇文章分享到 Facebook 之类的社交媒体上，社交网站会直接从这个标签中提取标题。正如你从我上面展示的推文中看到的，Open Graph 也支持描述和图片等内容。如果你的网页分享到社交媒体上，它只是为你提供了自定义选项。

7. 机器人标签

如果您想阻止您的页面/文章被索引，此标签非常有用。它可以阻止来自 Google 或 Bing 等网站的爬虫访问内容。您现在可能会问，为什么要这样做？

有些文章可能对排名影响不大。有很多原因可能需要这样做，但假设你有一篇文章质量不佳，你想在它出现在任何搜索引擎结果之前先征求一些用户的意见。

<meta name="robots" content="noindex, nofollow" />
Enter fullscreen mode Exit fullscreen mode

8. 规范标签

规范标签非常适合组织您的内容，并优先显示一个网页，而不是重复的网页。举个例子，我总是喜欢先在我的网站上发布帖子，然后再发布到其他地方。

我这样做有几个原因。最重要的原因是，在像Dev.to这样的平台上，覆盖面可能会更高。但是，我想让搜索引擎知道这篇文章并非独立文章，实际上它是我网站上先前发布内容的副本。换句话说，这是一种告诉搜索引擎特定 URL 代表页面主副本的方式。

您应该使用此标签的另一个原因是，搜索引擎可能会使用以下任何 URL 形式来抓取您的网站：

对人类来说，所有这些 URL 都代表一个页面。然而，对于爬虫来说，每个 URL 都是唯一的page。即使在这个有限的示例中，我们也能看到首页有五个副本。但实际上，这只是您可能遇到的各种变体中的一小部分。

<link rel="canonical" href="http://yashints.dev/index.html?param=value"/>
Enter fullscreen mode Exit fullscreen mode

因此，通过在我的主页上放置上述标签，我可以告诉搜索引擎该 URL 代表相同的页面而不是单独的页面。

这是一篇深入探讨规范标签的好文章。

9. 响应式网站元标签

首先，我们来看看一个事实：中国超过80%的流量来自移动设备。在澳大利亚，这个数字是56%。这些数字表明，重视响应式设计是多么重要。

出于同样的原因，让搜索引擎知道该网站支持响应式设计也很重要。这将确保用户使用移动设备搜索时，页面能够被优先显示。

<meta name="viewport" content="width=device-width, initial-scale=1"/>
Enter fullscreen mode Exit fullscreen mode

以上标签是让搜索引擎知道您的网站适合移动设备的最低要求。需要注意的是，谷歌非常重视网站的移动设备友好性。如果您没有提供方便用户通过手持设备查看的内容，这将影响您在搜索中的排名。

10. Twitter卡片

除了开放图谱标签，Twitter还有自己的标签。现在推文的长度可以超过 140 个字符，这些卡片是一个很好的扩展，可以让你的推文在众多常见文本中脱颖而出。

以下是其中几个：

概括

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="Small Island Developing States Photo Submission"/>
<meta name="twitter:description" content="View the album on Flickr."/>
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg"/>
Enter fullscreen mode Exit fullscreen mode

例子：

Twitter 卡

玩家

<meta name="twitter:card" content="player"/>
<meta name="twitter:title" content="Bison in Yellowstone"/>
<meta name="twitter:site" content="@BrightcoveLearn"/>
<meta name="twitter:description" content="Bison walking in Yellowstone National Park."/>
<meta name="twitter:player" content="https://solutions.brightcove.com/bcls/twittercards/bison.html"/>
<meta name="twitter:player:width" content="360"/>
<meta name="twitter:player:height" content="200"/>
<meta name="twitter:image" content="https://solutions.brightcove.com/bcls/twittercards/bison.jpg"/>
Enter fullscreen mode Exit fullscreen mode

例子：

Twitter 玩家卡

有关这些标签的更多信息，请访问其官方文档。

那么没有关键字标签？

你可能想知道为什么我没有提到关键词标签。这是因为大多数搜索引擎（例如谷歌）都使用内容来对页面进行分类。所以，添加关键词标签并没有太大的价值，事实上，很多关键词标签只会增加页面的权重。

概括

现在你已经掌握了10个改善SEO饮食并省钱的小窍门。所以，去酒吧或咖啡店，理性消费吧😉。

我忘了提的另一个建议是关于使用 SPA 框架的人的。如果你想让SEO你的网站看起来更好，你需要定义一些关键路径（例如主页），并创建一个服务器端渲染的页面，然后在客户端用正常的路由替换它。这样，爬虫就能索引你静态生成的文件，而你的最终用户仍然可以享受客户端的快速交互。

直到下一篇文章👋🏼。

文章来源：https://dev.to/yashints/let-s-talk-seo-10-tips-you-should-know-4n6k
Devto 翻译
PREV
让我们像专业人士一样编写 HTML 😎
NEXT
让我们在 AWS 上免费设置一个 VPN 服务器，只需 5 分钟😱🤯🔥