Facebookで「シェア」されたときや「mixiチェック」など、SNS関連のボタンを押されると、ボタンを押した人のウォールなどにページの情報が表示されます。また、Xにページのリンクを投稿した際にも、ページの情報を表示させることができます。これらの情報を編集し、各種SNSを有効に活用しましょう。
OGPで情報を記述する
OGPとは、ウェブページにどのような情報が書かれているかをHTMLに付加する記述方法です。「こんなことが書いてあるページです」ということを明記しておくことで、SNS内からリンクされた際によりわかりやすくなります。ブログではOGPを記述するための独自タグがあるので、簡単に対応することが出来ます。対応方法
<$OGP$>
という独自タグを全てのデザインテンプレートの<head>
から</head>
の間に記述します。<head><$HeadSectionCommon$><title><$BlogTitle ESCAPE$> - livedoor Blog(ブログ)</title><$OGP$></head>
<html>
タグ内にxmlns:og="http://ogp.me/ns#"
と記述します。<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" xmlns:og="http://ogp.me/ns#">
これらを記入すると、HTMLには<meta property="og:type" content="blogやarticle" /><meta property="og:title" content="ブログや記事のタイトル" /><meta property="og:description" content="ブログや記事の説明" /><meta property="og:url" content="ブログや記事のURL" /><meta property="og:image" content="プロフィールアイコン(管理画面で設定)" /><meta property="og:site_name" content="livedoor Blog" /><meta property="og:locale" content="ja_JP" /><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:site" content="@Xのユーザーネーム" />
のように内容が出力されます。※og:imageの画像は、下記優先順位で表示されます。
- 「記事の見出し画像」は、1番目に優先されます
- 「ブログ記事に最初に貼られている画像」は、2番目に優先されます
(※外部サイトの画像リンクを引用している場合は基本的に表示されません) - 「ブログの見出し画像」は、3番目に優先されます
- 「記事の見出し画像」、「ブログ記事に最初に貼られている画像」、「ブログの見出し画像」の3つを設定していない場合は、サービス別のデフォルト画像が表示されます
[参照]ブログの見出し画像(OGP)の設定が簡単になりました
[参照]ブログの見出し画像を設定- 記事ごとの説明を書く
上の出力内容のうちog:descriptionの「ブログの記事や説明」の部分は何もしない状態だと記事の冒頭部分が表示されますが、好きな文言を書くことも可能です。
記事投稿画面下部の「オプション設定」をクリックし、展開した部分にある「記事の概要説明」欄に記述してください。
Facebookインサイトを利用する
Facebookインサイトなどの機能を利用する場合、追加のタグが必要になる場合があります。その場合は、各テンプレートに以下のように記述してください。<$OGP$><meta property="fb:admins" content="ご自分のID"/><meta property="fb:app_id" content="ご自分のID"/>