ちゃいのWEB盆栽

浅瀬でぱちゃぱちゃWEBいじり。

OGP設定とかいうやつをいじってみる

リアルタイムでいじりますので、記事としてまとまってません。

もう、なんかすいません、そういうブログです。

ferret-plus.com

 

自分のいじってるサイトはwordpressにした検索順位ガタ落ちサイトと、それが怖くてwordpress化していない、レスポンシブもへったくれもない80年代ディスコみたいなサイトがあります。

例えばこのはてなブログでリンクを挿入するときに、上記のferretさんみたく、カードで表示されたいじゃないですか。wordpressサイトはカードにならないので「ディスコサイト」にもそうなって欲しい。わんぱくでもいい。たくましく育って欲しい。

www.youtube.com

 

今回はOGP設定をしてみようと思います。

millkeyweb.com

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/