diff options
Diffstat (limited to 'examples/docs/src/components/HeadSEO.astro')
| -rw-r--r-- | examples/docs/src/components/HeadSEO.astro | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/examples/docs/src/components/HeadSEO.astro b/examples/docs/src/components/HeadSEO.astro new file mode 100644 index 000000000..5553eb2d0 --- /dev/null +++ b/examples/docs/src/components/HeadSEO.astro @@ -0,0 +1,40 @@ +--- +import {SITE, OPEN_GRAPH} from '../config.ts'; +export interface Props { + content: any, + site: any, + canonicalURL: URL | string, +}; +const { content = {}, canonicalURL } = Astro.props; +const formattedContentTitle = content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title; +const imageSrc = content?.image?.src ?? OPEN_GRAPH.image.src; +const canonicalImageSrc = new URL(imageSrc, Astro.site); +const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt; +--- +<!-- Page Metadata --> +<link rel="canonical" href={canonicalURL}/> + +<!-- OpenGraph Tags --> +<meta property="og:title" content={formattedContentTitle}/> +<meta property="og:type" content="article"/> +<meta property="og:url" content={canonicalURL}/> +<meta property="og:locale" content={content.ogLocale ?? OPEN_GRAPH.locale}/> +<meta property="og:image" content={canonicalImageSrc}/> +<meta property="og:image:alt" content={imageAlt}/> +<meta property="og:description" content={content.description ? content.description : SITE.description}/> +<meta property="og:site_name" content={SITE.title}/> + +<!-- Twitter Tags --> +<meta name="twitter:card" content="summary_large_image"/> +<meta name="twitter:site" content={OPEN_GRAPH.twitter}/> +<meta name="twitter:title" content={formattedContentTitle}/> +<meta name="twitter:description" content={content.description ? content.description : SITE.description}/> +<meta name="twitter:image" content={canonicalImageSrc}/> +<meta name="twitter:image:alt" content={imageAlt}/> + +<!-- + TODO: Add json+ld data, maybe https://schema.org/APIReference makes sense? + Docs: https://developers.google.com/search/docs/advanced/structured-data/intro-structured-data + https://www.npmjs.com/package/schema-dts seems like a great resource for implementing this. + Even better, there's a React component that integrates with `schema-dts`: https://github.com/google/react-schemaorg +--> |