適当にやってた meta タグ設定をちゃんとしました
Next.js のプロジェクトの meta タグ類を設定してくれるライブラリ next-seo をインストールしました。
今まで適当に meta タグをセットしていて、特に OGP 系は必須プロパティとかも入れずにやっていましたが、今回 next-seo を導入するにあたってちゃんと調べました。
ちなみに next-seo という名前ですが、 Search Engine Optimization は meta タグ設定したくらいでは良くなるとは思っていないので、どちらかと言うと Twitter 等でリンクシェアしてもらった時にきれいなリンクカードが展開されてほしいという考えから入れました。
Open Graph Protocol
OGP(Open Graph Protocol) は Facebook が策定した meta タグの埋め込み方のルールです。ルールに沿って HTML に meta タグを埋め込むことで、他のサイトや Web サービスが同じ meta データを取得することができ、リッチなリンクカードの表示にデータを使用してもらえたりします。このブログのリンクがカード形式になっているのも、OGP のおかげです。
OGP には必須のプロパティがあります。(以前はこれを知らずに含めていないプロパティがありました…)
og:title
og:type
og:image
og:url
さらに og:type
の値によっては追加で必須になるプロパティも存在します。詳しくは公式ドキュメントを御覧ください。
このサイトはブログサイトなので、 og:type
が "article"
と "website"
だけを指定できれば十分です。プロフィールページを作ったら profile
が指定できるようにまた改修します。
SEO コンポーネント
next-seo から export されている NextSeo
コンポーネントは受け取る props
が多く、そのまま各ページで使うには記述が煩雑になりそうでした。
なので NextSeo
をラップした独自の SEO
コンポーネントを宣言して、各ページで使用します。 SEO
コンポーネントは NextSeo
に比べて props
の数を大幅に絞っており、コンポーネントとして扱いやすくなっているのではないでしょうか。
型定義は以下のようにしました。
type BaseProps = { pagePath: string; title?: string; description?: string; noindex?: boolean; }; type ForWebsiteProps = { type: "website"; publishedTime?: undefined; modifiedTime?: undefined; tags?: undefined; }; type ForArticleProps = { type: "article"; publishedTime: string; modifiedTime: string | undefined; tags: string[]; }; export const SEO: React.VFC<BaseProps & (ForWebsiteProps | ForArticleProps)> = {...};
BaseProps
は全画面で必須のプロパティです。 ForWebsiteProps
と ForArticleProps
は <meta property="og:type">
の値によって必須にするかしないかが決まるプロパティになります。
前節で触れたとおり、 og:type
によって指定できるプロパティが変化します。それを TypeScript の Discriminated Union で条件付きの必須を表現しました。
実装はこんな感じです。
export const SEO: React.VFC<BaseProps & (ForWebsiteProps | ForArticleProps)> = ({ type, pagePath, title, description, noindex, publishedTime, modifiedTime, tags, }) => { const siteTitle = config.siteTitle; return ( <NextSeo title={title} titleTemplate={`%s | ${siteTitle}`} defaultTitle={siteTitle} noindex={noindex} twitter={{ cardType: "summary_large_image", handle: `@${config.social.twitter}`, }} openGraph={{ type: type, url: config.siteUrl + pagePath, title: title, description: description, site_name: siteTitle, images: [ { url: config.siteUrl + staticPath.images.ogimage_png, width: 1200, height: 630, }, ], article: type === "article" ? { authors: [`https://twitter.com/${config.social.twitter}`], publishedTime: publishedTime, modifiedTime: modifiedTime, tags: tags, } : undefined, }} /> ); };
config
オブジェクトは SNS のユーザー名やこのサイトがデプロイされている URL の文字列を持っている定数です。どう考えても環境変数 proccess.env
に持たせたほうがいいと思います。
props
を NextSeo
に渡すだけで特殊な処理はしません。 title
と openGraph.title
など重複する項目がいくつかあるので、同じ props
が渡るようにしています。
他に NextSeo
の props
として指定できるものは公式の README を参考にしてください。
まとめ
このブログサイトに next-seo を導入しつつ、 OGP をちゃんと調べたよというお話でした。
必須プロパティくらいはちゃんと埋めような!