on-site-seo

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

When this skill is activated, always start your first response with the 🧢 emoji.

激活此技能后，你的第一条回复请务必以🧢表情开头。

On-Site SEO

站内SEO

On-site SEO is the practice of optimizing individual page elements in code to improve search visibility. This skill is the hands-on implementation companion to the broader SEO strategy skills - it covers everything a developer touches directly: meta tags, headings, images, links, semantic HTML, and social sharing tags. It is framework-aware, with concrete code patterns for Next.js, Nuxt, Astro, and Remix. The focus is on correct, production-grade implementation - not strategy or keyword research.

站内SEO是指通过代码优化单个页面元素以提升搜索可见性的实践。此技能是更广泛SEO策略技能的实操实现配套工具，涵盖开发者直接接触的所有内容：元标签、标题、图片、链接、语义化HTML和社交分享标签。它支持多种框架，提供Next.js、Nuxt、Astro和Remix的具体代码实现模式。重点在于正确的生产级实现，而非策略或关键词研究。

When to use this skill

何时使用此技能

Trigger this skill when the user:

Wants to add or fix meta tags (title, description, canonical, robots)
Needs to implement Open Graph or Twitter Card tags
Asks about heading structure (H1, H2, H3 hierarchy) on a page
Wants to add or improve alt text on images
Asks how to implement SEO in Next.js, Nuxt, Astro, or Remix
Needs to optimize images for SEO (alt text, lazy loading, dimensions, format)
Wants to add semantic HTML to improve page structure
Asks about internal linking strategy in code

Do NOT trigger this skill for:

Keyword research or content strategy - use
```
keyword-research
```
skill instead
Performance metrics, Largest Contentful Paint, or Core Web Vitals optimization - use
```
core-web-vitals
```
skill instead

当用户有以下需求时触发此技能：

需要添加或修复元标签（标题、描述、规范网址、robots）
需要实现Open Graph或Twitter Card标签
询问页面的标题结构（H1、H2、H3层级）
需要添加或优化图片的替代文本
询问如何在Next.js、Nuxt、Astro或Remix中实现SEO
需要优化图片以适配SEO（替代文本、懒加载、尺寸、格式）
需要添加语义化HTML以改善页面结构
询问代码层面的内部链接策略

请勿在以下场景触发此技能：

关键词研究或内容策略 - 请使用
```
keyword-research
```
技能
性能指标、最大内容绘制（Largest Contentful Paint）或核心Web指标优化 - 请使用
```
core-web-vitals
```
技能

Key principles

核心原则

Title tag is the single most impactful on-page element - Keep it under 60 characters, put the primary keyword near the start, make it unique per page. Every page with a missing or duplicated title tag is leaving ranking signal on the table.
One H1 per page, containing the primary keyword - The H1 is the page's editorial headline. More than one H1 confuses search engines about the page's topic. H1 should be distinct from the title tag - not identical - but semantically aligned.
Every image needs descriptive alt text - Alt text is read by screen readers and indexed by crawlers. Describe the image's subject and context. Do not keyword- stuff alt text - "golden retriever puppy on grass" beats "dog puppy dog pictures dogs".
Internal links distribute authority and aid discovery - Every page on the site should be reachable via internal links. Anchor text should be descriptive, not generic ("see pricing" not "click here"). Use absolute URLs for reliability.
Semantic HTML helps search engines understand page structure - Elements like
```
<article>
```
,
```
<nav>
```
,
```
<main>
```
,
```
<section>
```
,
```
<header>
```
, and
```
<footer>
```
communicate document structure to crawlers without extra markup. Use native elements before adding schema markup.

标题标签是影响最大的页面元素 - 长度控制在60字符以内，将主关键词放在靠前位置，每个页面的标题需唯一。任何缺失或重复标题标签的页面都会浪费排名信号。
每个页面仅一个H1标签，包含主关键词 - H1是页面的编辑性标题。多个H1会让搜索引擎对页面主题产生混淆。H1应与标题标签区分开（不能完全相同），但语义需保持一致。
所有图片都需要描述性替代文本 - 替代文本会被屏幕阅读器读取，也会被爬虫索引。请描述图片的主体和上下文。不要堆砌关键词——“金毛幼犬在草地上”比“狗幼犬狗狗图片”效果更好。
内部链接传递权重并助力内容发现 - 网站上的每个页面都应能通过内部链接访问。锚文本需具有描述性，而非通用表述（比如用“查看定价”而非“点击这里”）。为确保可靠性，请使用绝对URL。
语义化HTML帮助搜索引擎理解页面结构 -
```
<article>
```
、
```
<nav>
```
、
```
<main>
```
、
```
<section>
```
、
```
<header>
```
和
```
<footer>
```
等元素无需额外标记即可向爬虫传达文档结构。在添加Schema标记前，请优先使用原生元素。

Core concepts

核心概念

The on-page SEO hierarchy

页面SEO权重层级

Search engines weight on-page signals in this order (highest to lowest impact):

title tag       <- URL bar, search snippet title, primary ranking signal
H1              <- editorial headline, should contain primary keyword
meta description <- search snippet body, not a ranking signal but drives CTR
headings (H2-H6) <- content structure, secondary keyword placement
body content    <- relevance signals, LSI keywords, readability
images          <- alt text, filename, lazy loading, dimensions
internal links  <- anchor text, page authority distribution, crawl paths

搜索引擎对页面信号的权重优先级从高到低如下：

title tag       <- 地址栏、搜索结果标题，主要排名信号
H1              <- 编辑性标题，应包含主关键词
meta description <- 搜索结果描述，不直接影响排名但会提升点击率
headings (H2-H6) <- 内容结构，次要关键词放置位置
body content    <- 相关性信号，潜在语义索引关键词，可读性
images          <- 替代文本、文件名、懒加载、尺寸
internal links  <- 锚文本、页面权重传递、爬取路径

Meta robots directives

Robots元标签指令

Control crawl behavior with the

robots

meta tag:

html

<!-- Default - index the page, follow links -->
<meta name="robots" content="index, follow">

<!-- Block indexing but follow links (e.g. pagination, filtered views) -->
<meta name="robots" content="noindex, follow">

<!-- Block indexing and link following (e.g. admin pages) -->
<meta name="robots" content="noindex, nofollow">

<!-- Allow indexing but don't follow links -->
<meta name="robots" content="index, nofollow">

通过

robots

元标签控制爬虫行为：

html

<!-- 默认设置 - 索引页面，跟踪链接 -->
<meta name="robots" content="index, follow">

<!-- 禁止索引但跟踪链接（如分页、筛选视图） -->
<meta name="robots" content="noindex, follow">

<!-- 禁止索引且不跟踪链接（如管理页面） -->
<meta name="robots" content="noindex, nofollow">

<!-- 允许索引但不跟踪链接 -->
<meta name="robots" content="index, nofollow">

Open Graph protocol

Open Graph协议

OG tags control how pages appear when shared on Facebook, LinkedIn, Slack, and most social platforms. The minimum required set:

html

<meta property="og:title" content="Page Title Here">
<meta property="og:description" content="Description (max 300 chars recommended)">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">

OG image should be 1200x630px (1.91:1 ratio). Twitter uses

twitter:

prefixed tags but falls back to OG tags when Twitter-specific tags are absent.

OG标签控制页面在Facebook、LinkedIn、Slack及大多数社交平台分享时的展示效果。最低要求的标签集合：

html

<meta property="og:title" content="页面标题">
<meta property="og:description" content="描述（建议最多300字符）">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">

OG图片尺寸应为1200x630px（1.91:1比例）。Twitter使用

twitter:

前缀的标签，但当缺少Twitter专属标签时，会回退使用OG标签。

Canonical URLs

规范网址（Canonical URLs）

The canonical tag tells search engines which URL is the authoritative version of a page. Required for: paginated content, filtered/sorted product listings, content syndicated across multiple URLs, and HTTPS/HTTP or www/non-www variants.

html

<link rel="canonical" href="https://example.com/the-original-page">

规范标签告诉搜索引擎哪个URL是页面的权威版本。以下场景必须使用：分页内容、筛选/排序的产品列表、多URL同步的内容，以及HTTPS/HTTP或www/非www变体。

html

<link rel="canonical" href="https://example.com/the-original-page">

Semantic HTML5 and SEO value

语义化HTML5的SEO价值

Element	SEO signal
`<article>`	Self-contained content unit - good for blog posts, news items
`<main>`	Primary page content - signals to crawlers where the content is
`<nav>`	Navigation landmark - helps crawlers map site structure
`<section>`	Thematic grouping with a heading - creates content hierarchy
`<aside>`	Supplementary content - lower priority to crawlers
`<header>` / `<footer>`	Page or section framing - not primary content
`<time datetime="">`	Machine-readable date - helps with freshness signals

元素	SEO信号
`<article>`	独立内容单元 - 适用于博客文章、新闻条目
`<main>`	页面主要内容 - 向爬虫标记内容核心区域
`<nav>`	导航地标 - 帮助爬虫梳理网站结构
`<section>`	带标题的主题分组 - 构建内容层级
`<aside>`	补充内容 - 爬虫优先级较低
`<header>` / `<footer>`	页面或区域的框架内容 - 非核心内容
`<time datetime="">`	机器可读日期 - 有助于新鲜度信号识别

Common tasks

常见任务

1. Set up complete meta tags for a page

1. 为页面配置完整的元标签

The minimum complete set for any page:

html

<head>
  <!-- Title tag - unique per page, primary keyword near start, max 60 chars -->
  <title>Primary Keyword - Brand Name</title>

  <!-- Meta description - not a ranking signal but drives CTR, max 160 chars -->
  <meta name="description" content="Clear description of what this page offers.">

  <!-- Canonical - prevents duplicate content issues -->
  <link rel="canonical" href="https://example.com/page-url">

  <!-- Robots - only needed when deviating from default (index, follow) -->
  <meta name="robots" content="index, follow">
</head>

任何页面的最低完整元标签集合：

html

<head>
  <!-- 标题标签 - 每个页面唯一，主关键词靠前，最多60字符 -->
  <title>主关键词 - 品牌名称</title>

  <!-- 元描述 - 不影响排名但提升点击率，最多160字符 -->
  <meta name="description" content="清晰描述页面提供的内容。">

  <!-- 规范网址 - 避免重复内容问题 -->
  <link rel="canonical" href="https://example.com/page-url">

  <!-- Robots标签 - 仅当需要偏离默认设置（index, follow）时使用 -->
  <meta name="robots" content="index, follow">
</head>

2. Implement Open Graph and Twitter Card tags

2. 实现Open Graph和Twitter Card标签

html

<!-- Open Graph (Facebook, LinkedIn, Slack, iMessage previews) -->
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page description, max 300 chars.">
<meta property="og:image" content="https://example.com/images/og-1200x630.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Description of the OG image">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Brand Name">

<!-- Twitter Card (falls back to OG if twitter: tags are absent) -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@twitterhandle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description.">
<meta name="twitter:image" content="https://example.com/images/twitter-1200x628.png">
<meta name="twitter:image:alt" content="Description of the Twitter image">

html

<!-- Open Graph（Facebook、LinkedIn、Slack、iMessage预览） -->
<meta property="og:title" content="页面标题">
<meta property="og:description" content="页面描述，最多300字符。">
<meta property="og:image" content="https://example.com/images/og-1200x630.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="OG图片描述">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">
<meta property="og:site_name" content="品牌名称">

<!-- Twitter Card（无专属标签时回退使用OG标签） -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@twitterhandle">
<meta name="twitter:title" content="页面标题">
<meta name="twitter:description" content="页面描述。">
<meta name="twitter:image" content="https://example.com/images/twitter-1200x628.png">
<meta name="twitter:image:alt" content="Twitter图片描述">

3. Structure headings correctly

3. 正确设置标题层级

Every page needs exactly one H1. Headings should never skip levels (H1 > H3).

html

<main>
  <h1>Primary Keyword - Page Main Topic</h1>

  <section>
    <h2>First Major Subtopic</h2>
    <p>Content...</p>

    <h3>Supporting Detail Under Subtopic</h3>
    <p>Content...</p>
  </section>

  <section>
    <h2>Second Major Subtopic</h2>
    <p>Content...</p>
  </section>
</main>

Anti-pattern to avoid: using heading tags for visual styling. Use CSS classes instead.

每个页面仅需一个H1标签。标题层级不能跳过（如从H1直接到H3）。

html

<main>
  <h1>主关键词 - 页面主题</h1>

  <section>
    <h2>第一大子主题</h2>
    <p>内容...</p>

    <h3>子主题下的支撑细节</h3>
    <p>内容...</p>
  </section>

  <section>
    <h2>第二大子主题</h2>
    <p>内容...</p>
  </section>
</main>

需避免的反模式：使用标题标签实现视觉样式。请改用CSS类。

4. Optimize images for SEO

4. 优化图片以适配SEO

html

<!-- Full SEO-optimized image tag -->
<img
  src="/images/golden-retriever-puppy.webp"
  alt="Golden retriever puppy playing in grass at sunset"
  width="800"
  height="600"
  loading="lazy"
  decoding="async"
>

<!-- For above-the-fold images: eager loading + fetchpriority -->
<img
  src="/images/hero-banner.webp"
  alt="Team working in a modern office space"
  width="1440"
  height="600"
  loading="eager"
  fetchpriority="high"
>

Image SEO rules:

Filename should describe content:
```
golden-retriever-puppy.webp
```
not
```
img_0042.jpg
```
Always include
```
width
```
and
```
height
```
to prevent layout shift (CLS)
Use modern formats: WebP or AVIF preferred over JPEG/PNG
```
loading="lazy"
```
on below-fold images;
```
loading="eager"
```
on above-fold

html

<!-- 完整SEO优化的图片标签 -->
<img
  src="/images/golden-retriever-puppy.webp"
  alt="金毛幼犬在日落时分的草地上玩耍"
  width="800"
  height="600"
  loading="lazy"
  decoding="async"
>

<!-- 首屏图片：立即加载 + 高优先级获取 -->
<img
  src="/images/hero-banner.webp"
  alt="团队在现代化办公空间协作"
  width="1440"
  height="600"
  loading="eager"
  fetchpriority="high"
>

图片SEO规则：

文件名应描述内容：使用
```
golden-retriever-puppy.webp
```
而非
```
img_0042.jpg
```
始终包含
```
width
```
和
```
height
```
属性以避免布局偏移（CLS）
使用现代格式：优先选择WebP或AVIF而非JPEG/PNG
非首屏图片使用
```
loading="lazy"
```
；首屏图片使用
```
loading="eager"
```

5. Build internal linking patterns

5. 构建内部链接模式

html

<!-- Good: descriptive anchor text, absolute URL -->
<a href="https://example.com/pricing">View our pricing plans</a>

<!-- Good: contextual link in body content -->
<p>
  Learn more about
  <a href="/guides/seo-strategy">technical SEO strategy</a>
  before optimizing individual pages.
</p>

<!-- Bad: generic anchor text -->
<a href="/pricing">click here</a>

<!-- Breadcrumb navigation - also useful for SEO -->
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/guides">Guides</a></li>
    <li aria-current="page">On-Site SEO</li>
  </ol>
</nav>

html

<!-- 推荐：描述性锚文本，绝对URL -->
<a href="https://example.com/pricing">查看我们的定价方案</a>

<!-- 推荐：正文中的上下文链接 -->
<p>
  在优化单个页面之前，可进一步了解
  <a href="/guides/seo-strategy">技术SEO策略</a>
  的相关内容。
</p>

<!-- 不推荐：通用锚文本 -->
<a href="/pricing">click here</a>

<!-- 面包屑导航 - 对SEO也有帮助 -->
<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">首页</a></li>
    <li><a href="/guides">指南</a></li>
    <li aria-current="page">站内SEO</li>
  </ol>
</nav>

6. Add semantic HTML to page structure

6. 为页面添加语义化HTML结构

html

<body>
  <header>
    <nav aria-label="Main navigation">
      <!-- Primary site navigation -->
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h1>Article Title</h1>
        <time datetime="2025-03-14">March 14, 2025</time>
      </header>

      <section>
        <h2>Section Heading</h2>
        <p>Section content...</p>
      </section>
    </article>

    <aside>
      <h2>Related Articles</h2>
      <!-- Supplementary content -->
    </aside>
  </main>

  <footer>
    <!-- Site footer -->
  </footer>
</body>

html

<body>
  <header>
    <nav aria-label="主导航">
      <!-- 网站主导航 -->
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h1>文章标题</h1>
        <time datetime="2025-03-14">2025年3月14日</time>
      </header>

      <section>
        <h2>章节标题</h2>
        <p>章节内容...</p>
      </section>
    </article>

    <aside>
      <h2>相关文章</h2>
      <!-- 补充内容 -->
    </aside>
  </main>

  <footer>
    <!-- 网站页脚 -->
  </footer>
</body>

7. Next.js App Router - generateMetadata

typescript

// app/blog/[slug]/page.tsx
import type { Metadata } from 'next';

export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}): Promise<Metadata> {
  const post = await fetchPost(params.slug);

  return {
    title: post.title,
    description: post.excerpt,
    alternates: {
      canonical: `https://example.com/blog/${params.slug}`,
    },
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [{ url: post.ogImage, width: 1200, height: 630 }],
      type: 'article',
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.ogImage],
    },
  };
}

typescript

// app/blog/[slug]/page.tsx
import type { Metadata } from 'next';

export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}): Promise<Metadata> {
  const post = await fetchPost(params.slug);

  return {
    title: post.title,
    description: post.excerpt,
    alternates: {
      canonical: `https://example.com/blog/${params.slug}`,
    },
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [{ url: post.ogImage, width: 1200, height: 630 }],
      type: 'article',
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.ogImage],
    },
  };
}

8. Nuxt 3 - useSeoMeta

typescript

// pages/blog/[slug].vue
<script setup>
const route = useRoute();
const { data: post } = await useFetch(`/api/posts/${route.params.slug}`);

useSeoMeta({
  title: post.value.title,
  description: post.value.excerpt,
  ogTitle: post.value.title,
  ogDescription: post.value.excerpt,
  ogImage: post.value.ogImage,
  ogUrl: `https://example.com/blog/${route.params.slug}`,
  twitterCard: 'summary_large_image',
  twitterTitle: post.value.title,
  twitterDescription: post.value.excerpt,
  twitterImage: post.value.ogImage,
});
</script>

typescript

// pages/blog/[slug].vue
<script setup>
const route = useRoute();
const { data: post } = await useFetch(`/api/posts/${route.params.slug}`);

useSeoMeta({
  title: post.value.title,
  description: post.value.excerpt,
  ogTitle: post.value.title,
  ogDescription: post.value.excerpt,
  ogImage: post.value.ogImage,
  ogUrl: `https://example.com/blog/${route.params.slug}`,
  twitterCard: 'summary_large_image',
  twitterTitle: post.value.title,
  twitterDescription: post.value.excerpt,
  twitterImage: post.value.ogImage,
});
</script>

Anti-patterns / common mistakes

反模式/常见错误

Mistake	Why it's wrong	What to do instead
Multiple H1 tags	Signals ambiguous topic to crawlers; dilutes keyword focus	Exactly one H1 per page containing the primary keyword
Missing canonical	Creates duplicate content issues when URLs differ (www vs non-www, trailing slashes)	Add canonical to every page, always pointing to the preferred URL
Title tag over 60 chars	Google truncates it in search results, reducing CTR	Keep title under 60 chars; put important keywords first
Meta description over 160 chars	Truncated in SERPs; the extra text wastes space	Keep meta description under 155-160 chars
Generic alt text	"image.jpg" or "photo" provides zero signal	Describe the image subject and context specifically
"Click here" anchor text	Provides no keyword context to crawlers	Use descriptive anchor text: "view pricing plans", "read the SEO guide"
Missing OG image	Unfurled links show no preview - kills CTR on social	Every page needs a 1200x630px OG image
Missing image dimensions	Causes Cumulative Layout Shift, hurts CLS score	Always include `width` and `height` attributes
Heading tags for styling	Uses `<h3>` because it "looks right" visually	Use CSS classes for visual sizing; use headings for document structure only
Identical meta descriptions	Duplicate descriptions across pages dilute uniqueness	Write unique, page-specific descriptions for every page
noindex on important pages	Accidentally blocking indexation of content pages	Audit robots meta tags and verify Search Console coverage

错误做法	错误原因	正确做法
多个H1标签	向爬虫传递模糊的主题信号，分散关键词权重	每个页面仅保留一个包含主关键词的H1标签
缺失规范网址	当URL存在差异（www/非www、带/不带斜杠）时会引发重复内容问题	为每个页面添加规范网址，始终指向首选URL
标题标签超过60字符	谷歌会在搜索结果中截断标题，降低点击率	标题长度控制在60字符以内，重要关键词前置
元描述超过160字符	在搜索结果中会被截断，多余文本浪费空间	元描述长度控制在155-160字符以内
通用替代文本	"image.jpg"或"photo"无法传递任何有效信号	具体描述图片的主体和上下文
使用“点击这里”作为锚文本	无法为爬虫提供关键词上下文	使用描述性锚文本：如“查看定价方案”、“阅读SEO指南”
缺失OG图片	链接展开时无预览图，严重降低社交平台点击率	每个页面都需要一张1200x630px的OG图片
缺失图片尺寸属性	导致累积布局偏移，影响CLS评分	始终包含 `width` 和 `height` 属性
使用标题标签实现样式	仅因为“看起来合适”就使用 `<h3>` 标签	使用CSS类控制视觉样式；标题标签仅用于文档结构
元描述重复	页面间重复的描述会降低内容独特性	为每个页面编写专属的、符合页面内容的描述
重要页面设置noindex	意外阻止内容页面被索引	审核robots元标签，并在Search Console中验证覆盖范围

References

参考资料

For detailed framework-specific SEO patterns, load the relevant reference file:

```
references/nextjs-seo.md
```
- Next.js App Router Metadata API, generateMetadata, sitemap.ts, robots.ts, dynamic OG images with next/og
```
references/nuxt-seo.md
```
- Nuxt 3 useSeoMeta, useHead, nuxt-seo module, OG image generation, sitemap and robots modules
```
references/astro-seo.md
```
- Astro SEO component patterns, content collections with frontmatter SEO, sitemap integration, astro-seo package
```
references/remix-seo.md
```
- Remix meta function (V2 convention), loader-based dynamic meta, parent route meta merging, canonical URLs

For related skills:

Load
```
schema-markup
```
skill for JSON-LD structured data implementation
Load
```
core-web-vitals
```
skill for LCP, CLS, INP performance optimization
Load
```
technical-seo
```
skill for crawlability, rendering strategy, and site architecture

如需详细的框架专属SEO模式，请加载对应的参考文件：

```
references/nextjs-seo.md
```
- Next.js App Router Metadata API、generateMetadata、sitemap.ts、robots.ts、使用next/og生成动态OG图片
```
references/nuxt-seo.md
```
- Nuxt 3 useSeoMeta、useHead、nuxt-seo模块、OG图片生成、站点地图和robots模块
```
references/astro-seo.md
```
- Astro SEO组件模式、带前置SEO的内容集合、站点地图集成、astro-seo包
```
references/remix-seo.md
```
- Remix meta函数（V2规范）、基于loader的动态元数据、父路由元数据合并、规范网址

on-site-seo

Original

Translation

On-Site SEO

站内SEO

When to use this skill

何时使用此技能

Key principles

核心原则

Core concepts

核心概念

The on-page SEO hierarchy

页面SEO权重层级

Meta robots directives

Robots元标签指令

Open Graph protocol

Open Graph协议

Canonical URLs

规范网址（Canonical URLs）

Semantic HTML5 and SEO value

语义化HTML5的SEO价值

Common tasks

常见任务

1. Set up complete meta tags for a page

1. 为页面配置完整的元标签

2. Implement Open Graph and Twitter Card tags

2. 实现Open Graph和Twitter Card标签

3. Structure headings correctly

3. 正确设置标题层级

4. Optimize images for SEO

4. 优化图片以适配SEO

5. Build internal linking patterns

5. 构建内部链接模式

6. Add semantic HTML to page structure

6. 为页面添加语义化HTML结构

7. Next.js App Router - generateMetadata

7. Next.js App Router - generateMetadata

8. Nuxt 3 - useSeoMeta

8. Nuxt 3 - useSeoMeta

Anti-patterns / common mistakes

反模式/常见错误

References

参考资料

Related skills

相关技能