OGPを使ってリンクを良い感じに表示する

#Astro #OGP #Web #WordPress

投稿日：2025年7月22日

リンクを良い感じに表示したい

SNSやブログ、チャットツールなどでリンク（URL）を張り付けると、リンク先のページを開かなくても概要が良い感じに見えるようなサービスやツールが多々あります。

例えば、SlackではチャットにURLを張り付けて投稿すると以下のようなプレビューが表示されます。

このブログはWordPress + Astroという技術を使って自社で開発・運用しているブログサービスになりますが、技術ブログをメインに執筆するにあたって、リンクを共有したくなるケースが多くなることが予想されます。

しかし、Wordpressの標準機能だけで記事投稿をすると、リンクを張り付けてもAstro側ではただのリンクとしてしか扱われず、上記のようなリッチなプレビュー画面は表示されません。

そこで、自分たちのブログでもこのようなプレビューが見れる仕組みを作ることにしました。開発する中で個人的に色々と学びもあったため、この記事で共有していきたいと思います。

OGPとは

そもそもどうやってあのようなプレビューを実現しているのか、私自身に全く知識がなかったのですが、調べているとどうやらOGPという技術（仕組み）を使っているらしいことが分かりました。

OGPはAIの解説によると

OGP(Open Graph Protocol)とは、Webサイトの情報をSNSでシェアする際に、表示されるタイトル、説明文、画像などを制御するための仕組みです。

とのこと。

具体的には、HTMLのmetaタグを使って以下のように設定します。

<meta property="og:title" content="記事のタイトル">
<meta property="og:description" content="記事の説明文">
<meta property="og:image" content="記事のサムネイル画像のURL">
<meta property="og:url" content="記事のURL">

どうやってプレビューを表示するか

リンクを共有される側のWebページとしては、OGPのための設定はmetaタグにOGP情報を設定するだけです。

SNSやチャットツールがどうやってプレビューを表示しているのかというと、リンクのURLからWebページ情報（OGP情報）を取得し、その情報をもとにプレビュー用の要素を作成して表示しているだけのみたいです。

仕組みを知る前は一体どういう仕組みなのかと疑問でしたが、知ってしまうと案外シンプルな仕組みで実現しているのだなと思いました。

実装してみた

仕組みが分かれば、後は実装するのみ。実装前、リンクを張り付けた場合の見た目は以下のようなものでした。

そして、OGPに対応したプレビューを実装したのが以下。

かなりいい感じになりました。

OGPによるプレビュー表示の課題

OGPの仕組みによってリンクをいい感じに表示できるようになりましたが、課題を感じた点もありました。

ビルド時間の増大

このブログサービスは、WordPressで記事を作成した後、Astroのビルドによって静的Webサイトを生成し、デプロイします。

ビルド時にWebページ情報を生成する仕組み上、OGP情報を取得する処理もビルド時に実行されることになります。今はまだ記事数が少ないこともあり、ビルドにそこまで時間はかかりませんが、記事数が多くなり、リンクの数も増えていくとその分だけビルド時間が増えていくことが予想されます。

いずれ、何らかのタイミングでビルドの仕組みを再検討する必要が出てくるかもしれません。

Amazonのリンク対応

OGPによるプレビューを実装したのちに、Amazonから商品のリンクを張るとどう見えるか確認してみると、求めている情報がうまく表示されませんでした。

実際にAmazonのWebページを見てみると、OGP情報が設定されたmetaタグは存在しています。不思議に思ってもう少し調べてみると、どうやらAmazonではWebページを表示後にJavaScriptによってOGP情報を後から生成しているらしいとのこと。

そのようなWebページの場合、ページがレンダリングされてOGP情報が生成された後に情報を取得しにいくか、Amazonが提供するAPIを使って取得する、などの対応が必要らしいとのこと。どちらもそれなりの手間がかかることもあり、現状は未対応ですが、このようなWebページもあると知れたのは、一つ勉強になりました。