2024年9月26日

OGP画像の設定

Web

3,172文字（読了まで約8分）

概要

LINE などでは、 URL を共有した際に、そのサイトの画像などがあわせて表示され、見た人にどんな情報のサイトなのか印象を与えることができるようになっています。

これは OGP と呼ばれるもので、その取り決めに則って各サイトで設定しておくことで、LINE などの SNS ではそれを表示してくれるようになっています（twitter や facebook 向けに独自の設定もあるようです）。

ここではこのブログサイトに OGP の仕組みを実装してみます。

OGP（Open Graph Protocol）とは

公式サイト
OGP を設定したいページの html ヘッダに、以下のような項目を設定すれば OK
- head タグに、prefix で OGP を定義していることをを宣言する
- meta タグで、次のように各種値を設定する
  - <meta property="og:title" content="The Rock" />
  - <meta property="og:type" content="video.movie" />
  - <meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
  - <meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />

実装

OGP 用の共通のコンポーネントを用意したうえで、全ページで設定してしまえるよう、Layout コンポーネントに設定する

OGP 用のコンポーネント

import { FC } from "hono/jsx";
import { useRequestContext } from "hono/jsx-renderer";
import { imgSrcUrl } from "@/app/utils/env";
import { EnvType } from "@/app/types";
 
export type OgpType = "website" | "article";
export type OgpProps = {
  type: OgpType;
  title: string;
  option?: {
    imageSrc?: string;
    description?: string;
    siteName?: string;
  };
};
export const Ogp: FC<OgpProps> = ({ type, title, option }) => {
  const c = useRequestContext<EnvType>();
 
  return (
  <>
    <meta property="og:type" content={type} />
    <meta property="og:title" content={title} />
    <meta property="og:url" content={c.req.url} />
    {option?.description && (
      <meta property="og:description" content={option?.description} />
    )}
    <meta property="og:site_name" content={option?.siteName} />
    {option?.imageSrc && (
      <meta
        property="og:image"
        content={option.imageSrc}
      />
    )}
  </>
);

Layout コンポーネントへの適用

// Layout.tsx: 共通レイアウトを定義
import { Child, FC } from "hono/jsx";
import { Ogp } from "@/app/components/layout/Ogp";
 
type LayoutProps = {
  children: Child;
  frontmatter: {
    title: string;
    description?: string;
    imageSrc?: string;
    siteName?: string;
  };
};
 
export const Layout: FC<LayoutProps> = ({ children, title }) => {
  return (
    <html>
      <head prefix="og: https://ogp.me/ns#">
        <meta charset="utf-8" />
        {frontmatter && (
          <Ogp
            title={frontmatter.title}
            type="article"
            option={{
              description: frontmatter.description,
              imageSrc: frontmatter.imageSrc,
              siteName: frontmatter.siteName,
            }}
          />
        )}
        {/*・・・略・・・ */}
      </head>
      <body>{/*・・・略・・・ */}</body>
    </html>
  );
};
 
export default Layout;

結果

LINE で表示させると次のようになります

次回記事で、OGP 情報を用いたカード型リンクコンポーネントを作成しますが、OGP で提供される情報を元に、次のように表示させることができるようになります。

Cloudflare Pages × HonoX によるブログサイト作成

scaletools Blog
https://blog.scaletools.net/posts/20240912_cfpages_honox

まとめと感想

OGP を設定し、被リンク時の表示をリッチにさせました。
Layout コンポーネント二設定することで、サイトのページ全体に適用可能となりました。

NEXT >>
mdxでカスタムコンポーネントを利用する（カード型リンク）

<< PREV
ダーク／ライトテーマを設定する

- コメント -

- 関連記事 -