SEO

src/components/InterstitialTitle/style.module.css

@@ -88,6 +88,7 @@
 
 .subtitle {
   margin-top: rfs(60px);
+  line-height: 1.1;
 }
 
 .bigSubtitle {

src/layouts/docs/PageLayout/Component.astro

@@ -5,7 +5,7 @@ import { Image } from '~/components/blocks/Image';
 import { InternalVideo } from '~/components/blocks/InternalVideo';
 import { CloneButtonForm } from '~/components/docs/blocks/CloneButtonForm';
 import { Demo } from '~/components/blocks/Demo';
-import { overrideSeo, changeOgCard } from '~/lib/datocms/seo';
+import { overrideSeo, generateCard, replacePageTitle } from '~/lib/datocms/seo';
 import { DeployButtonForm } from '~/components/docs/blocks/DeployButtonForm';
 import { DocCallout } from '~/components/docs/blocks/DocCallout';
 import { MultipleDemosBlock } from '~/components/blocks/MultipleDemosBlock';
@@ -65,9 +65,9 @@ const tocGroups = [
   group={maskedGroup}
   additionalSeo={overrideSeo(
     page._seoMetaTags,
-    changeOgCard({
+    generateCard(Astro.url, {
       kicker: group ? `Documentation: ${group.name}` : 'DatoCMS Docs',
-      title: page.seo?.title || page.title,
+      title: page.title,
       pills: tocGroups.flatMap((group) => group.entries).map((entry) => entry.label),
       excerpt: page.seo?.description,
     }),

src/lib/datocms/seo.ts

@@ -28,24 +28,31 @@ function editMetaValue(propertyOrName: string, newValue: string) {
     });
 }
 
-export function changeTitle(newTitle: string) {
+export function replacePageTitle(newTitle: string) {
   return editTagContent('title', newTitle);
 }
 
-export function changeOgCard(data: OgCardData) {
-  const url = ogCardUrl(data);
+export function replaceShareTitle(newTitle: string) {
+  return [editMetaValue('og:title', newTitle), editMetaValue('twitter:title', newTitle)];
+}
+
+export const ogCardWidth = 1200;
+export const ogCardHeight = 700;
+
+export function generateCard(baseUrl: URL, data: OgCardData) {
+  const url = ogCardUrl(data, baseUrl);
 
   return [
     editMetaValue('og:image', url),
-    editMetaValue('og:image:width', '1200'),
-    editMetaValue('og:image:height', '675'),
+    editMetaValue('og:image:width', ogCardWidth.toString()),
+    editMetaValue('og:image:height', ogCardHeight.toString()),
     editMetaValue('twitter:image', url),
-    editMetaValue('twitter:image:width', '1200'),
-    editMetaValue('twitter:image:height', '675'),
+    editMetaValue('twitter:image:width', ogCardWidth.toString()),
+    editMetaValue('twitter:image:height', ogCardHeight.toString()),
   ];
 }
 
-export function changeDescription(newDescription: string) {
+export function replaceDescription(newDescription: string) {
   return [
     editMetaValue('description', newDescription),
     editMetaValue('twitter:description', newDescription),

src/lib/ogCardUrl.ts

@@ -5,8 +5,8 @@ export type OgCardData = {
   excerpt?: string | null;
 };
 
-export function ogCardUrl(data: OgCardData): string {
-  const url = new URL('/og-card.png', 'http://bogus.com');
+export function ogCardUrl(data: OgCardData, baseUrl: URL): string {
+  const url = new URL('/og-card.png', baseUrl);
   url.searchParams.set('data', JSON.stringify(data));
-  return url.pathname + url.search;
+  return url.toString();
 }

src/pages/og-card/index.png.ts

@@ -3,25 +3,11 @@ import satori from 'satori';
 import { html } from 'satori-html';
 import sharp from 'sharp';
 import css from 'style-object-to-css-string';
-import { graphql } from '~/lib/datocms/graphql';
+import { ogCardHeight, ogCardWidth } from '~/lib/datocms/seo';
 import type { OgCardData } from '~/lib/ogCardUrl';
 import { invalidRequestResponse } from '~/pages/api/_utils';
 import FullLogo from './_resources/logo.svg?raw';
 
-const query = graphql(/* GraphQL */ `
-  query OgImage($id: ItemId!) {
-    page: docPage(filter: { id: { eq: $id } }) {
-      title
-      parents: _allReferencingDocGroups {
-        name
-      }
-      content {
-        value
-      }
-    }
-  }
-`);
-
 function filterPills(pills: string[]): string[] {
   const result: string[] = [];
   let totalLength = 0;
@@ -81,7 +67,6 @@ export const GET: APIRoute = async ({ url }) => {
           flexDirection: 'column',
           alignItems: 'center',
           justifyContent: 'center',
-          fontWeight: 'bold',
           gap: '20px',
         })}"
       >
@@ -92,6 +77,7 @@ export const GET: APIRoute = async ({ url }) => {
             letterSpacing: '-0.04em',
             textTransform: 'uppercase',
             display: 'flex',
+            fontWeight: 'bold',
           })}"
         >
           ${kicker}
@@ -100,26 +86,27 @@ export const GET: APIRoute = async ({ url }) => {
           style="${css({
             fontSize: `${title.length < 40 ? 90 : 70}px`,
             letterSpacing: '-0.06em',
-            lineHeight: '1',
+            lineHeight: '0.9',
             display: 'flex',
+            fontWeight: 'bold',
           })}"
         >
           ${title}
         </div>
+        ${excerpt
+          ? `
+            <div
+              style="${css({
+                fontSize: '28px',
+                color: '#71788a',
+                letterSpacing: '-0.04em',
+              })}"
+            >
+              ${excerpt}
+            </div>
+          `
+          : ''}
       </div>
-      ${excerpt
-        ? `
-          <div
-            style="${css({
-              fontSize: '28px',
-              color: '#71788a',
-              letterSpacing: '-0.04em',
-            })}"
-          >
-            ${excerpt}
-          </div>
-        `
-        : ''}
       ${pills && pills.length > 1
         ? `
           <div
@@ -165,8 +152,8 @@ export const GET: APIRoute = async ({ url }) => {
   `);
 
   const svg = await satori(markup as any, {
-    width: 1200,
-    height: 675,
+    width: ogCardWidth,
+    height: ogCardHeight,
     fonts: [
       {
         name: 'colfax',

src/pages/partners/[partnerSlug]/index.astro

@@ -17,6 +17,13 @@ import { query, extraQuery } from './_graphql';
 import { render as structuredTextToPlainText } from 'datocms-structured-text-to-plain-text';
 import s from './_style.module.css';
 import { PluginCard } from '~/pages/marketplace/_sub/PluginCard';
+import {
+  overrideSeo,
+  replaceDescription,
+  replacePageTitle,
+  replaceShareTitle,
+} from '~/lib/datocms/seo';
+import { render as toPlainText } from 'datocms-structured-text-to-plain-text';
 
 const { partnerSlug } = Astro.params;
 const variables = { partnerSlug: partnerSlug! };
@@ -32,7 +39,14 @@ const { plugins } = await executeQuery(Astro, extraQuery, {
 });
 ---
 
-<Layout additionalSeo={page._seoMetaTags}>
+<Layout
+  additionalSeo={overrideSeo(
+    page._seoMetaTags,
+    replacePageTitle(`${page.name} | DatoCMS Partners`),
+    replaceShareTitle(`DatoCMS Partner: ${page.name}`),
+    replaceDescription(toPlainText(page.shortDescription)!),
+  )}
+>
   <InterstitialTitle style="two" bigSubtitle={true} mainTitleOfPage>
     <Fragment slot="kicker"><a href="/partner-program">DatoCMS Agency Partner</a></Fragment>
     <Fragment slot="subtitle">

src/pages/partners/index.astro

@@ -147,7 +147,11 @@ const getLabel = (count: number) => {
 const bkgColors = ['azure', 'pink', 'blue', 'green', 'yellow'] as const;
 ---
 
-<Layout additionalSeo={page._seoMetaTags}>
+<Layout additionalSeo={[]}>
+  <Fragment slot="head">
+    <title>DatoCMS Solution Partners</title>
+  </Fragment>
+
   <Hero>
     <Fragment slot="kicker">Solution Partners</Fragment>
     <Fragment slot="title">

src/pages/tech-partners/[slug]/index.astro

@@ -10,6 +10,13 @@ import { avoidAstroTypeCheckBug, notFoundResponse } from '~/lib/notFoundResponse
 import { executeQuery } from '~/lib/datocms/executeQuery';
 import { query } from './_graphql';
 import s from './_style.module.css';
+import {
+  overrideSeo,
+  replaceDescription,
+  replacePageTitle,
+  replaceShareTitle,
+} from '~/lib/datocms/seo';
+import { render as toPlainText } from 'datocms-structured-text-to-plain-text';
 
 const { slug } = Astro.params;
 const variables = { slug: slug! };
@@ -21,7 +28,14 @@ if (!page) {
 }
 ---
 
-<Layout additionalSeo={page.seo}>
+<Layout
+  additionalSeo={overrideSeo(
+    page.seo,
+    replacePageTitle(`${page.name} | DatoCMS Ecosystem Partners`),
+    replaceShareTitle(`DatoCMS Ecosystem Partner: ${page.name}`),
+    replaceDescription(toPlainText(page.shortDescription)!),
+  )}
+>
   <InterstitialTitle style="two" mainTitleOfPage bigSubtitle>
     <Fragment slot="kicker">DatoCMS Technology Partner</Fragment>
     <figure class={s.logoContainer}>