Merge pull request #271 from CSSLab/codex/www-og-image

Set global OG image to og-maia

Author: ashtonanderson

public/assets/og-maia.png

@@ -35,6 +35,7 @@ import {
 import { browserPostHogConfig } from 'src/lib/posthog-browser-config'
 
 const openSansClassName = 'font-sans'
+const OG_IMAGE_URL = 'https://www.maiachess.com/assets/og-maia.png'
 
 function MaiaPlatform({ Component, pageProps }: AppProps) {
   const router = useRouter()
@@ -100,7 +101,9 @@ function MaiaPlatform({ Component, pageProps }: AppProps) {
             <link rel="apple-touch-icon" href="/maia-ios-icon.png" />
 
             {/* Open Graph meta tags for social media embeds */}
-            <meta property="og:image" content="/embed.png" />
+            <meta property="og:image" content={OG_IMAGE_URL} />
+            <meta property="og:image:url" content={OG_IMAGE_URL} />
+            <meta property="og:image:secure_url" content={OG_IMAGE_URL} />
             <meta property="og:image:alt" content="Maia Chess" />
             <meta property="og:image:type" content="image/png" />
             <meta property="og:image:width" content="1200" />
@@ -109,7 +112,8 @@ function MaiaPlatform({ Component, pageProps }: AppProps) {
 
             {/* Twitter Card meta tags */}
             <meta name="twitter:card" content="summary_large_image" />
-            <meta name="twitter:image" content="/embed.png" />
+            <meta name="twitter:image" content={OG_IMAGE_URL} />
+            <meta name="twitter:image:src" content={OG_IMAGE_URL} />
             <meta name="twitter:image:alt" content="Maia Chess" />
           </Head>
 

src/pages/_app.tsx

@@ -7,6 +7,8 @@ import { Post } from 'src/types'
 import { Markdown } from 'src/components'
 import { getSortedPostsData, getPostData } from 'src/lib/blog/posts'
 
+const OG_IMAGE_URL = 'https://www.maiachess.com/assets/og-maia.png'
+
 interface BlogPostProps {
   post: Post
 }
@@ -30,22 +32,19 @@ const BlogPost = ({ post }: BlogPostProps) => {
         <meta property="og:type" content="article" />
         <meta
           property="og:url"
-          content={`https://maiachess.com/blog/${post.id}`}
-        />
-        <meta
-          property="og:image"
-          content={`https://maiachess.com${post.image}`}
+          content={`https://www.maiachess.com/blog/${post.id}`}
         />
+        <meta property="og:image" content={OG_IMAGE_URL} />
+        <meta property="og:image:url" content={OG_IMAGE_URL} />
+        <meta property="og:image:secure_url" content={OG_IMAGE_URL} />
         <meta property="og:site_name" content="Maia Chess" />
 
         {/* Twitter Card */}
         <meta name="twitter:card" content="summary_large_image" />
         <meta name="twitter:title" content={post.title} />
         <meta name="twitter:description" content={post.excerpt} />
-        <meta
-          name="twitter:image"
-          content={`https://maiachess.com${post.image}`}
-        />
+        <meta name="twitter:image" content={OG_IMAGE_URL} />
+        <meta name="twitter:image:src" content={OG_IMAGE_URL} />
 
         {/* Article specific */}
         <meta property="article:published_time" content={post.date} />
@@ -57,7 +56,10 @@ const BlogPost = ({ post }: BlogPostProps) => {
         {/* Additional SEO */}
         <meta name="author" content="Maia Chess Team" />
         <meta name="robots" content="index, follow" />
-        <link rel="canonical" href={`https://maiachess.com/blog/${post.id}`} />
+        <link
+          rel="canonical"
+          href={`https://www.maiachess.com/blog/${post.id}`}
+        />
       </Head>
       <div className="relative flex h-full flex-col items-center justify-center gap-5 py-[10%] md:py-[2%]">
         <div className="flex max-w-[90%] flex-col items-center justify-center overflow-x-hidden md:max-w-[80ch]">

src/pages/blog/[id].tsx

@@ -3,6 +3,8 @@ import Link from 'next/link'
 import { Post } from 'src/types'
 import { getSortedPostsData } from 'src/lib/blog/posts'
 
+const OG_IMAGE_URL = 'https://www.maiachess.com/assets/og-maia.png'
+
 export default function Blog({ posts }: { posts: Post[] }) {
   return (
     <>
@@ -20,11 +22,10 @@ export default function Blog({ posts }: { posts: Post[] }) {
           content="Read the latest insights from the Maia Chess team about human-like chess AI, research updates, and platform developments."
         />
         <meta property="og:type" content="website" />
-        <meta property="og:url" content="https://maiachess.com/blog" />
-        <meta
-          property="og:image"
-          content="https://maiachess.com/maia-og-image.png"
-        />
+        <meta property="og:url" content="https://www.maiachess.com/blog" />
+        <meta property="og:image" content={OG_IMAGE_URL} />
+        <meta property="og:image:url" content={OG_IMAGE_URL} />
+        <meta property="og:image:secure_url" content={OG_IMAGE_URL} />
         <meta property="og:site_name" content="Maia Chess" />
 
         {/* Twitter Card */}
@@ -34,15 +35,13 @@ export default function Blog({ posts }: { posts: Post[] }) {
           name="twitter:description"
           content="Read the latest insights from the Maia Chess team about human-like chess AI, research updates, and platform developments."
         />
-        <meta
-          name="twitter:image"
-          content="https://maiachess.com/maia-og-image.png"
-        />
+        <meta name="twitter:image" content={OG_IMAGE_URL} />
+        <meta name="twitter:image:src" content={OG_IMAGE_URL} />
 
         {/* Additional SEO */}
         <meta name="author" content="Maia Chess Team" />
         <meta name="robots" content="index, follow" />
-        <link rel="canonical" href="https://maiachess.com/blog" />
+        <link rel="canonical" href="https://www.maiachess.com/blog" />
       </Head>
       <div className="relative mx-auto flex h-full w-[90%] flex-col items-start justify-center gap-5 py-[10%] md:py-[2%]">
         <h1 className="text-4xl font-bold">Blog</h1>