UPDATE：2017.1.12
- CATEGORY
そのホームページ、SNS用に重要な設定してありますか？
Contents
ホームページですばらしい商品や、コンテンツを扱っているとfacebookなどSNSでシェアされることがありますよね。そうした時、ホームページはSNS用に設定はされているでしょうか？
せっかくシェアしてもらったのに情報がうまく伝わらなければもったいないですよね。
今回はそんなSNSに向けて設定する項目について紹介したいと思います。
SNSでシェアされた時のためのOGP設定
Facebook、mixi、Google+など、SNSでシェアされた際に記事のサムネイルやタイトル、URLなどを正しく表示されるようにするために設定するコードの事です。OGPとはOpen Graph protocolの略称です。
簡単に言うと「このウェブページは○○を紹介しているんだよ！」と説明してくれるコードです。
このコードを設定する事によってSNSで画像、タイトルなどが目立つように表示されるためシェアしてもらった時によりクリック率がアップします。
OGP設定項目
OGPコードはホームページのheadの中に記述するだけで実装する事が出来ます！headのタイトルの下ぐらいに記述して行きましょう。
コードは以下のように記述して行きます。
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページの種類" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="サムネイル画像のURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:description" content="ページのディスクリプション" />
<!-- Facebook用設定 -->
<meta property="fb:app_id" content="App-ID（15文字の半角数字）" />
<!-- ※Twitter共通設定 -->
<meta name="twitter:card" content="Twitterカードの種類" />
og:title
SNS用に設定の出来るタイトルタグになります。通常は
<title>ホームページのタイトル</title>のタイトルタグを読みますが、SNSを変えたい場合は設定しましょう。
og:type
ページの種類を設定します。websiteだったり、blog、videoなど設定して行きます。
詳しくはこちら → http://ogp.me/#types
og:url
ページのURLを設定します。アプリコットのホームページであれば
<meta property="og:url" content="http://apricot-design.com/wp2023" />となります。
og:image
SNSに表示される画像を指定することが出来ます。特に関連する物でなくても、指定する事で様々な画像に変更可能です。
og:site_name
ホームページの名前を記載します。アプリコットであれば、
<meta property="og:site_name" content="APRCOT DESIGN" />と記載します。
og:description
そのページの説明文を記載します。牛丼屋さんであれば
<meta property="og:description" content="安くて、早くて、うまい！スタミナの出る牛丼屋！" />のように記載します。
fb:app_id
facebookにサムネイルや記事の説明を表示させるための設定をしています。facebookでは表示させるためには必須の項目になりますので必ず設定しましょう！！
twitter:card
twitterでサムネイルや記事の説明を表示させるための設定をしています。設定されると、その記事のタイトル、記事の抜粋分などが分かりやすくしっかりと表示されます。
まとめ
今回Facebook、mixi、Google+など、SNSでシェアされた際に記事の内容などをしっかりと表示させるための設定について紹介しました。こういった設定によって記事の内容が視覚的に分かりやすく、よりインパクトを出すことが出来ます。
せっかくシェアしてもらうなら、より多くの人に見てもらいたいですよね。
SNSがどんどんと発展している時代なので、今回紹介したコードは必須と言えるでしょう。
まだ、未設定の場合は是非今回設定してみてください。
facebookなどは仕様がチョコチョコ変わっているので定期的にチェックして設定して行きましょう！
