備忘録：HTML5環境でのOGP設定
常にはしないけど、たまに設定して其の度にやり方を忘れるのが
HYML5環境でのOGP設定。
現環境下でのやり方を忘れないようにココに記す。
普通に書くとエラーが出る
OGPの設定を入れるとき、どのように入れるのか？
と言われたら、普通は下記の様に入れる。
<html lang="ja" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
普通は多分こう書くし、特に問題無い。
でもHtml5で上の様に書くのはおかしい。動くけどエラーが出ている。
理由は簡単。
HTML5って言っているのにxhtmlは変だよね。
なので直そう。
解決方法
何か特別なことをする訳ではない。
Html5仕様にすれば良いのだ
<html lang="ja"> <head prefix="og: http://ogp.me/ns#"> </head>
これで取り敢えず大丈夫。
多くのサイトはこれで問題ない。
Twitterのカードなどはこれに追加すれば良いのだ。
Facebook用に書くならば、
<html lang="ja"> <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#"> <meta property="og:title" content="タイトル"> <meta property="og:type" content="website"> <meta property="og:url" content="http://xxx.xxx"> <meta property="og:image" content="images/xxx.jpg"> <meta property="og:site_name" content="サイト名"> <meta property="og:description" content="サイト概要"> </head>
websiteって書いてある部分は人によってblogだったり、articleだったり違うので
適宜修正すると良いです。
終わりに
備忘録だから私が分かれば特に問題ない。