diff options
| author |  Caleb Jasik <calebjasik@jasik.xyz>
| 2021-07-20 21:52:26 -0500 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2021-07-20 21:52:26 -0500 |
| commit | 2a7654edf30a418f33d47fd5117965efa95cb6d0 (patch) | |
| tree | ba7401b8cf79499d8237ef480b5680f2e22897b6 /docs/src/components | |
| parent | 8eeb6b4fe8e116f34a2058891d180dbb6fbcdc29 (diff) | |
| download | astro-2a7654edf30a418f33d47fd5117965efa95cb6d0.tar.gz astro-2a7654edf30a418f33d47fd5117965efa95cb6d0.tar.zst astro-2a7654edf30a418f33d47fd5117965efa95cb6d0.zip | |
Docs/ Add MetaData component for Open Graph and Twitter embeds (#784)
* Docs/ Add MetaData component for Open Graph and Twitter embeds
* Switch twitter card type to `summary_large_image`
* Add a version tag to the default-og-image url for cache busting
* Update docs/src/config.ts
Co-authored-by: Fred K. Schott <fkschott@gmail.com>
* Incorporate changes from review
* Construct `canonicalImageSrc` from `Astro.site`, which is not useful now, but could be if #788 is implemented
Co-authored-by: Fred K. Schott <fkschott@gmail.com>
Diffstat (limited to 'docs/src/components')
| -rw-r--r-- | docs/src/components/MetaData.astro | 38 |
1 files changed, 38 insertions, 0 deletions
diff --git a/docs/src/components/MetaData.astro b/docs/src/components/MetaData.astro new file mode 100644 index 000000000..ec62749b0 --- /dev/null +++ b/docs/src/components/MetaData.astro @@ -0,0 +1,38 @@ +--- +import { site } from '../config.ts'; +const { content = {}, canonicalURL } = Astro.props; +const formattedContentTitle = content.title ? `${content.title} 🚀 ${site.title}` : site.title; +const imageSrc = content?.image?.src ?? site.image.src; +const canonicalImageSrc = new URL(imageSrc, Astro.site); +const imageAlt = content?.image?.alt ?? site.image.alt; +--- + +<!-- 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 ?? site.ogLocale}/> +<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}/> +<!-- END OpenGraph Tags --> + +<!-- Twitter Tags --> +<meta name="twitter:card" content="summary_large_image"/> +<meta name="twitter:site" content={site.twitter.site}/> +<meta name="twitter:creator" content={site.twitter.creator}/> +<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}/> +<!-- END Twitter Tags --> + +<link rel="canonical" href={canonicalURL}/> + +<!-- + 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 +--> |