ソーシャルプロフィールリンク(Social Profile Links)の構造化データをマークアップする方法

ソーシャルプロフィールリンク(Social Profile Links)の構造化データをマークアップする方法

Photo by Igor Ovsyannykov Unsplash

ソーシャルプロフィールリンク(Social Profile Links)の構造化データをマークアップする方法を紹介します。

Googleは検索結果のナレッジグラフに、組織や個人のソーシャルアカウントを表示することがあります。

ソーシャルプロフィールリンクの構造化データのサンプル

ソーシャルプロフィールリンクは、検索結果のナレッジグラフに表示される、FacebookやTwitter、Instagram、YouTubeなど、ソーシャルメディアのプロフィールページへのリンクです。

ソーシャルプロフィールリンクは、構造化データをマークアップしていなくても表示されることがありますが、構造化データをマークアップすることで、Googleにより正確に情報を伝えることができます。

現在、Googleがサポートしているソーシャルアカウントはこちらです。

  • Facebook
  • Twitter
  • Google+
  • Instagram
  • YouTube
  • LinkedIn
  • Myspace
  • Pinterest
  • SoundCloud
  • Tumblr

これ以外のソーシャルアカウントをマークアップしても、検索結果に表示されることはありません。

また、ソーシャルプロフィールリンクは現在、日本語の検索結果には表示されません。google.co.jpでも言語設定を英語にすると検索結果に表示されるようです。

JSON-LDでマークアップする

ソーシャルプロフィールリンク(Social Profile Links)をJSON-LDでマークアップする方法です。JSON-LDはページのどこに記述しても問題ありませんが、通常は<head>タグ内に記述します。

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Person",
  "name": "your name",
  "url": "http://www.your-site.com",
  "sameAs": [
    "http://www.facebook.com/your-profile",
    "http://instagram.com/yourProfile",
    "http://www.linkedin.com/in/yourprofile",
    "http://plus.google.com/your_profile"
  ]
}
</script>

Microdataでマークアップする

MicrodataでHTMLタグに直接マークアップすることもできます。

<span itemscope itemtype="http://schema.org/Organization">
  <link itemprop="url" href="http://www.your-company-site.com">
  <a itemprop="sameAs" href="http://www.facebook.com/your-company">FB</a>
  <a itemprop="sameAs" href="http://www.twitter.com/YourCompany">Twitter</a>
</span>

属性の解説

ソーシャルプロフィールリンク(Social Profile Links)の属性は次のようになります。

属性 必須 説明
@type 必須 個人なら"Person"、組織なら"Organization"
name 必須 個人、または組織の名前
url 必須 ウェブサイトのURL
sameAs 必須 ソーシャルメディアのURL

参考