OGPを設定してSNSでシェアされた時にプレビューが表示されるようにする

概要

TwitterやFacebookなどでシェアされた場合にカードUIで表示されるようにOGPを設定する。このブログにOGPを設定した時の作業メモを残しておく。

OGP とは The Open Graph protocol の略で、SNS上でシェアされた時に ページのタイトル、URL、概要、画像（サムネイル）を正しく伝えるためにHTMLソースに記述するタグのプロトコルです。

作業メモ

OGP用のmetaタグを追加する

以下のような感じで、OGP用のデータを生成するメソッドを準備しておく

import { BASE_URL, BLOG_DESCRIPTION, BLOG_TITLE } from './constants'  
  
type OGP = {  
 url: string  
 type: 'website' | 'article'  
 title: string // 20文字程度  
 description: string // 80~90文字程度  
 site_name: string  
 image: string  
}  
type BlogMeta = {  
 path: string  
 title?: string  
 description?: string  
 image?: string  
}  
  
export const createOGP = ({  
 title,  
 description,  
 path,  
 image  
}: BlogMeta): OGP => {  
  return {  
    title: title ?? BLOG_TITLE,  
	description: description ?? BLOG_DESCRIPTION,  
	type: title ? 'article' : 'website',  
	url: `${BASE_URL}${path}`,  
	image: image ?? 'https://i.imgur.com/BqDJIrt.webp',  
	site_name: BLOG_TITLE  
  }  
}

上のメソッドを使って、作ったデータで以下のような感じで全ページにmetaタグを埋め込む

const pageTitle = title !== site_name ? `${title} | ${site_name}` : site_name
// ...

{/* OGP */}  
<title>{pageTitle}</title>  
<meta name="description" content={description} />  
<meta property="og:type" content={type} />  
<meta property="og:title" content={title} />  
<meta property="og:description" content={description} />  
<meta property="og:url" content={url} />  
<meta property="og:site_name" content={site_name} />  
<meta property="og:image" content={image} />  
{/* Twitterカード */}  
<meta name="twitter:card" content="summary" />  
<meta name="twitter:site" content={TWITTER_ACCOUNT} />

Card validator で表示確認する

• 作ったものをデプロイする
• デプロイした環境のURLを Card validator に入力して表示できるか確認する
• og:image にはwebp画像は使えないので、画像が表示されなければそのあたりを疑ってみる
  • 参考: Can we use webp extension image in og:image meta tag?

参考

• Twitterカードを設定してリンク画像を表示させる方法｜表示できない場合の対処法も解説！