2012年11月25日 category : Web tags :

HTML5でOGP設定する際に注意したいxmlns属性とprefix属性

このエントリーをはてなブックマークに追加

ogp-html5

SNS対応のOGP（Open Graph Protocol）をHTML5に追加する際に一部変更が必要なようです。

ソーシャルネットワークサービス（SNS）を通じてブログを広めていくためにはOGP（Open Graph Protocol）の設定が重要なようです。

OGPを設置にするにあたって色々調べていたらHTML5で注意した方がよさそうな点がありました。この記述です。<html xmlns:og=”http://ogp.me/ns#”>
ん？HTML5で組みたいのにxmlns？

01 . HTML5でのOGP

OGP設定を調べてみるとxmlns:ogを書きましょう！と各サイトで書かれていました。が、HTML5で組みたいときもxmlns使うの？と思い調べてみると、どうもこの記述方法はXHTML向けみたいです。HTML5ではもっとシンプルに

<head prefix="og: http://ogp.me/ns#">

という風にheadに追加してあげればいいみたい。

02 . まとめるとこんな感じ

Facebook用の記述も織り交ぜるとこんな感じになります。

<html lang="ja">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta property="og:title" content="タイトル">
<meta property="og:type" content="blog">
<meta property="og:url" content="http://xxx.xxx">
<meta property="og:image" content="images/xxx.png">
<meta property="og:site_name" content="サイト名">
<meta property="og:description" content="サイト概要">
</head>

prefix属性の最後のarticle: http://ogp.me/ns/articleの「article」部分はサイトによって変わります。ブログの記事ページではarticle、ブログトップではblog、ウェブサイトではwebsiteという感じです。

まだまだHTML5は勧告前ですので今後変更になる可能性はありますがしばらくはこれで様子を見てみます。

HOME >>  Web > HTML5でOGP設定する際に注意したいxmlns属性とprefix属性

√ 関連記事：こんな記事も読まれています！

Comments

コメントを残す（反映までしばらくかかります）

*