Closed rnwolf closed 2 years ago
I have used the following approach:
---
// src/layouts/BaseSEO.astro
import { SEO } from "astro-seo";
const {
title = "Default page title",
sometitle = "Some page title",
description = "default description",
openGraphBasicTitle = "Default OG title",
openGraphBasicType = "website",
openGraphBasicImage = "https://via.placeholder.com/300x600.png",
openGraphImageAlt = "A description of what we can see on the image",
openGraphImageWidth = 300,
openGraphImageHeight = 600,
openGraphBasicUrl = "https://via.placeholder.com/300.png",
} = Astro.props;
---
<SEO
{title}
{description}
openGraph={{
basic: {
title: sometitle,
type: "website",
image: openGraphBasicImage,
url: "smiley",
},
image: {
secureUrl: openGraphBasicImage,
type: "image/png",
width: openGraphImageWidth,
height: openGraphImageHeight,
alt: openGraphImageAlt,
},
}}
/>
and then use it as follows
---
// /src/pages/seo.astro
// import { SEO } from "astro-seo";
import { Markdown } from "astro/components";
import BaseSEO from "../layouts/BaseSEO.astro";
---
<BaseSEO title="Default title foo" />
<Markdown>
# This is a header
This is some text
</Markdown>
Could you provide an example of the use of default values for the SEO component? Default OpenGraph values for example.
Regular astro pages have the same default opengraph values and then blog posts might specifically have an image that is used for OpenGraph image and text on the blog post page.
This is most probably a basic javascript question but unfortunately, I dable mainly in python.