やりたいこと
ここでやりたいことは、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
-
OGP確認
大変ありがたいツールですがハマりました。どうしても「設定情報が取得出来ませんでした。URLをご確認ください。」と表示されてしまい、コードを見直したり、ブラウザに返却されたコードを見直したり、サーバサイドに生成された HTML ファイルを見直したりしていたのですが、新しいブラウザタブからアクセスしたら
実際にやったこと
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 ページが必須になってしまうようです
やったこと
続きは明日書きます