fix(landing): use blog metadata for social previews

apps/landing/src/features/blog/images.ts

@@ -5,29 +5,7 @@ import { ONEQUERY } from "@/shared/seo/constants";
 import type { SeoImage } from "@/shared/seo/constants";
 import { toAbsoluteSiteUrl } from "@/shared/seo/schema";
 
-import type { BlogPost, BlogPostSummary } from "./types";
-
-const BLOG_SHARE_IMAGE = {
-  MAX_RATIO: 2.2,
-  MIN_RATIO: 1.45,
-  MIN_WIDTH: 1200,
-} as const;
-
-function isPreferredShareImage(image: ImageMetadata) {
-  const ratio = image.width / image.height;
-
-  return (
-    image.width >= BLOG_SHARE_IMAGE.MIN_WIDTH &&
-    ratio >= BLOG_SHARE_IMAGE.MIN_RATIO &&
-    ratio <= BLOG_SHARE_IMAGE.MAX_RATIO
-  );
-}
-
-export function getPreferredBlogShareImage(post: Pick<BlogPost, "coverImage">) {
-  return isPreferredShareImage(post.coverImage.src)
-    ? post.coverImage.src
-    : undefined;
-}
+import type { BlogPostSummary } from "./types";
 
 export async function getBlogShareImage(
   image: ImageMetadata | undefined,
@@ -65,3 +43,5 @@ export async function getBlogShareImagesBySlug(
     )
   );
 }
+
+export { getBlogShareImageSource } from "./share-image";

apps/landing/src/features/blog/share-image.test.ts

@@ -0,0 +1,24 @@
+import type { ImageMetadata } from "astro";
+import { describe, expect, it } from "vitest";
+
+import { getBlogShareImageSource } from "./share-image";
+
+describe("getBlogShareImageSource", () => {
+  it("uses a square blog thumbnail as the social share image", () => {
+    const thumbnail = {
+      format: "png",
+      height: 1254,
+      src: "/images/hunting-web-bugs-with-jam-and-agents-icon.png",
+      width: 1254,
+    } as ImageMetadata;
+
+    expect(
+      getBlogShareImageSource({
+        coverImage: {
+          alt: "OneQuery connected to Jam",
+          src: thumbnail,
+        },
+      })
+    ).toBe(thumbnail);
+  });
+});

apps/landing/src/features/blog/share-image.ts

@@ -0,0 +1,5 @@
+import type { BlogPost } from "./types";
+
+export function getBlogShareImageSource(post: Pick<BlogPost, "coverImage">) {
+  return post.coverImage.src;
+}

apps/landing/src/layouts/BaseLayout.astro

@@ -60,6 +60,7 @@ const {
   robots = "index, follow, max-image-preview:large",
   structuredData = DEFAULT_STRUCTURED_DATA,
   title = DEFAULT_TITLE,
+  ogTitle = title,
   twitterTitle = title,
 } = Astro.props;
 ---
@@ -87,6 +88,7 @@ const {
       openGraph={{
         locale: "en_US",
         siteName: ONEQUERY.NAME,
+        title: ogTitle,
         type: ogType,
       }}
       robots={robots}

apps/landing/src/layouts/types.ts

@@ -10,6 +10,7 @@ export interface PageMetadata {
   imageWidth?: number;
   keywords?: string | null;
   metaTags?: MetaTag[];
+  ogTitle?: string;
   ogType?: "article" | "website";
   robots?: string;
   structuredData?: StructuredData | StructuredData[] | null;

apps/landing/src/pages/blog/[postSlug].astro

@@ -10,7 +10,7 @@ import {
 } from "@/features/blog/collection";
 import {
   getBlogShareImage,
-  getPreferredBlogShareImage,
+  getBlogShareImageSource,
 } from "@/features/blog/images";
 import { ONEQUERY } from "@/shared/seo/constants";
 import {
@@ -36,7 +36,7 @@ const { Content, headings, remarkPluginFrontmatter } = await render(entry);
 const post = toBlogPost(entry, { headings, remarkPluginFrontmatter });
 const postSummaries = await getBlogPostSummaries();
 const shareImage = await getBlogShareImage(
-  getPreferredBlogShareImage(post),
+  getBlogShareImageSource(post),
   Astro.site
 );
 const canonicalUrl = createCanonicalUrl(`/blog/${post.slug}`, Astro.site);
@@ -77,6 +77,7 @@ const articleMetaTags = [
   imageWidth={shareImage.width}
   keywords={getBlogPostKeywords(post)}
   metaTags={articleMetaTags}
+  ogTitle={post.title}
   ogType="article"
   structuredData={structuredData}
   title={title}