個人サイトに動的ogを作ってつまづいたところ #JavaScript

個人サイトを作ろうとしたときのはなしその 2。

経緯

なわしろ「ブログ書いたら Twitter とかで共有したいぞ」

識者「動的 og が必要だね。Vercel を利用して動的 og を生成する小さいサービスを作ってみるといいよ」

vercel/og チュートリアル

なわしろ「今度は古い情報に踊らされないぞ。検索するとog-imageの使用例が最初に出てくるけど、GitHub に但し書きが書いてある」

Warning This repo is outdated and only works with Node.js 14. Please use @vercel/og for new projects.

If you have a problem that reproduces using the playground, please create an issue in the satori repo.

For all other issues with @vercel/og, please reach out to Vercel Support.

なわしろ「公式の案内に載ってる例を見て頑張ってみよう」

なわしろ「背景デザインにはhaikeiを使おう」

つまづき encodeURI

なわしろ「うーん」

識者「どうしたんだい？」

なわしろ「動的 og を設定したんだけど」

GitHub Pages & Next.js で個人サイト作ってつまづいたところ

なわしろ「って表示してほしいのに」

GitHub Pages

なわしろ「になっちゃうんだよね」

識者「&が含まれているけど、URI エンコードはかけてるんだよね？」

なわしろ「こんな感じにかけてるよ」

layout.jsx

<meta
  property="og:image"
  content={`https://example.com/api/og?title=${encodeURI(
    title ? title : siteTitle
  )}`}
/>

識者「ああ、それはencodeURIを使用しているからだよ」

encodeURIComponent

識者「正しくはencodeURIComponentを使うんだよ」

layout.jsx

 <meta
   property="og:image"
-  content={`https://example.com/api/og?title=${encodeURI(
+  content={`https://example.com/api/og?title=${encodeComponentURI(
     title ? title : siteTitle
   )}`}
 />

識者「encodeURIは&を含めた機能を持つ文字をエンコードしないんだ。機能があるのにエンコードされたら困るからね」

なわしろ「なるほどなあ」

まとめ

encodeURIは&などの文字をパーセントエンコードしない。
かわりにencodeURIComponentを使う。