Astro 优化之 SEO

引言

在数字化时代，网站的可见性被视为商业成功的重要组成部分。搜索引擎优化（SEO）作为实现这一目标的关键手段，随着搜索引擎算法和用户需求的演变而变得越来越复杂。本文将详细介绍如何使用 Astro——一款高性能、现代的前端框架——来进行有效的 SEO 优化。

优质内容是根本

自搜索引擎的诞生以来，其中一个主要任务是使搜索引擎能收录网站内容。无论搜索引擎如何进化，其核心任务始终是提供有益于读者的内容。因此，网站运营者在内容生产方面应注重质量，以便被搜索引擎所收录。本质上，SEO 的最基本技巧是生产优质的内容。

内容战略

优质的内容不仅需要有深度和价值，还需要与目标受众有所关联。内容应该是原创的，避免重复或抄袭。除此之外，使用关键词策略也是不可忽视的一环，通过合理地使用关键词，可以提高内容在搜索引擎中的排名。

设置 META 标签

Meta 信息是网页头部（<head></head>标签内）的一组标签，用于描述网页的基本属性，并由搜索引擎用于生成搜索结果页（SERP）。

Astro 中的 Meta 设置示例

Astro 的灵活性允许在项目中轻松地设置 Meta 信息。示例代码如下：

---
import { ViewTransitions } from 'astro:transitions';
import '../styles/global.css';

const { pageTitle, description = '在生活的海洋，创业的波涛和投资的迷雾中蹉跎前行' } = Astro.props;
---

<html lang='zh-cn'>
	<head>
		<!--Global Metadata -->
		<meta charset='utf-8' />
		<link rel='icon' type='image/svg+xml' href='/favicon.svg' />
		<meta name='viewport' content='width=device-width' />
		<meta name='generator' content='{Astro.generator}' />

		<!-- Primary Meta Tags -->
		<title>{pageTitle}</title>
		<meta name='description' content='{description}' />
	</head>
	....
</html>

添加 Sitemap

Sitemap 是一种 XML 文件，它列出了网站内所有可访问的页面，作为搜索引擎抓取网站的指导。

Astro 的 Sitemap 插件

Astro 提供了一种简单的方式通过 sitemap 插件自动生成网站的 sitemap。

设置 IndexNow 推送

IndexNow 是一种新的、由搜索引擎 Bing 和 Yandex 联合发起的开源网站内容提交工具。当网站有内容更新，并希望尽快被搜索引擎收录时，可通过 IndexNow 向其提交新内容。

使用 GitHub Actions 进行 IndexNow 推送

在不支持 IndexNow 提交的网站上，可使用 GitHub Actions 来主动进行内容推送。相关的 GitHub Actions 配置示例如下：

.github/workflows/indexnow-push.js

import fetch from 'node-fetch'

const sitemapUrls = ['https://inote.xyz/6b2ef666bf5d4da8bb9929f0c8dc2b3c.txt'

fetch(apiKeyFileUrl)
	.then((response) => response.text())
	.then((apiKey) => {
		apiKey = apiKey.trim()
		sitemapUrls.forEach((sitemapUrl) => {
			const url = `https://www.bing.com/indexnow?url=${encodeURIComponent(
				sitemapUrl
			)}&key=${apiKey}`

			fetch(url)
				.then((response) => response.text())
				.then((data) => console.log(`Pushed ${sitemapUrl}:`, data))
				.catch((error) => console.error('Error:', error))
		})
	})
	.catch((error) => console.error('Error fetching API key:', error))

.github/workflows/indexnow.yml

name: IndexNow Push
on:
  push:
    branches:
      - main
    paths:
      - 'src/content/posts/**'

jobs:
  indexnow-push:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install dependencies
        run: npm install

      - name: Push updates to IndexNow
        run: node .github/workflows/indexnow-push.js