OGP設定とかいうやつをいじってみる
リアルタイムでいじりますので、記事としてまとまってません。
もう、なんかすいません、そういうブログです。
自分のいじってるサイトはwordpressにした検索順位ガタ落ちサイトと、それが怖くてwordpress化していない、レスポンシブもへったくれもない80年代ディスコみたいなサイトがあります。
例えばこのはてなブログでリンクを挿入するときに、上記のferretさんみたく、カードで表示されたいじゃないですか。wordpressサイトはカードにならないので「ディスコサイト」にもそうなって欲しい。わんぱくでもいい。たくましく育って欲しい。
今回はOGP設定をしてみようと思います。
ferret先生、いつもありがとうございます。文章が長くて途中で気絶しそうになりましたけど、きっとこのコードを入れればいいんですよね?
<html prefix="og: http://ogp.me/ns#">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<meta property="fb:app_id" content="アプリIDは">
<meta property="og:type" content="website">
<meta property="og:url" content="http://millkeyweb.com/">
<meta property="og:title" content="ページ名">
<meta property="og:image" content="デフォルト画像">
<meta property="og:site_name" content="サイト名">
<meta property="og:description" content="ブログのdescription">
あんまりmetaタグが多いとページが重くなってしまうので、アプリの行は消します。typeはwebsiteでいいし、URLはディスコサイトのドメイン。
・・で、すみません。リアルタイムといいながらさっき実験成功しまして。
検証結果としては、カードのタイトル部分にはtitleがきます。なのでキャッチフレーズ的なものとサイト名があると良さげです。
なので、site_nameはいらないと思います。imageは絶対パスで好きな画像をチョイス。カ-ドになったときにサイトを端的に伝えるやつがいいです。descriptionはふつうにいつもの感じで書いてください。
ここにカードは出せないけど、多分できてる(カードが無事に出たけど、その後の更新が反映されてないのが不安)と思います。
それと、OGP設定ができているかどうかを試すサイトもあります。facebook対策はしてないので全然違うカードになるけど、ページが重くなるのも嫌だし、おそらく検索流入の方が大事なので、無視。
https://developers.facebook.com/tools/debug/