Default values and overiding them

[rnwolf]

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.

---
import { SEO } from "astro-seo";
import { Markdown } from "astro/components";
let noindex = true; // Override the default value here
---

<SEO
  title="Default title foo"
  description="This ios a long description"
  {noindex ? 'noindex='{noindex} : null}
/>

<Markdown>
  # This is a header

  This is some text
</Markdown>

[rnwolf]

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>