WEBを勉強中の方や企業のWEB担当者の方必見!OGPの基本と設定方法WEBこんにちは。新人webデザイナーのHIROです。今回は、OGPに関しての解説記事です。Protcol」の略で、htmlのheadタグ内に記述される要素のひとつです。このOGP、なかなか聞き慣れない言葉かもしれませんが、実は普段SNSを利用している人であれば、日常的に目にしているものです。上の画像は、Twitterに共有されたサイトのリンクを含むツイートですが、ここでのサイトの画像とその説明の部分がOGPに当たる部分です。他にも、FacebookやLINEなど、様々なSNSでサイトが共有された際に、設定している場合はそのページのOGPが表示されます。SNSでのマーケティングに力を入れているサイトや、SNSでの拡散を狙って広く集客を行いたいサイトでは、OGPの設定は必須になってくるでしょう。ちなみに、OGPの設定をしなかった場合には、下のような表示になってしまいます。魅力的なサイトでも、情報量が少なく寂しい印象を受ける。これでは、どんなに魅力的な内容のサイトでもページのタイトルしかわからず、画像も表示されていないので、ユーザーの関心を引くことは難しいでしょう。画像の準備をきちんとしていないと、せっかく設定したOGPの画像が上手く表示されない場合もあります。設定した画像が見切れてしまっている。したOGPを設定するにはどうすればいいのか、次から解説していきます。OGP画像を準備するまずは、OGPとして表示される画像の作成を行います。サイトのロゴだったり、メインビジュアルがあるサイトならその画像を使用してもいいですね。OGP画像の作成を行う際に特に注意したいのはそのサイズです。画像のサイズを意識して作成すると、OGPとして表示された際に意図しない見え方になるのを防ぐことができます。同じOGP画像を設定していても、Facebookだと長方形、LINEだと正方形にトリミングされて表示されるなど、SNSによってOGPとして設定した画像の表示領域が異なる場合があるので、それらに適応させる目的もあります。どのサイズに合わせてOGP画像を作成すればいいのでしょうか。基本的には「1200px*630px」の画像を1枚作成すればOKです。このサイズで作成すると、長方形の場合はそのまま全体が表示されます。正方形の場合は中心部分が表示されるので、表示したい要素に関しては中心の「630px*630px」の正方形の範囲内に収まるように作成します。私は毎回測って作成するのが面倒なので、イラレで「1200px*630px」のカンバスを作成し、中心に「630px*630px」のガイドを引いたテンプレートを作り活用しています。OGPに使用する画像が作成できたら、最後にその画像が実際にどのように表示されるのかの確認を行ってみましょう。確認にはネット上に公開されているシミュレータサイトが便利です。ドラッグ&ドロップで作成した画像を配置すると、各サイズのOGPとして表示された際の見た目を確認することができます。OGP画像シミュレータOGPの設定方法では次に、作成したOGP画像とページの各種説明項目を記述し、OGPの設定を行いましょう。今回は直接htmlファイルをエディタで編集してOGPを設定する方法をご紹介します。」などを利用すると簡単に設定することができますので、そちらも検索してみてください。OGPとして編集する内容を確認するOGPの記述はhtmlのhead内に記述していきます。OGPに関する設定は複数記述することができるので、今回は基本的な役割を持つ項目に絞り、順を追って説明していきます。/>ここには、そのページのタイトルを入力します。OGPの記述は基本的にサイト内の全てのページで行う必要があるので、ここにはそのページ毎のタイトルを記述していきます。動画・コンテンツ制作会社">のように記述されています。/>ここではページの説明を簡単に記述しましょう。/>ページのURLを記述します。絶対パスで記述する必要があります。/>ここにはページではなく、サイトの名前を記述します。>ここにはサイトのOGP画像のURLを絶対パスで記述します。ちなみに、ここでの絶対パスとはブラウザのアドレス欄に表示されているURL(=OGP画像が置かれている場所のURL)のことを指しています。この部分に限らず、絶対パスで記述する必要のある箇所を相対パスで記述してしまうと上手く表示されないのでご注意ください。name=”twitter:○○○”となっている箇所は、全てTwitter固有の設定になり、これから解説する”twitter:card”以外にも複数の設定が可能です。“twitter:card”は、Twitterで表示される際の”og:image”と”og:description”のサイズに関わる部分になります。/>小さく表示したい際には下のように記述します。/>content=”summary”(上)とcontent=”summary_large_image”(下)の見え方の違い以上が基本となるOGPの設定に関する記述になります。他にもより細かい設定や、Facebook専用の設定項目などもありますが、基本的には上記の記述を行えば問題なく各SNSで表示されるはずです。ここまでのOGP設定を完了し、サイトの情報を更新することができたら、実際にどのようにOGPが表示されるのか確認を行ってみましょう。試しにページをSNSで共有してみるのもありですが、これもWeb上で一括確認できる便利なツールが公開されています。フォームに確認したいサイトのURLを入力後、「解析する」ボタンを押すことによって、実際に公開されているページのOGPの設定がどのようになっているか確認することができます。CardsTwitterやFacebookで設定したはずのOGPが上手く表示されない時はサイトを一度公開した後にOGP情報を更新し、その後TwitterやFacebookで共有されたOGPを確認すると、更新したはずのOGP情報が上手く反映されていないことがあります。これは、TwitterやFacebookで一度でもURLが共有されると、その時の情報がTwitterやFacebook側にしばらくはキャッシュとして残り続けるために起こってしまう現象です。この現象を回避するには、一度公開したサイトのOGPを更新した際に、TwitterやFacebook側のキャッシュも一緒に更新してあげる必要があります。TwitterやFacebookに残っているキャッシュは、各サイトのディペロッパーページにて更新することができます。card」を押すことで新たにキャッシュが取得されます。シェアデバッガーサイトにアクセスしフォームにURLを入力後「デバッグ」を押します。fb:app_id」というエラーが出ますが、OGPの表示に関しては特に問題ありません。Developersに登録してこのアプリIDを取得すると、Facebookのアナリティクス機能が利用できるようになるようです。まとめいかがでしたか?今回はOGPについての解説記事でした。次回もアジンコートブログをよろしくお願いします。(1)お問い合わせお問い合わせはこちらからお願いします。