您的位置：首页 > 理论基础 > 计算机网络

<html lang="ja-JP" prefix="og: http://ogp.me/ns# website: http://ogp.me/ns/website#">

2016-10-28 14:03 495 查看

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

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に追加してあげればいいみたい。

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

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

prefix属性の最後のarticle: http://ogp.me/ns/articleの「article」部分はサイトによって変わります。ブログの記事ページではarticle、ブログトップではblog、ウェブサイトではwebsiteという感じです。
まだまだHTML5は勧告前ですので今後変更になる可能性はありますがしばらくはこれで様子を見てみます。

<html lang="ja-JP" prefix="og: http://ogp.me/ns# website: http://ogp.me/ns/website#">

Facebookのいいねボタンで拡散するOGPの設定方法

Facebookのいいねボタンをクリックしただけでは友達のニュースフィード(ウォール)には表示されません。ここではいいねボタンをクリックした際にニュースフィードにも表示されるOGPの設定方法をご紹介します。

1.アプリIDを取得する

公式の開発者ページ(Facebook Developers)でWEBサイトをアプリ登録します。上部にある「MyApps」メニューの「Add a New
App」から登録できます。

登録後、左メニューにあるダッシュボード(dashboard)を選択するとアプリID(App ID)を取得する事が出来ます。

設定に関しては左メニューの設定(Settings)でApp DomainsとContact Emailを設定します。App DomainsはドメインでContact Emailはメールアドレスとなります。

次に左メニューの「Status & Review」で上部にあるタイトルの右横にあるバーをYESに変更します。

2.HTMLのコード(初期設定)

[xhtmlの場合] htmlタグに下記のコードを追加します。

ソースをコピー

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

[HTML5の場合] headタグに下記のコードを追加します。

ソースをコピー

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
HTML5でブログのトップページの場合は二箇所のarticleをblogにする。記事の場合はarticleのままです。WEBサイトの場合はwebsiteに変更してください。

3.HTMLのコード(OGPの設定)

OGPはheadタグ内にmetaタグとして挿入します。

ソースをコピー

OGP	説明
og:title	ページのタイトルです。
og:type	ブログのトップページの場合はblog。記事の場合はarticle。WEBサイトの場合はwebsiteとする。
og:url	ページのURLです。
og:image	ページ用の画像です。
og:description	ページの説明です。
fb:app_id	1.で取得したアプリIDです。

以上でOGPの設定は完了となります。

スポンサーリンク

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航