diff options
| author |  Caleb Jasik <calebjasik@jasik.xyz>
| 2021-08-23 15:08:20 -0500 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2021-08-23 15:08:20 -0500 |
| commit | 2fd004dcd99c09fc8eae423c24b31313568f039f (patch) | |
| tree | eb41923e718e63eea6ec3d40084e377a88b534e7 /docs/src/components | |
| parent | 3963cef96378cdb464499dd5d878077544849e22 (diff) | |
| download | astro-2fd004dcd99c09fc8eae423c24b31313568f039f.tar.gz astro-2fd004dcd99c09fc8eae423c24b31313568f039f.tar.zst astro-2fd004dcd99c09fc8eae423c24b31313568f039f.zip | |
Add a `titleClosure` to the `HeadSEO.astro` component (#1140)
* Testing out adding a `titleClosure` to the `HeadSEO.astro` component
I think the api needs a bit of improvement, but the basic idea is you can pass this in to a published astro component for specifying how you want it to format your title!
* Refactor to make it pretty
* Rename the `titleClosure()` prop to `formatTitle()` to be more clear
* Use title, with site title as the fallback (#1143)
See og:title guidance (https://developers.facebook.com/docs/sharing/webmasters/)
Co-authored-by: Jonathan Neal <jonathantneal@hotmail.com>
Diffstat (limited to 'docs/src/components')
| -rw-r--r-- | docs/src/components/HeadSEO.astro | 10 |
1 files changed, 6 insertions, 4 deletions
diff --git a/docs/src/components/HeadSEO.astro b/docs/src/components/HeadSEO.astro index 5553eb2d0..be6b016c7 100644 --- a/docs/src/components/HeadSEO.astro +++ b/docs/src/components/HeadSEO.astro @@ -5,8 +5,10 @@ export interface Props { site: any, canonicalURL: URL | string, }; -const { content = {}, canonicalURL } = Astro.props; -const formattedContentTitle = content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title; +const { + content = {}, + canonicalURL, + } = Astro.props; 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; @@ -15,7 +17,7 @@ const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt; <link rel="canonical" href={canonicalURL}/> <!-- OpenGraph Tags --> -<meta property="og:title" content={formattedContentTitle}/> +<meta property="og:title" content={content.title ?? SITE.title}/> <meta property="og:type" content="article"/> <meta property="og:url" content={canonicalURL}/> <meta property="og:locale" content={content.ogLocale ?? OPEN_GRAPH.locale}/> @@ -27,7 +29,7 @@ const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt; <!-- 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:title" content={content.title ?? SITE.title}/> <meta name="twitter:description" content={content.description ? content.description : SITE.description}/> <meta name="twitter:image" content={canonicalImageSrc}/> <meta name="twitter:image:alt" content={imageAlt}/> |