webサイトを制作していよいよ公開という時に、「OGP」の設定を忘れていたという経験をお持ちの方も多いのではないでしょうか？
「OGP」を正しく設定することで、記事がSNS上でシェアされる確率が高くなります。
今回は「OGP」について正しい設定方法などをご紹介いたします。もくじ
◆OGPとは
OGPとは、「Open Graph Protocol」の略になります。
FacebookやTwitterなどのSNSで、自社のwebページやブログの記事などがシェアされた時に、そのページの画像・タイトル・説明文などが表示されるプロトコルを指します。
◆OGPのメリット
OGPを正しく設定することでwebページが拡散されやすくなります。
例えばSNSを見ている際に、タイムラインに誰かがシェアしたページや記事が流れてくることがあります。
この時にOGPが設定されていれば、そのページの概要や画像も流れてくるので、どんな内容のページなのかがぱっと見でわかります。
興味が沸いてついクリックしてしまう、といったようにOGPを設定すると拡散される確率が上がります。
ネット社会では「バズらせる」ことが近年重要視されていますが、自社のサービスや広告などをバズらせるためにもOGPの設定は必須といえるでしょう。
◆OGPの設定方法
OGPはHTMLのmetaタグに記載します。
まずは、これからOGPを使います。という宣言として
<html lang=”ja” prefix=”og: http://ogp.me/ns#”>
をHTMLタグの中に追加します。
次にheadタグにOGPの基本的な記述を追加します。
<meta property=”og:title” content=”タイトル”>
<meta property=”og:type” content=”website または blog または article”>
<meta property=”og:description” content=”ページの簡単な説明”>
<meta property=”og:url” content=”ページのURL※絶対パスで指定してください。”>
<meta property=”og:site_name” content=”サイトのタイトル”>
<meta property=”og:image” content=”サムネイル画像のURL※画像を設定しなかった場合、そのページ内で使用されている画像からランダムで画像が選ばれて表示されます。>
・Facebook用の記述
以下の記述をすることで、Facebookインサイトを利用できるようになります。
FacebookにOGPを表示させるために必須の項目になります。
・Twitter用の記述
Twitter用は、シェアされた時のカードの形式（大きさ）を指定する必要があります。
カードの大きさは以下のようになります。いずれかを選んで指定します。
<meta name=”twitter:card” content=”summary”>デフォルトのカードになります。
<meta name=”twitter:card” content=”summary_large_image”>画像が横いっぱいに表示されます。その下にテキスト情報が続きます。
<meta name=”twitter:card” content=”App Card”>スマホアプリで直接ダウンロードして詳細がわかるカードです。
<meta name=”twitter:card” content=”Player Card”>ビデオ/オーディオ/メディアを提供するカードです。
◆まとめ
普段より多く記事が拡散されるには正しいOGPの設定が必須となります。
SNSでシェアされやすいようにOGPを設定してアクセスされやすいwebページを制作しましょう。 フォーザウィンはIT業界で働く仲間を募集しています！ 経験、未経験は問いません。是非当社の採用情報をご覧ください。 採用情報を見る ＞