シェアしたら画像が出ない！OGPってなに？ハッシー先生に聞いてみた

OGPってなぜ大事？

OGPは、ページをSNSやLINEでシェアしたときに、どの画像・どのタイトル・どの説明文を見せるかを伝えるための設定です。ページの頭の部分（<head>）に、og:title や og:image といったタグで書いておきます。

この設定がないと、シェアされても文字だけの小さな表示になったり、ページの中のまったく関係ない画像が出てしまったりします。せっかく保護者の方や地域の方が「これいいよ」と広げてくれても、目に留まりにくくなってしまうんです。

園の行事のお知らせ、福祉施設の見学会、地域のお祭り。いまはこうした情報の多くが、LINEやSNSで人から人へと伝わっていきます。人と人がつながる場面で、きちんと顔の見える形で届けたい。OGPは、そのための身だしなみのようなものだと僕は考えています。画像がひとつ出るだけで、受け取った人の「開いてみようかな」という気持ちはずいぶん変わります。

WordPressなどで作ったサイトでも、テーマやプラグインによってOGPの出方はまちまちです。トップページは大丈夫でも、ブログ記事だけ画像が出ない、ということもあります。「たぶん設定されているはず」ではなく、一度実際に確かめてみることが大切です。

ツールの使い方

1. チェックしたいページのURLを入れて「チェック」を押します。ページはForwardsのサーバーから一度だけ読み込んで解析し、結果は保存しません。
2. X・Facebook・LINE・Slack・Discordそれぞれでの見え方をプレビューで確認します。あわせて診断結果が「OK」「注意」「要修正」に分かれて表示されるので、要修正から順に見ていきます。
3. 下の「OGPタグを作る」には取得した値が入っています。書き換えるとプレビューにもすぐ反映されるので、整ったらタグをコピーして <head> の中に貼り付けます。

なお、ログインが必要なページや社内ネットワークのURLはチェックできません。公開しているページで試してみてください。

診断では、タグが足りないかどうかだけでなく、og:image のサイズや形式、タイトルや説明文の文字数まで見てくれます。気になる項目には理由と直し方が一緒に書かれているので、専門用語に慣れていない方でも順番に直していけます。

ここがポイント

• 画像は1200×630pxを用意する。og:image がないと、シェアしても文字だけの小さなカードになります。横長のこのサイズが基本です。
• 画像のURLは https:// から書く。「/images/ogp.jpg」のような書き方や http の画像だと、SNSによっては表示されません。チェッカーの診断でも確認できます。
• Xで大きく見せたいなら twitter:card を指定する。指定がないと小さい画像のカードになります。大きく見せたいときは summary_large_image にします。
• 直したのに古い画像が出るときは、キャッシュを更新する。SNSは一度読んだ画像を覚えています。チェッカーの「SNSのキャッシュを更新する」から、Facebookなど各SNSの公式ツールを開いて再取得させましょう。

まとめ

シェアされたときの見え方は、作った本人がいちばん気づきにくいところです。自分のスマホでは問題なく見えていても、送られた側では文字だけになっている、ということがよくあります。

新しいページを公開したら、まずはURLを入れて確かめる。それを習慣にするだけで、届けたい情報がきちんと届くようになります。

OGPを整えることは、シェアしてくれる人への気づかいでもあります。誰かが「これ、いいよ」と送ってくれたとき、画像とタイトルがきちんと出ていれば、受け取った人も安心してページを開けます。届ける人と受け取る人、その両方を大切にしたいですね。

OGP・SNS表示チェッカーを使ってみる

タグの貼り方が分からない、WordPressのどこを直せばいいか分からない、というときはお問い合わせからご相談ください。