strudel/website/src/components/HeadSEO.astro
2023-02-05 17:19:32 +01:00

36 lines
1.4 KiB
Plaintext

---
import { SITE, OPEN_GRAPH, Frontmatter } from '../config';
export interface Props {
frontmatter: Frontmatter;
canonicalUrl: URL;
}
const { frontmatter, canonicalUrl } = Astro.props as Props;
const formattedContentTitle = `${frontmatter.title} 🚀 ${SITE.title}`;
const imageSrc = frontmatter.image?.src ?? OPEN_GRAPH.image.src;
const canonicalImageSrc = new URL(imageSrc, Astro.site);
const imageAlt = frontmatter.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={frontmatter.ogLocale ?? SITE.defaultLanguage} />
<meta property="og:image" content={canonicalImageSrc} />
<meta property="og:image:alt" content={imageAlt} />
<meta name="description" property="og:description" content={frontmatter.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={frontmatter.description ?? SITE.description} />
<meta name="twitter:image" content={canonicalImageSrc} />
<meta name="twitter:image:alt" content={imageAlt} />