スタッフブログStaffblog

OGPの重要性

2020.11.26
スタッフブログ

新入社員の立原です。

本日はOGPについてご紹介します。

まず、OGPとは、OGPとは、「Open Graph Protcol」の略でSNSでシェアした際に、設定したWEBページのタイトルやイメージ画像、詳細などを正しく伝えるためのHTML要素です。

SNS上でURLが共有された際に設定しておいたタイトルや画像、説明文などが表示されるようになり、ユーザーに対してWEBページの内容を詳しく伝えることができる機能です。

メリットとしては、設定することで、どのようなページで何を伝えたいのかが明確になるため、共有されたユーザーの訴求率が高まり、より多くの人に記事を見てもらうことが可能になります。

OGPはmetaタグをHTMLソースコード中の~内に記述することで、設定ができます。

OGPを使用するには宣言するタグを入れなくてはなりません。そのため、head要素にprefix属性を追加します。

TOPページであれば「website」、TOP以外のページでは「article」を入力します!

< head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#" >

それぞれ挿入するタグには種類がありますが、元としては

< meta property="og:属性" content=" ページの属性" />

という形で入れていきます。

タイトルの場合であれば、< meta property="og:title" content="株式会社ディクタクス" />となります。

属性については、ページタイトルのog:title、サイト名のog:site_name、画像のURLのog:imageなどがあります。