OpenGraphとjson-ld

2018-08-06

SEO

SEO?検索結果の上位に表示してもらうためだけのものでしょ?
ワタシ別にこだわらないからいらないわ。
だったんですが「検索結果の上位に表示したい」だけのものではないと知ったのでメモ

例えばslackでリンクを貼ると

set_open_graph
イメージ画像と一緒にページの簡単な説明を引いてくれます。

リンク貼っただけなのに見え方が全然違いますよね

この仕組みをOpenGraphとか言うらしいです
上に述べたことをやるだけなら簡単で、以下をhtmlを記述するだけです

1
2
3
4
5
6
7
<meta property="og:site_name" content="ジジイの知恵バケツ"/>
<meta property="og:locale" content="ja_JP"/>
<meta property="og:title" content="ジジイの知恵バケツ|metaタグとjson-ld"/>
<meta property="og:image" content="http://ggibucket.com/assets/no_image.jpg">
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://ggibucket.com/entries/7b50bdfca08baabd9974"/>
<meta property="og:description" content="検索で上位に表示されたくなくてもメタ情報は書いといた方がいいよ"/>

これだけでslackには表示されるようになります

google先生的にはさらにJSON-LDという仕組みで記述することを推奨しているようです
JSON for Linking Dataの略なんですって

こんなふうに書きます

1
2
3
4
5
6
7
{
  "@context": "https://json-ld.org/contexts/person.jsonld",
  "@id": "http://dbpedia.org/resource/John_Lennon",
  "name": "John Lennon",
  "born": "1940-10-09",
  "spouse": "http://dbpedia.org/resource/Cynthia_Lennon"
}

詳しいことはこちら

コメント

投稿する

投稿したコメントはご自身で削除できません

不適切なコメントと判断した場合は管理側で削除することがあります