Zenn
🖼️

Vite + React + SSRしてページごとOGPを有効にする

2022/12/13に公開
#
SSR
Vite
Open Graph protocol
tech

やりたいこと

  • 1ページごとに異なるOGPを表示できたい
    • ページコンテンツはp5.jsでコンテンツ作る時にどのみちソースコードを触るので、OGPの内容とかは手動でセットで良い。
  • 元はVite + React + React Router

方向性

  • React Routerはアンインストールします
  • vite-plugin-ssrを導入します

やっていく

vite-plugin-ssrの導入

client-onlyしたい

  • p5.jsはwindowに依存するので、クライアンドサイドでのみレンダリングされる必要がある
  • 公式にClient-only Components | vite-plugin-ssrというページがあるが、公式の導く通りにReact.lazyを導入してもClient-onlyにならなかった
  • typeof window !== undefined``をしてからReact.lazyでimportにした。
    • どれか抜いても動きそうな気がしてきた
index.page.tsx
import React, { Suspense } from 'react'

const createP5Component = (serverSide: boolean) =>
  serverSide && React.lazy(() => import('./p5'))

export function Page() {
  const P5 = createP5Component(typeof window !== `undefined`)

  return <Suspense fallback={<div>Loading...</div>}>{P5 && <P5 />}</Suspense>
}

metaタグをカスタマイズしてOGPが上手く出るようにする

_default.page.server.tsx
<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/mylogo.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="${desc}" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@thetalemon">
  <meta name="twitter:creator" content="@thetalemon">
  <meta name="twitter:description" content="${desc}" />
  <meta name="twitter:title" content="${title}" />
  <meta name="twitter:image" content="${img}" />
  <meta property="og:image" content="${img}" />
  <meta property="og:title" content="${title}" />
  <meta property="og:description" content="${desc}" />
  <meta property="og:url" content="${url}">
  <title>${title}</title>
</head>

memo: TwitterのOGPが更新されない場合

  • SNS側にOGPがキャッシュされるらしいので、キャッシュの更新作業が必要らしい
  • Card Validator | Twitter Developersを使えば良いのだが プレビューは表示されないので注意。
  • プレビューが失敗しても、下にINFO: twitter:card = summary tag foundが表示されてれば、OGPの更新自体は成功しているので、Twitterに戻ってリロードして再度投稿を試みてOK

おわり

  • Next.jsはSSGするのすごいカンタンだったので、Next.jsのありがたみを改めて感じた
  • Vue.js / Nuxt.jsの<client-only>が何度も検索にひっかかっていいなあ…ってしてた
  • Adventerに先に投稿してわいわい！ってしてたら、TwitterのOGPが全く表示されなくて泣いたのでTwitterもデフォルトで多少はいいのを表示してくれたらいいのになーと思った。その一方で、世の中でTwitterに共有されるようなサイトは、みんなしっかりOGP設定してるんだな、と実感した。
  • Vite、ビルドがはやくてVercelのデプロイも高速なのはとても体験として良いけど、困った時に情報を上手く探せないので、もっと情報増えろ〜〜と思う。この記事がその一片となればいいなってことで、投稿。

Discussion