Facebookの「いいね!」や「mixiチェック」など、SNS関連のボタンを押されると、ボタンを押した人のウォールなどにページの情報が表示されます。また、Twitterにページのリンクを投稿した際にも、ページの情報を表示させることができます。これらの情報を編集し、各種SNSを有効に活用しましょう。

OGPで情報を記述する

OGPとは、ウェブページにどのような情報が書かれているかをHTMLに付加する記述方法です。「こんなことが書いてあるページです」ということを明記しておくことで、SNS内からリンクされた際によりわかりやすくなります。 ブログではOGPを記述するための独自タグがあるので、簡単に対応することが出来ます。

対応方法

  1. <$OGP$>という独自タグを全てのデザインテンプレートの<head>から</head>の間に記述します。
    <head>
    <$HeadSectionCommon$>
    <title><$BlogTitle ESCAPE$> - livedoor Blog(ブログ)</title>
    <$OGP$>
    </head>
  2. <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" />
    <meta name="twitter:site" content="@Twitterのユーザーネーム" />
    のように内容が出力されます。

    ※og:imageの画像は、

    • 見出し画像』が指定されている時→見出し画像
    • 記事内に画像がある場合→最初に貼られている画像
      (※外部サイトの画像リンクを引用している場合は基本的に表示されません)
    • 記事に画像がない場合→プロフィールアイコン
    • プロフィールに画像を設定していない場合→デフォルト画像
    が表示されるようになっています。
    プロフィールアイコンはlivedoorプロフィールの設定から変更することができます。

  3. 記事ごとの説明を書く
    上の出力内容のうちog:descriptionの「ブログの記事や説明」の部分は何もしない状態だと記事の冒頭部分が表示されますが、好きな文言を書くことも可能です。
    記事投稿画面下部の「オプション設定」をクリックし、展開した部分にある「記事の概要説明」欄に記述してください。

Facebookインサイトを利用する

Facebookインサイトなどの機能を利用する場合、追加のタグが必要になる場合があります。 その場合は、各テンプレートに以下のように記述してください。
<$OGP$>
<meta property="fb:admins" content="ご自分のID"/>
<meta property="fb:app_id" content="ご自分のID"/>