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>

4 files changed, 55 insertions, 1 deletions

diff --git a/docs/public/default-og-image.png b/docs/public/default-og-image.png
new file mode 100644
index 000000000..390a4b605
--- /dev/null
+++ b/docs/public/default-og-image.png
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
+-->
diff --git a/docs/src/config.ts b/docs/src/config.ts
index b24b5c499..a9f5258f9 100644
--- a/docs/src/config.ts
+++ b/docs/src/config.ts
@@ -70,4 +70,16 @@ export const sidebar = [
 
 export const site = {
   title: 'Astro Documentation',
+  description: 'Build faster websites with less client-side Javascript',
+  ogLocale: 'en_US',
+  image: {
+    src: '/default-og-image.png?v=1',
+    alt:
+      'astro logo on a starry expanse of space,' +
+      ' with a purple saturn-like planet floating in the right foreground',
+  },
+  twitter: {
+    site: 'astrodotbuild',
+    creator: 'astrodotbuild',
+  },
 };
diff --git a/docs/src/layouts/Main.astro b/docs/src/layouts/Main.astro
index 25292896f..e9805dc42 100644
--- a/docs/src/layouts/Main.astro
+++ b/docs/src/layouts/Main.astro
@@ -4,6 +4,7 @@ import SiteSidebar from '../components/SiteSidebar.astro';
 import ThemeToggle from '../components/ThemeToggle.tsx';
 import DocSidebar from '../components/DocSidebar.tsx';
 import MenuToggle from '../components/MenuToggle.tsx';
+import MetaData from "../components/MetaData.astro";
 import { site } from "../config.ts";
 
 const { content = {}, centered = false } = Astro.props;
@@ -22,6 +23,7 @@ if (currentPage) {
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     
     <title>{content.title ? `${content.title} 🚀 ${site.title}` : site.title}</title>
+    <MetaData {content} canonicalURL={Astro.request.canonicalURL}/>
 
     <!-- This is intentionally inlined to avoid FOUC -->
     <script>
@@ -45,7 +47,9 @@ if (currentPage) {
 
     <link rel="icon" 
           type="image/svg+xml" 
-          href="/favicon.svg">
+          href="/favicon.svg"/>
+
+    <link rel="sitemap" href="/sitemap.xml"/>
 
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>