feat: add more og tags to our blogs (#240)

* feat: add more og tags to our blogs This includes the twitter tags: https://developer.x.com/en/docs/x-for-websites/cards/guides/getting-started And the "article" type tags: https://ogp.me/#type_article * fix: make image urls absolute * chore: move comment and fix cspell
shorebirdtech · Jan 30, 2025 · a24a646 · a24a646
1 parent d273bb7
commit a24a646
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 6 deletions.
diff --git a/src/components/Author.astro b/src/components/Author.astro
@@ -4,31 +4,37 @@ import felixHeadshot from '../assets/images/felix-headshot.jpeg';
 import bryanHeadshot from '../assets/images/bryan-headshot.png';
 import shorebirdHeadshot from '../assets/images/shorebird-headshot.png';
 
+// cspell:words shorebirddev felangelov
+
 interface Author {
   name: string;
   title: string;
   avatar: ImageMetadata;
   github: string;
+  twitter?: string;
 }
 
-const authors: Record<string, Author> = {
+export const authors: Record<string, Author> = {
   shorebirdtech: {
     name: 'Shorebird',
     title: 'The Shorebird Team',
     avatar: shorebirdHeadshot,
     github: 'shorebirdtech',
+    twitter: '@shorebirddev',
   },
   eseidel: {
     name: 'Eric Seidel',
     title: 'Founder & CEO',
     avatar: ericHeadshot,
     github: 'eseidel',
+    twitter: '@_eseidel',
   },
   felangel: {
     name: 'Felix Angelov',
     title: 'Founding Engineer',
     avatar: felixHeadshot,
     github: 'felangel',
+    twitter: '@felangelov',
   },
   bryanoltman: {
     name: 'Bryan Oltman',
@@ -40,6 +46,7 @@ const authors: Record<string, Author> = {
 
 const { handle } = Astro.props;
 const author = authors[handle];
+
 ---
 
 <div class="flex items-center">

diff --git a/src/layouts/BlogLayout.astro b/src/layouts/BlogLayout.astro
@@ -1,12 +1,13 @@
 ---
+// cspell:words shorebirddev
 import '@fontsource/inter';
 import '@fontsource/inter/500.css';
 import '@fontsource/inter/600.css';
 import '@fontsource/inter/700.css';
 import '@fontsource/inter/800.css';
 import '@fontsource/inter/900.css';
 import { config } from '~/config';
-import Author from '~/components/Author.astro';
+import Author, { authors } from '~/components/Author.astro';
 import FormattedDate from '~/components/FormattedDate.astro';
 import { Navbar } from '~/components/Navbar';
 import { Footer } from '~/components/Footer';
@@ -15,6 +16,15 @@ import { BlogFooterPitch } from '~/components/BlogFooterPitch';
 import '../styles/Theme.css';
 
 const { title, description, author, date, cover, coverAlt } = Astro.props;
+
+// og:image is expected to be an absolute url beginning with http or https
+const coverUrl = new URL(cover ? cover : '/open-graph.png', Astro.url.origin);
+// Always use Astro.site (production url) rather than a test domain.
+const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
+// See also https://ogp.me/#type_article
+// Could also add og:tags here if we added them to the frontmatter for the
+// individual blog posts.  I'm not sure what, if any, sites crawl for the
+// og:tags property.
 ---
 
 <!doctype html>
@@ -27,12 +37,22 @@ const { title, description, author, date, cover, coverAlt } = Astro.props;
     <meta name="generator" content={Astro.generator} />
     <meta name="description" content={description} />
     <meta property="og:description" content={description} />
-    <meta property="og:image" content={cover ? cover : '/open-graph.png'} />
+    <meta property="og:image" content={coverUrl} />
     <meta property="og:url" content={Astro.site} />
     <meta property="og:title" content={title} />
-    <meta name="twitter:image" content={cover ? cover : '/open-graph.png'} />
+    <meta name="twitter:image" content={coverUrl} />
     <meta name="twitter:card" content="summary_large_image" />
-    <link rel="canonical" href={new URL(Astro.url.pathname, Astro.site)} />
+    <link rel="canonical" href={canonicalUrl} />
+    <meta property="og:type" content="article" />
+    <meta property="article:published_time" content={date} />
+    <meta property="article:author" content={author} />
+    <meta property="article:section" content="Technology" />
+    <meta name="twitter:site" content="@shorebirddev" />
+    {
+      authors[author].twitter && (
+        <meta name="twitter:creator" content={authors[author].twitter} />
+      )
+    }
     <script
       defer
       data-domain="shorebird.dev"
@@ -56,7 +76,7 @@ const { title, description, author, date, cover, coverAlt } = Astro.props;
       }
       <hr class="my-8" />
       <slot />
-      <BlogFooterPitch />      
+      <BlogFooterPitch />
     </div>
     <Footer client:load />
     <style is:global>