あるWebサービスの開発メモ・目次ページに戻る

やりたいこと

ここでやりたいことは、OGP 用の meta タグを送出することで、SNS サイトなどで見栄え良くリンク先として表示してもらいたい、ということです。具体的には以下のイメージになります

イメージファイル (sirokuro.png) のデザインは改善の余地ありですが、そこは後回しにします

方式検討

はじめてやることなので、思考錯誤しながらの方式検討です

OGP 用の meta タグを用意する

情報収集

独り言形式で綴る「OGP & SSR」
結局、このページが一番わかりやすくって、なぜ SSR しないと OGP が有効になってくれないかを教えてくれている
2022年版：OGPの正しい設定方法まとめ
Next.jsでOGP・metaタグを設定する方法
【Next.js × Vercel】OGP画像を動的生成してみた
[Vercel] ウェブサイトのOGP情報を取得する Serverless Functions を作成する
テキスト内のハッシュタグやURLをリンクにする

動作確認用にツールとか

(twitter) Card validator
- 「Unable to render Card preview」と出るのは仕様らしい
OGP確認
大変ありがたいツールですがハマりました。どうしても「設定情報が取得出来ませんでした。URLをご確認ください。」と表示されてしまい、コードを見直したり、ブラウザに返却されたコードを見直したり、サーバサイドに生成された HTML ファイルを見直したりしていたのですが、新しいブラウザタブからアクセスしたら

OGP画像シミュレータ

実際にやったこと

nextjs の場合は Head コンポーネントを使って meta タグを出力します。今まで当サイトでは Head コンポーネントの中には title タグしかなかったので、各 ./pages/hoge.tsx にて

<Head>
  <title>シロクロつける</title>
</Head>

という感じで定義していました。OGP の meta タグは複数定義する必要があるので、以下の Seo コンポーネントを追加しました

./components/Seo.tsx

import { FC } from "react";
import Head from "next/head";

interface MetaData {
  pageTitle?: string;
}

export const Seo: FC<MetaData> = ({ pageTitle }) => {
  return (
    <Head>
      <title>{pageTitle}</title>
      <meta name="description" content={pageTitle} />
      <meta property="og:url" content="https://www.sirokuro.site" />
      <meta property="og:title" content="シロクロサイト" />
      <meta property="og:site_name" content="シロクロサイト" />
      <meta
        property="og:description"
        content="モノ・コトにシロクロつけるサイト"
      />
      <meta property="og:type" content="website" />
      <meta
        property="og:image"
        content="https://www.sirokuro.site/sirokuro.png"
      />
      <meta property="og:image:width" content={String(1600)} />
      <meta property="og:image:height" content={String(220)} />
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:site" content="@sirokuro_site" />
    </Head>
  );
};

各ページでは以下の感じで Seo コンポーネントを呼び出します

./pages/index.tsx

import { Seo } from "../components/Seo";

(snip)

      {/* <Head>
        <title>sirokuroつける</title>
      </Head> */}
      <Seo pageTitle="sirokuroつける" />

(snip)

SSR

当サイトではこれまで SSR (サーバサイドレンダリング) を実行していませんでした。ということは Google のクローラにページを読んでもらえず、Google のキーワード検索にはヒットしないものと思っていました

これはどうも間違いだったらしく、現在の Google クローラは最新の Chromium レンダリングエンジンを実行しているので Chromeブラウザに表示可能な JavaScript であれば、これをハイドレーションした結果を読んでくれるそうです

しかしながら、OGP 用の meta タグを SNS サイトなどに読み取ってもらうには、静的な html ページが必須になってしまうようです

やったこと

続きは明日書きます