Quartz4のOGPを設定した

Quartz4ではSNSなどに共有した際にOGPを使用してカード表示が行えます。

概要の表示

デフォルトでは記事の文頭が入った画像が生成されます。

記事のmarkdownにFront Matterを作成しdescriptionキーを記載すると以下のようになります。

descriptionを空文字列にすることもできます。

記事タイトルの編集

記事タイトルにサイトのpageTitleSuffixを付けたくなかったのでQuartz側を直接修正しました。

diff --git a/quartz/quartz/plugins/emitters/ogImage.tsx b/quartz/quartz/plugins/emitters/ogImage.tsx
index 813d934..68875d3 100644
--- a/quartz/quartz/plugins/emitters/ogImage.tsx
+++ b/quartz/quartz/plugins/emitters/ogImage.tsx
@@ -73,9 +73,8 @@ async function processOgImage(
 ) {
   const cfg = ctx.cfg.configuration
   const slug = fileData.slug!
-  const titleSuffix = cfg.pageTitleSuffix ?? ""
   const title =
-    (fileData.frontmatter?.title ?? i18n(cfg.locale).propertyDefaults.title) + titleSuffix
+    (fileData.frontmatter?.title ?? i18n(cfg.locale).propertyDefaults.title)
   const description =
     fileData.frontmatter?.socialDescription ??
     fileData.frontmatter?.description ??

アイコン画像の調整

quartz/static/icon.pngにある画像がOG画像の左上にアイコンとして表示されます。

画像サイズによっては見切れることがあるためQuartz側を修正しました。

diff --git a/quartz/quartz/util/og.tsx b/quartz/quartz/util/og.tsx
index 2afd606..ac64951 100644
--- a/quartz/quartz/util/og.tsx
+++ b/quartz/quartz/util/og.tsx
@@ -220,14 +220,26 @@ export const defaultImage: SocialImageOptions["imageStructure"] = ({
         }}
       >
         {iconBase64 && (
-          <img
-            src={iconBase64}
-            width={56}
-            height={56}
+          <div 
             style={{
-              borderRadius: "50%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: 56,
+                height: 56,
+                borderRadius: "50%",
+                overflow: "hidden",
             }}
-          />
+          >
+            <img
+              src={iconBase64}
+              style={{
+                width: "90%",
+                height: "90%",
+                objectFit: "contain",
+              }}
+            />
+          </div>
         )}
         <div
           style={{

最終的に以下のような形にしました。