[Part 5] How to Create Astro Archive Pages – Categories, Tags, Topics & SEO (AI Workflow Breakdown)

Create a main posts archive page for this Astro project.

Requirements:

• Inspect the existing project structure, layouts, SEO/meta pattern, and content collection setup first.
• Create or update the route for /posts/ using the project’s existing conventions.
• Query all entries from the posts content collection.
• Sort posts using the project’s existing date field or, if needed, the most likely publish date field.
• Add page-level SEO metadata for the archive page using the existing SEO/layout pattern.
• Keep the first version simple: page scaffold, query, sort, and placeholder rendering if needed.
• Do not create silo archive pages yet.
• Do not invent a new design system if components/styles already exist.

Before editing, briefly explain the files you plan to touch and why.

Create a reusable ArchiveHero component for the /posts/ archive page in this Astro project based on the posts content collection layout and style along with the home page's style.

Requirements:

• Inspect existing hero/header components first and reuse the project’s design conventions where possible.
• The component should display visible page intro content, not manage SEO metadata.
• It should accept props for heading/title, eyebrow or kicker text, description/intro copy, optional primary CTA, optional secondary CTA, and optional image if that fits the existing project pattern.
• Keep the component generic enough to work for /posts/ and topic/silo archive pages.
• Do not hard-code project-specific copy inside the component.
• Do not change page-level meta handling; that belongs in the page/layout pattern.

Before editing, explain whether you are creating a new component or adapting an existing one.

Create or update an archive-specific PostCard component for posts from the Astro content collection.

Requirements:

• Inspect the existing post layout, content schema, image fields, and link/URL conventions before editing.
• Inspect any existing card, post card, blog card, or listing components before creating or changing anything.
• Do not confuse this archive post card with unrelated card or listing components already used elsewhere on the website.
• Do not merge this with an existing card component unless you verify that existing component is actually meant for archive post previews and can be reused without breaking other parts of the site.
• The component should render one post card from a post collection entry or a normalized post object.
• Include the post title, description/excerpt, link, date if available, silo/category label if available, and featured image if the post data includes one.
• Use the project’s existing image handling pattern. Do not assume a field name until you inspect the content schema/frontmatter.
• Keep styling consistent with the existing site.
• Do not query posts inside this component. It should only render one post passed to it.

Before editing, explain the expected data shape you found, whether you found any existing card components, and whether you are creating a new archive-specific card or safely adapting an existing one.

Create a reusable ArchiveCtaCard component and add simple CTA insertion support to the archive posts cards display. This component will be used in the /posts/ archive page

Requirements:

• Inspect the existing CTA/button/card patterns before creating anything new.
• The CTA card should be generic and accept props such as heading, text, button label, and href.
• It should be visually compatible with the post archive, but it must be clear that it is a CTA, not a real post.
• Add a simple way to insert the CTA once into the archive list, such as after a chosen number of posts.
• Do not repeat the CTA every few posts unless there is already a strong reason in the project.
• Keep the insertion logic easy to understand.
• Make sure the archive still works if there are fewer posts than the insertion position.

Before editing, explain where the CTA insertion logic should live: in the page, directly in the archive rendering loop, or in a small helper function, based on the existing project structure.

Add pagination to the main posts archive in this Astro project.

Requirements:

• Inspect the existing routing conventions and whether Astro paginate() is already used anywhere.
• Use the project’s preferred URL pattern if one exists.
• Paginate the already-sorted posts collection for the /posts/ archive.
• Create or reuse a Pagination component for previous/next and/or page-number navigation.
• Preserve page-level SEO metadata for paginated pages where appropriate.
• Keep the implementation simple and explainable for a tutorial.
• Do not add silo archive pagination yet unless it naturally reuses the same helper/component.

Before editing, explain the route/file structure Astro needs for this project’s pagination pattern.

Create the first dedicated silo archive page for this Astro project.

Requirements:

• Use a dedicated Astro page route, not a shared dynamic silo route.
• Start with one silo page, such as /seo-for-electricians/, but adapt the exact route to the project’s naming conventions.
• Inspect the posts content collection schema/frontmatter to confirm the correct silo/category field and values.
• Query posts from the posts collection and filter to only posts that belong to this silo.
• Reuse the archive hero, archive-specific post card, CTA card, and pagination patterns created for the main posts archive where appropriate. Do not accidentally use an unrelated existing card or listing component unless it was intentionally selected for archive post previews.
• Add page-level SEO metadata for this specific silo page using the existing project SEO pattern.
• Keep the page simple for now, but structure it so custom sections can be added later above, below, or around the dynamic post archive.

Before editing, explain what silo field/value you found and which files you plan to touch.

Create the remaining dedicated silo archive pages using the first silo archive page as the pattern.

Requirements:

• Inspect the first silo archive implementation before editing.
• Create one dedicated Astro page per remaining silo.
• For each page, update the route, page-level SEO metadata, visible hero copy, and silo filter value.
• Reuse the same archive components and pagination pattern where appropriate.
• Keep the pages simple, but do not lock them into a shared dynamic template because each page may become a custom SEO landing page later.
• Keep the CTA card the same unless the project already has clear silo-specific CTA copy.
• Avoid duplicating complex logic if it can safely be extracted into a small helper without making the tutorial harder to follow.

Before editing, list the silo pages you will create and the filter value each one will use.

Run a quality assurance pass on the archive pages.

Requirements:

• Verify that the main /posts/ archive loads and displays the expected posts.
• Verify that each dedicated silo archive page loads and only displays posts from the correct silo.
• Check post links, featured images, page headings, visible descriptions, CTA card placement, and pagination if pagination was added.
• Check that each archive page has appropriate page-level SEO metadata using the project’s existing SEO pattern.
• Run the smallest meaningful validation available in this project, such as typecheck, lint, build, or the project’s standard validation command.
• Report any issues found and suggest fixes before making large changes.