1 min read

Quartz4のOGPを設定した

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

概要の表示

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

quartz_ogp_og-image_default.webp

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

quartz_ogp_og-image_description.webp

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

記事タイトルの編集

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

quartz_ogp_og-image_title.webp

アイコン画像の調整

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={{

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

quartz_ogp_og-image_icon.webp

No comments yet

Continue reading