SEO in Astro v1.0.0-beta.1 is here
In this beta release, the focus was mainly on adding components to generate metadata and JSON-LD on Astro pages.
These are the most important changes.
Generate metadata and any JSON-LD
The Layout component was added that allows generating metadata and any JSON-LD.
---
import Layout from "@dlcastillop/seo-in-astro/Layout";
const jsonLd = {
"@context": "https://schema.org",
"@type": "Article",
headline: "Getting Started with Next.js",
author: {
"@type": "Person",
name: "John Doe",
},
datePublished: "2024-01-15",
};
---
<Layout
title="Getting Started with Next.js"
description="Learn how to get started with Next.js."
ogImg="/og-article.png"
jsonLd={jsonLd}
>
<article>
<h1>Getting Started with Next.js</h1>
</article>
</Layout>
Generate metadata and specific JSON-LD
4 components were added (LayoutForArticle, LayoutForBreadcrumb, LayoutForFaq and LayoutForSoftwareApp) that allow generating specific metadata and JSON-LD.
---
import LayoutForArticle from "@dlcastillop/seo-in-astro/LayoutForArticle";
---
<LayoutForArticle
title="Getting Started with Next.js"
description="Learn how to get started with Next.js."
ogImg="/og-article.png"
type="Article"
headline="Getting Started with Next.js"
images={["/article-image.jpg"]}
datePublished={new Date("2024-01-15")}
dateModified={new Date("2024-01-20")}
authors={[
{
name: "John Doe",
url: "https://example.com/authors/john-doe",
},
]}
scriptId="article-json-ld"
>
<article>
<h1>Getting Started with Next.js</h1>
</article>
</LayoutForArticle>
---
import LayoutForBreadcrumb from "@dlcastillop/seo-in-astro/LayoutForBreadcrumb";
---
<LayoutForBreadcrumb
title="Laptops"
description="All our laptops."
ogImg="/og-laptops.png"
itemList={[
{ name: "Home", route: "/" },
{ name: "Products", route: "/products" },
{ name: "Electronics", route: "/products/electronics" },
{ name: "Laptops", route: "/products/electronics/laptops" },
]}
scriptId="breadcrumb-json-ld"
>
<main>
<h1>Laptops</h1>
</main>
</LayoutForBreadcrumb>
---
import LayoutForFaq from "@dlcastillop/seo-in-astro/LayoutForFaq";
---
<LayoutForFaq
title="Frequently Asked Questions"
description="Read FAQs about Next.js."
ogImg="/og-faq.png"
faqs={[
{
question: "What is Next.js?",
answer:
"Next.js is a React framework that enables server-side rendering and static site generation.",
},
{
question: "How do I get started with Next.js?",
answer:
"You can start by installing Next.js with npm, yarn, or pnpm using the create-next-app command.",
},
{
question: "Is Next.js free to use?",
answer:
"Yes, Next.js is open-source and free to use for both personal and commercial projects.",
},
]}
scriptId="faq-json-ld"
>
<main>
<h1>Frequently Asked Questions</h1>
</main>
</LayoutForFaq>
---
import LayoutForSoftwareApp from "@dlcastillop/seo-in-astro/LayoutForSoftwareApp";
---
<LayoutForSoftwareApp
title="Task Manager Pro"
description="A powerful task management application to organize your work and boost productivity."
ogImg="/og-task-manager.png"
softwareName="Task Manager Pro"
softwareDescription="A powerful task management application to organize your work and boost productivity."
operatingSystem="Windows, macOS, Linux"
category="BusinessApplication"
offer={{
price: 29.99,
currency: "USD",
}}
rating={{
value: 4.5,
count: 1250,
}}
scriptId="app-json-ld"
>
<main>
<h1>Task Manager Pro</h1>
</main>
</LayoutForSoftwareApp>
Try it out and let me know what you think!