通过 Astro 模版和 AI 学习 SEO

Link1987
446 阅读4分钟

最近基于 Astrowind 制作了 简单的课程介绍页面 dify.uxone.org/

页面的主题内容制作好后，还需要修改页面的配置，比如标题，描述，logo 等。在修改配置时，发现 Astrowind 源码中，有一段 seo 配置，这个配置的格式是：

export interface AstroSeoProps {
 title?: string;
 titleTemplate?: string;
 noindex?: boolean;
 nofollow?: boolean;
 robotsProps?: AdditionalRobotsProps;
 description?: string;
 canonical?: string;
 mobileAlternate?: MobileAlternate;
 languageAlternates?: ReadonlyArray<LanguageAlternate>;
 openGraph?: OpenGraph;
 facebook?: { appId: string };
 twitter?: Twitter;
 additionalMetaTags?: ReadonlyArray<MetaTag>;
 additionalLinkTags?: ReadonlyArray<LinkTag>;
}

这段配置很有价值。首先，它可以使我系统的了解和 seo 有关的页面配置，其次，我可以把它作为问题向 AI 提问，继续学习。

通过不断的向提问和追问，加上阅读源码，我梳理了和 seo 有关的页面配置和含义：

1. title

title 是页面的标题，对搜索引擎排名有显著影响。title 也会显示在浏览器标签栏中。

建议在所有页面标题中添加一致的格式或品牌名称。

<html>
  <title>站点标题</title>
</html>

<html>
  <title>子页面标题 - 站点标题</title>
</html>

2. description

description 页面的简短描述，通常显示在搜索结果中。description 不直接影响页面排名，但是对点击率影响很大，因为用户搜索后会看到页面的描述。

<html>
  <meta content="页面描述" name="description">
</html>

3. canonical

指定页面的规范 URL，当页面的 url 不同但是页面实际上是一个页面时使用，用于处理重复内容问题。比如把 www.xxx.com 和 xxx.com 和 www.xxx.com?a=b，视为一个页面

<html>
  <link href="www.xxx.xxx" rel="canonical">
</html>

4. 社交媒体

以下 3 项配置是面向社交媒体优化（SMO）的：

  • openGraph: Open Graph 协议相关的元数据，用于在社交媒体上更好地展示页面。
  • facebook: Facebook 特定的元数据，如 app ID。
  • twitter: Twitter 卡片相关的元数据。

尽管它们主要是针对 SMO（社交媒体优化）的，这些配置项确实对 SEO（搜索引擎优化）有帮助。它们可以间接提高网站的流量和反向链接，这些都是重要的 SEO 因素。另外，有些搜索引擎也会考虑社交信号作为排名因素。

<html>
  <meta content="summary_large_image" name="twitter:card">
  <meta content="xxx" name="twitter:site">
  <meta content="xxx" name="twitter:creator">
</html>

<html>
  <meta content="xxx" property="og:site_name">
  <meta content="zh" property="og:locale">
  <meta content="960" property="og:image:width">
  <meta content="640" property="og:image:height">
  <meta content="image url" property="og:image">
  <meta content="website" property="og:type">
  <meta content="link url" property="og:url">
  <meta content="xxx" property="og:description">
</html>

5. robots

robots 可以告诉爬虫爬取范围，优先爬取那些页面，防止爬取重复的页面等等。所以 robots 会辅助影响 seo.

robots 是一个配置集合，以下是其中 3 项配置

  • noindex: 如果设为 true，告诉搜索引擎不要索引这个页面。
  • nofollow: 如果设为 true，告诉搜索引擎不要跟踪页面上的链接。
  • robotsProps: 额外的机器人控制属性，如 nosnippet, maxSnippet 等。
<html>
  <meta content="index,follow" name="robots">
</html>

robots 可以放在 meta 中，也可以放在网站根目录中的 /robots.txt 中，在 meta 中的 robots 优先级更高。

6. mobileAlternate

指定移动版网页的替代 URL，对 SEO 有很大帮助。

  • 帮助搜索引擎理解你的网站结构，特别是在有单独的移动版网站时。

  • 提高移动搜索结果中的排名，因为移动友好性是重要的排名因素。

  • 确保正确的版本（桌面或移动）显示在相应的设备搜索结果中。

<html>
  <link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/page">
</html>

7. languageAlternates

指定页面的其他语言版本，对 SEO 也有很大帮助。

  • 帮助搜索引擎为不同语言的用户提供最合适的网页版本。
  • 使网站在不同语言地区都能获得良好排名。
  • 改善用户体验，因为用户更容易找到他们首选语言的内容。
<html>
  <link rel="alternate" hreflang="en" href="https://xxx.com/en/page">
</html>

8. 其他

以下配置不在 Astrowind 的 seo 配置中，不过也会影响 seo

  • 建议每个页面只放一个 h1 标签，页面中内容的结构使用 h2-h6 标签来组织，同时尽量使用 header, nav, main, article, section, aside, footer 等语意化的标签。
  • 使用网站根目录中的 /sitemap.xml 文件描述了站点的结构，也可以帮助提高爬取你的网站页面的效率。大型网站、新上线的网站、更新频繁的网站 更需要使用 sitemap. 比如 www.google.com/sitemap.xml

【已废弃】keywords

页面中不需要设置 keywords 了，因为 keywords 标签曾被大量滥用，被污染了，所以现在 Google 和其他主流搜索引擎已经不使用 keywords 了。

avatar
文章
阅读
粉丝