はい、承知いたしました！世界最高峰のフロントエンド・スペシャリストとして、読者の皆さんの心に響く、温かく、そして実践的なブログ記事を執筆します。難しい専門用語はかみ砕き、身近な例え話を交えながら、まるで隣で一緒にコードを書いているかのような感覚で学べるように工夫しますね。

—

SNSで「いいね！」を呼ぶ！魔法のシェア画像「og:image」であなたの記事を彩ろう！

「この記事、SNSでシェアされたとき、どんな画像が表示されるんだろう？」って、気になりませんか？せっかく渾身の記事を書いたのに、画像がイマイチだと、せっかくの魅力が半減してしまうなんて、もったいないですよね！

でも大丈夫！この記事を読めば、そんなお悩みを解決できます。今回は、SNSでのシェア画像をコントロールする「`og:image`」について、Web制作・開発の初学者さんでも安心して取り組めるように、と〜っても優しく解説していきますね！

そもそも「og:image」って、何者？

「`og:image`」と聞くと、なんだか難しそう…と感じるかもしれませんが、安心してください！これは、SNSであなたのウェブサイトのリンクがシェアされたときに、「このページはこんな内容だよ！」と一目でわかるように表示される「アイキャッチ画像」を設定するための、いわば「目印」のようなものです。

例えるなら、お買い物に行ったとき、お店の前に置かれている「看板」や「ディスプレイ」みたいなもの。パッと見て「あ、このお店、私の好きなお洋服がありそう！」とか「このお店、美味しそうなパンが並んでる！」って、興味を引かれますよね？ `og:image` も、それと同じ役割を果たしてくれるんです。

この `og:image` を設定しておくと、TwitterやFacebook、LINEなどであなたの記事のURLがシェアされたときに、設定した画像が自動的に表示されるようになります。これがあるだけで、ユーザーの目に留まりやすくなり、クリック率もググッとアップする可能性が高いんですよ！

どうやって設定するの？ HTMLの「head」の中を覗いてみよう！

さて、この `og:image` を設定するには、HTMLの `` の中に特別なコードを書き加えます。

`` って、ウェブサイトの「設計図」みたいなもの。ブラウザには直接見えないけれど、ウェブサイトの裏側で「このウェブサイトはこういうものですよ」という情報を設定する大切な場所なんです。

そこに、こんな風にコードを書いていきます。

私の素敵なウェブサイト

こんにちは！

これは私のウェブサイトの本文です。

どうです？ちょっと見慣れない `property=”og:…”` という記述がありますよね。これは「Open Graph Protocol（オープン・グラフ・プロトコル）」といって、SNSがウェブサイトの内容を理解しやすくするための「お約束」なんです。

今日の主役は、この中の `og:image` です！

``
`og:image` の `content` の部分に、あなたがシェアしたい画像のURLをそのまま書くだけ！
「URLって何？」という方は、画像をウェブサーバーにアップロードしたときに表示される、`http://` や `https://` で始まる長い文字列のことですよ。
ポイント: ここに書く画像は、必ず公開されているURLである必要があります。ローカル環境（自分のPCだけ）にある画像だと、SNSからは見ることができないので注意してくださいね！

画像のサイズとアスペクト比、どうすればいいの？

「画像は準備できたけど、どんなサイズで作れば一番綺麗に表示されるのかな？」と疑問に思いますよね。ご安心ください！SNSごとに推奨されるサイズがあるのですが、今回は「これだけ覚えておけば大丈夫！」という、汎用性の高いサイズをご紹介します。

それは、 幅1200ピクセル × 高さ630ピクセル の横長画像です！

このサイズは、FacebookやTwitterなど、多くのSNSで綺麗に表示されやすい「黄金比」とも言えるアスペクト比（横：縦の比率）なんです。

アスペクト比: 1200 : 630 ＝約 1.91 : 1

なぜこのサイズが良いかというと、SNSのタイムラインで表示されたときに、他の情報に埋もれることなく、パッと目を引く大きさで表示されやすいからです。

もし、この比率と違う画像を設定すると、SNS側が自動的にトリミング（切り抜き）したり、上下に余白ができたりして、意図しない形で表示されてしまうことも…。せっかくの素敵な画像が台無しになってしまうのは悲しいですよね。

なので、まずはこの 1200px × 630px を目安に画像を作成・選定するのがおすすめです。

もし、どうしても正方形に近い画像を使いたい場合などは、Twitterの推奨サイズ（600px × 600px）などを検討するのも良いですが、まずは汎用性の高い1200px × 630pxで試してみるのが一番手っ取り早いですよ！

コード例で確認！実際に書き込んでみよう！

先ほどのHTMLコード例を、もう一度 `og:image` の部分に注目して見てみましょう。

`content=”https://your-website.com/images/share-image.jpg”` の部分には、あなたのシェアしたい画像の実際のURLを入れてください。
`og:image:width` と `og:image:height` で、画像の幅と高さをピクセル単位で指定しています。これは必須ではありませんが、指定しておくと、SNS側が画像のサイズをより正確に把握してくれて、表示崩れを防ぎやすくなります。

「でも、画像URLを毎回管理するのって大変そう…」と感じるかもしれませんが、最近はCMS（WordPressなど）を使っていると、メディアライブラリに画像をアップロードするだけで、簡単にURLが取得できるので、そこまで心配しなくても大丈夫ですよ！

確認方法：シェアプレビューツールを使ってみよう！

「コードは書いたけど、実際にどう見えるんだろう？」と不安なときは、便利な「シェアプレビューツール」を使ってみましょう！

例えば、Facebookの「Sharing Debugger」やTwitterの「Card validator」といったツールに、あなたのウェブサイトのURLを入力すると、SNSでシェアされたときにどのように表示されるか（タイトル、説明、そしてもちろん `og:image`！）を事前に確認できるんです。

[Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/)
[Twitter Card validator](https://cards-dev.twitter.com/validator)

これらのツールで、設定した画像がバッチリ表示されているか確認できると、安心感も違いますよね！

まとめ：今日からあなたもSNSシェア画像マスター！

今回は、SNSでのシェア画像を魅力的に見せるための `og:image` について解説しました。

`og:image` は、SNSでリンクがシェアされたときに表示されるアイキャッチ画像を設定するためのものです。
HTMLの `` の中に `` の形で記述します。
推奨される画像サイズは 1200px × 630px（アスペクト比約1.91:1）です。
`og:image:width` と `og:image:height` で、画像の幅と高さを指定しておくとより安心です。
シェアプレビューツールで、表示を確認しましょう！

どうでしょうか？思っていたよりもずっと簡単だったのではないでしょうか？

たった数行のコードで、あなたの記事がSNSでさらに輝き、より多くの人の目に触れるチャンスが広がります。ぜひ、今日からあなたのウェブサイトでも `og:image` を活用して、読者さんの心を掴む素敵なシェア画像を設定してみてくださいね！

もし、途中で「あれ？うまくいかないぞ？」となっても、大丈夫！焦らず、もう一度コードを見返したり、URLが間違っていないか確認したり、シェアプレビューツールを使ってみたりしましょう。きっと、解決の糸口が見つかるはずです。

これからも、皆さんのウェブ制作ライフがもっと楽しく、もっと豊かになるような情報をお届けしていきますので、お楽しみに！

【入門編】og:imageによるシェア画像の設定 – HTML実践ガイド