Menu
Use when creating or editing pages, blog posts, or content files, adding meta tags, or when Lighthouse SEO drops below 90.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Use when creating or modifying any UI element visible to the user, reviewing HTML markup, adding interactive elements, or when Lighthouse Accessibility drops below 90.
Use when creating or modifying .astro/.tsx files, configuring astro.config.mjs, working with Content Collections, or when TypeScript or build errors occur.
Use when completing any task (final validation step), running audits, preparing for deployment, or when ESLint/TypeScript/build errors occur.
Use when writing or reviewing any CSS class, changing colors, modifying globals.css, or when hardcoded colors or inline styles are detected.
Use when creating or modifying any visible UI element, adjusting spacing or typography, reviewing visual consistency, or when Lighthouse Performance drops below 90.
Use when starting work on an AstroDeck project, needing to understand the project structure, or looking up available components, sections, and layouts.
| name | content-seo |
| description | Use when creating or editing pages, blog posts, or content files, adding meta tags, or when Lighthouse SEO drops below 90. |
This skill references the following globals — read them BEFORE starting work:
system/globals/imagery.md— Alt text conventions, image formats
Content Collections, Meta Tags, OpenGraph, Structured Data, RSS, Sitemap
| Metric | Target | Measurement |
|---|---|---|
| Lighthouse SEO | >90 | Lighthouse JSON → categories.seo.score * 100 |
| Pages without Description | 0 | npm run check:kpis |
| Pages without OG-Image | 0 | HTML check in dist/ |
// src/content.config.ts
import { defineCollection } from 'astro:content';
import { z } from 'astro/zod';
import { glob } from 'astro/loaders';
const blog = defineCollection({
loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/blog' }),
schema: z.object({
title: z.string(),
description: z.string().max(160),
pubDate: z.coerce.date(),
updatedDate: z.coerce.date().optional(),
heroImage: z.string().optional(),
draft: z.boolean().default(false),
tags: z.array(z.string()).default([]),
author: z.string().default('Team'),
}),
});
---
import BaseLayout from '@/layouts/BaseLayout.astro';
const title = "Page Title — Brand Name";
const description = "Page description, 150-160 characters, relevant keyword at the start.";
---
<BaseLayout title={title} description={description}>
<!-- Content -->
</BaseLayout>
<meta property="og:title" content="{title}" />
<meta property="og:description" content="{description}" />
<meta property="og:image" content="{siteUrl}/og-image.png" />
<meta property="og:url" content="{canonicalUrl}" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="{siteName}" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="{title}" />
<meta name="twitter:description" content="{description}" />
<meta name="twitter:image" content="{siteUrl}/og-image.png" />
<link rel="canonical" href={Astro.url.href} />
// astro.config.mjs
import sitemap from '@astrojs/sitemap';
export default defineConfig({
site: 'https://example.com', // REQUIRED for sitemap
integrations: [sitemap()],
});
site in astro.config.mjs MUST be setnpm run builddist/sitemap-index.xml// src/pages/rss.xml.ts
import rss from '@astrojs/rss';
import { getCollection } from 'astro:content';
export async function GET(context) {
const blog = await getCollection('blog');
return rss({
title: 'Blog Title',
description: 'Blog Description',
site: context.site,
items: blog.map((post) => ({
title: post.data.title,
pubDate: post.data.pubDate,
description: post.data.description,
link: `/blog/${post.id}/`,
})),
});
}
<script type="application/ld+json" set:html={JSON.stringify({
"@context": "https://schema.org",
"@type": "WebSite",
"name": siteName,
"url": siteUrl,
})} />
For blog posts:
<script type="application/ld+json" set:html={JSON.stringify({
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": title,
"description": description,
"datePublished": pubDate,
"author": { "@type": "Person", "name": author },
})} />
These rules always apply — even under time pressure, even when "SEO isn't that important":
<h1>. Zero or multiple h1s destroy heading hierarchy and cost SEO points.Read LEARNINGS.md in this directory to avoid known anti-patterns.