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 | |
| 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')
| -rw-r--r-- | docs/src/components/HeadSEO.astro | 10 | ||||
| -rw-r--r-- | docs/src/layouts/MainLayout.astro | 3 |
2 files changed, 8 insertions, 5 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}/> diff --git a/docs/src/layouts/MainLayout.astro b/docs/src/layouts/MainLayout.astro index bfee61cd9..45eab6d0f 100644 --- a/docs/src/layouts/MainLayout.astro +++ b/docs/src/layouts/MainLayout.astro @@ -12,13 +12,14 @@ const { content = {} } = Astro.props; const currentPage = Astro.request.url.pathname; const currentFile = `src/pages${currentPage.replace(/\/$/, "")}.md`; const githubEditUrl = `https://github.com/snowpackjs/astro/blob/main/docs/${currentFile}`; +const formatTitle = (content, SITE) => content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title; --- <html dir="{content.dir ?? 'ltr'}" lang="{content.lang ?? 'en-us'}" class="initial"> <head> <HeadCommon /> <HeadSEO {content} canonicalURL={Astro.request.canonicalURL} /> - <title>{content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title}</title> + <title>{formatTitle(content, SITE)}</title> <style> body { width: 100%; |