SEO and Meta Tags

Relevant source files

The following files were used as context for generating this wiki page:

• src/pages/robots.txt.ts
• src/config.ts
• src/types/config.ts
• src/content/config.ts
• src/pages/rss.xml.ts
• src/pages/atom.xml.ts
• src/content/posts/2018-10-30/Charlotte-Markdown.md

The Charlotte project implements Search Engine Optimization (SEO) through a multi-layered approach, combining global site-wide configurations with specific metadata for each piece of content. This ensures that search engines can effectively crawl, index, and understand the site's structure and content.

Key aspects of the SEO strategy include a centralized configuration for site-level metadata, frontmatter in Markdown files for on-page SEO, and the automatic generation of robots.txt, sitemap references, and content syndication feeds (RSS/Atom). This combination provides comprehensive control over how the site is presented to search engines and other services.

Global Site Configuration

Site-wide SEO metadata is managed centrally in the siteConfig object. This object defines default values for the entire site, such as the title, description, and keywords.

Sources: src/config.ts, src/types/config.ts

siteConfig Properties

The primary SEO-related properties are defined within the SiteConfig type and implemented in src/config.ts.

Property	Type	Description
title	string	The main title of the website.
subtitle	string	A secondary title or slogan for the site.
url	string	The canonical base URL of the website, used for generating absolute links in feeds and sitemaps.
lang	string	The primary language of the site (e.g., zh_CN), which helps search engines target the correct audience.
keywords	string	A comma-separated list of SEO keywords relevant to the site's content.
description	string	A brief summary of the website, often used by search engines as the meta description in search results.

Sources: src/types/config.ts:3-10, src/config.ts:12-18

Example Configuration

// src/config.ts:12-18
export const siteConfig: SiteConfig = {
	title: "初五的小窝",
	subtitle: "时间能冲淡痛苦",
	url: "https://blog.chuwu.top/",
	lang: "zh_CN", // 语言代码，例如 'en', 'zh_CN', 'ja' 等
	keywords: "Chuwu, 博客, 编程, 前端, 全栈, 开发, 网络, 技术分享, 生活日记", // SEO 关键词
	description:
		"ChuwuYo的小窝, 这里有我的日常、思考以及一些开发分享, 欢迎你的到来", // 站点描述
    // ...
};

Sources: src/config.ts:12-18

Post-Level Metadata (Frontmatter)

Each blog post, written in Markdown, contains a frontmatter section at the top of the file. This section defines specific metadata for that post, which is critical for on-page SEO. These values often override or supplement the global siteConfig.

The schema for post frontmatter is defined using Zod in src/content/config.ts.

Sources: src/content/config.ts, src/content/posts/2018-10-30/Charlotte-Markdown.md

Frontmatter Schema

The following diagram shows the data flow from configuration and content files to the final generated page and feeds.

Key Frontmatter Fields

These fields are defined in the postsCollection schema and are used to generate HTML meta tags and feed entries.

Field	Type	Description
title	string	The title of the post, used for the page's <title> tag and <h1> heading.
published	date	The publication date, used for sorting and for <pubDate> in feeds.
description	string	A short summary of the post, used for the meta-description tag and in post listings.
image	string	The path to the post's cover image, used for social media cards (e.g., Open Graph og:image).
tags	array(string)	A list of tags associated with the post, which can be used for creating meta keywords and internal links.
category	string	The category of the post, used for organization and navigation.
draft	boolean	If true, the post is excluded from the production build, preventing it from being indexed.

Sources: src/content/config.ts:4-12, src/content/posts/2018-10-30/Charlotte-Markdown.md:2-10

Example Frontmatter

---
title: Charlotte-Markdown
published: 2018-10-30
description: 'Charlotte-Markdown 是 Charlotte 主题的 Markdown 语法说明文档'
image: './Markdown.webp'
tags: [Charlotte, 公告, Markdown]
category: '公告'
draft: false 
lang: ''
---

Sources: src/content/posts/2018-10-30/Charlotte-Markdown.md:2-10

Search Engine Directives

The project provides instructions to search engine crawlers via a dynamically generated robots.txt file.

robots.txt

The robots.txt file is generated by the endpoint at src/pages/robots.txt.ts. Its primary purpose is to disallow crawlers from indexing the build-specific /_astro/ directory and to provide a link to the sitemap.

The following diagram illustrates a search engine crawler's interaction with the site.

The content of the generated file is as follows:

User-agent: *
Disallow: /_astro/

Sitemap: ${new URL("sitemap-index.xml", import.meta.env.SITE).href}

Sources: src/pages/robots.txt.ts:3-8

Content Syndication Feeds

The site automatically generates RSS and Atom feeds to syndicate content. These feeds are discoverable by search engines and feed readers, helping to distribute new content and signal updates.

Sources: src/pages/rss.xml.ts, src/pages/atom.xml.ts

Feed Generation Process

Both rss.xml.ts and atom.xml.ts follow a similar process to generate their respective feeds. They fetch sorted posts, use global site configuration for feed-level metadata, and map each post to a feed entry.

This sequence diagram shows the RSS feed generation flow.

Key Data Points in Feeds

The feeds are populated with data from both siteConfig and post frontmatter to create a comprehensive and SEO-friendly representation of the content.

• Feed Level:
  • title: From siteConfig.title.
  • description: From siteConfig.description.
  • site / link: From siteConfig.url.
  • language: From siteConfig.lang.
• Item/Entry Level:
  • title: From post.data.title.
  • pubDate / published: From post.data.published.
  • description / summary: From post.data.description.
  • link: A fully-resolved URL to the post.
  • content: The sanitized HTML content of the post body.

Sources: src/pages/rss.xml.ts:33-58, src/pages/atom.xml.ts:29-65