FacebookやTwitterの登場で、SNSは私たちの生活の一部と言っても過言ではない状況となりました。
気に入ったブログ記事やWEBサイトがあったら、Facebookでいいね・シェアしたり、Twitterでつぶやいたりしますよね。
FacebookやTwitter等のSNSでシェアするとき、そのページのタイトルやURL、記事の抜粋等が表示されます。表示内容される内容は、HTML内から情報を引っ張ってきます。
ある程度は適切に表示してくれますが、もっときちんとした表示になれば、そこからよりシェアが拡散することも期待できます。
では、SNSでシェアされた時に表示される内容はどうやって変更するのでしょうか？表示内容は、HTML内にOGP(The Open Graph protocol)を設定しておくことで、制御が可能です。
OGPとは
OGPというのはThe Open Graph protocolの略で、Facebookを始めTwitterやGoogle+等のSNSとWEBページを連携させるための情報をコンピュータが読めるように記述したものです。
といっても、ピンとこないかもしれませんので、具体的に内容を見ていきましょう。
OGPの設定
OGPを設定するには、HTMLファイルの<head>内に以下のようなメタタグを記述します。
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"> <meta property="og:title" content="ここにタイトルを入力"> <meta property="og:site_name" content="ここにサイト名を入力"> <meta property="og:description" content="ここにページの説明文を入力"> <meta property="og:url" content="ここにURLを入力"> <meta property="og:image" content="ここに画像のパスを入力"> <meta property="fb:app_id" content="FacebookのアプリID"> <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@Twitterアカウント名"> <meta name="twitter:creator" content="@Twitterアカウント名"> </head>
このように、SNSでシェアされた時に表示される内容を<head>で指定しておくことで、表示内容を操作することが可能なのです。
あとがき
上記のコードをコピペして、content内を自サイトの内容に変更していただければ、OGPの設置は完了です。
ブログやWEBサイトを運営している方でも、意外とOGPを設定している人は少ないように感じます。OGPを設定することで、シェアされた時の内容がスッキリしますので、他のサイトと差をつけることができます。SNSでもっと拡散してもらうためにもOGPは設定しておきましょう。