Astro 优化之 SEO
引言
在数字化时代，网站的可见性被视为商业成功的重要组成部分。搜索引擎优化（SEO）作为实现这一目标的关键手段，随着搜索引擎算法和用户需求的演变而变得越来越复杂。本文将详细介绍如何使用 Astro——一款高性能、现代的前端框架——来进行有效的 SEO 优化。
优质内容是根本
自搜索引擎的诞生以来，其中一个主要任务是使搜索引擎能收录网站内容。无论搜索引擎如何进化，其核心任务始终是提供有益于读者的内容。因此，网站运营者在内容生产方面应注重质量，以便被搜索引擎所收录。本质上，SEO 的最基本技巧是生产优质的内容。
内容战略
优质的内容不仅需要有深度和价值，还需要与目标受众有所关联。内容应该是原创的，避免重复或抄袭。除此之外，使用关键词策略也是不可忽视的一环，通过合理地使用关键词，可以提高内容在搜索引擎中的排名。
设置 META 标签
Meta 信息是网页头部（<head></head>标签内）的一组标签，用于描述网页的基本属性，并由搜索引擎用于生成搜索结果页（SERP）。
Astro 中的 Meta 设置示例
Astro 的灵活性允许在项目中轻松地设置 Meta 信息。示例代码如下：
---
interface Props {
title: string;
description: string;
image?: string;
}
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
const { title, description, image = "/blog-placeholder-1.avif" } = Astro.props;
---
<!-- Global Metadata -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<meta name="generator" content={Astro.generator} />
<!-- Canonical URL -->
<link rel="canonical" href={canonicalURL} />
<!-- Sitemap -->
<link rel="sitemap" href="/sitemap-index.xml" />
<!-- Primary Meta Tags -->
<title>{title}</title>
<meta name="title" content={title} />
<meta name="description" content={description} />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content={Astro.url} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={new URL(image, Astro.url)} />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content={Astro.url} />
<meta property="twitter:title" content={title} />
<meta property="twitter:description" content={description} />
<meta property="twitter:image" content={new URL(image, Astro.url)} />
添加 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/posts/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
