Notion Blog公式APIでOG Imageに対応する

Notion Blogで記事ごとに設定した og:image を使う方法は、まだNotion Blogが非公式APIだった頃に説明しましたが、今回は公式APIに切り替わったということで改めて説明します。

ブログ用のデータベースにOG Imageの列を追加する

ブログ用のデータベースに OGImage という名前の列を追加します。列の種類は File & media を選択します。

列を追加したらテスト用に適当な画像をアップロードしておきます。

APIレスポンスから画像URLを取得する

データベースに追加した列はデータベース検索APIのレスポンスに properties.OGImage のように含まれます。

Query a database

OGImage としてアップロードした画像のURLは properties.OGImage.files[0].file.url のように取得することができるので、URLを head 要素に追加しましょう。

下記はこのブログの例です。

ogImageUrl={post.OGImage}

https://github.com/otoyo/notion-blog/pull/10

このブログでは og:image 以外の head 情報もまとめて管理するために下記のような Header コンポーネントを用意しています。

これによってデフォルトの og:image を設定したり twitter:image や twitter:card も設定することができます。

よかったら参考にしてみてください。

import Link from 'next/link'
import Head from 'next/head'
import ExtLink from './ext-link'
import { useRouter } from 'next/router'
import styles from '../styles/header.module.css'

const navItems: { label: string; page?: string; link?: string }[] = [
  { label: 'ホーム', page: '/' },
  { label: 'ブログ', page: '/blog' },
  { label: '読者になる', page: '/subscribe' },
]

const defaultUrl = 'https://alpacat.com'
const defaultTitle = 'アルパカログ'
const defaultOgImageUrl = 'https://alpacat.com/og-image.png'
const defaultDescription =
  'Notion Blogのカスタマイズ、マネジメント、プログラミングや読んだ本のまとめなどが中心のブログ'

export default ({
  path = '',
  titlePre = '',
  description = '',
  ogImageUrl = '',
}) => {
  const { pathname } = useRouter()

  return (
    <header className={styles.header}>
      <Head>
        <title>
          {!titlePre ? defaultTitle : `${titlePre} - ${defaultTitle}`}
        </title>
        <meta
          name="description"
          content={!description ? defaultDescription : description}
        />
        <meta property="og:url" content={`${defaultUrl}${path}`} />
        <meta
          property="og:title"
          content={!titlePre ? defaultTitle : titlePre}
        />
        <meta
          property="og:description"
          content={!description ? defaultDescription : description}
        />
        <meta
          property="og:image"
          content={!ogImageUrl ? defaultOgImageUrl : ogImageUrl}
        />
        <meta name="twitter:site" content="@otoyo0122" />
        <meta
          name="twitter:card"
          content={!ogImageUrl ? 'summary' : 'summary_large_image'}
        />
        <meta
          name="twitter:image"
          content={!ogImageUrl ? defaultOgImageUrl : ogImageUrl}
        />
        <link rel="canonical" href={`${defaultUrl}${path}`} />
        <link
          rel="alternate"
          type="application/atom+xml"
          href="/atom"
          title="アルパカログのフィード"
        />
      </Head>
      <h1>
        <Link href="/" passHref>
          <a>アルパカログ</a>
        </Link>
      </h1>
      <ul>
        {navItems.map(({ label, page, link }) => (
          <li key={label}>
            {page ? (
              <Link href={page} passHref>
                <a className={pathname === page ? 'active' : undefined}>
                  {label}
                </a>
              </Link>
            ) : (
              <ExtLink href={link}>{label}</ExtLink>
            )}
          </li>
        ))}
      </ul>
    </header>
  )
}

notion-blog/src/components/header.tsx - otoyo/notion-blog

以上です。

このエントリではデータベースに設定した og:image 画像をNotion 公式APIで取得し設定する方法を紹介しました。

ブログ用のデータベースにOG Imageの列を追加する

APIレスポンスから画像URLを取得する

コメントを送る