web-dev-qa-db-ja.com

HTML5のオープングラフ検証

私のdoctypeが<!DOCTYPE html>（HTML5）？

FacebookのOpen Graphメタタグ以外に、私のドキュメントは完全に検証されます。

本当に使いたくない<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">それはまったく新しい問題のセットを作成します。

問題の検証エラーの1つの例を次に示します...

エラー11行目、47列目：属性プロパティは、この時点では要素メタで許可されていません。

<meta property="og:type" content="website" />

任意の助けをいただければ幸いです...私は何日も無駄に検索してきました。

facebookvalidationhtml5opengraph
58
Scott Greenfield

HTML5の場合、これをhtml要素に追加します ogp.meで説明されているように を保持し、og:プレフィックス付きプロパティ：

<!doctype html>
<html prefix="og: http://ogp.me/ns#">
<head>
     <meta property="og:type" content="website" />
     ...

XHTMLの場合（OPの質問と同様）、name属性の代わりにproperty属性を使用します。 Facebookのlintは警告をスローしますが、メタ値は引き続き認識および解析されます。

<meta name="og:title" content="Hello Facebook" />
13
Blaise

はい。 HTML5として検証するには、 Open Graph docs からprefix属性を追加します。

<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
<head>
<title>Valid HTML5!</title>
<meta charset="utf-8"/>
<meta property="og:title" content="">
</head>
<body></body>
</html>

上記をコピーして w3 validator に貼り付け、確認します。

生産準備完了– Apple Apple.com でこのメソッドを使用します。

12
Justin

短い答えは、現時点ではありません。他のすべての答えは、回避策、ハッキング、または単なる狂気です。唯一の長期的な解決策は、Facebookが有効なHTML5である代替構文を作成する必要があるということです。

「facebookexternalhit」ユーザーエージェントによるFacebookのターゲティングを推奨する人には、他の企業がこれらのタグでFacebookのリードをフォローしていることを覚えておく必要があります。たとえば、優先されるSchema.orgマークアップが存在しない場合、Google +はOpenGraphタグにフォールバックします。ほとんどのサイトはSchema.org属性を使用していないため（特にOpenGraphを正しく使用するために時間を費やしている場合）、このアドバイスに従うことで、Google +などのサイトでスニペットを強化することを簡単に逃すことができます。

Facebookが広く普及しているため、開発者にとって実装の選択に問題がある場合でも、直接ターゲットにすることはgoodソリューションではありません。 Stack Overflowのようなサイトでソリューションを探す場合、これらのメソッドに予期しない結果が生じる可能性があることを常に覚えておく必要があります。

メインサイトでは、検証のためにXHTML + RDFaを使用していますが、十分に機能しています。 HTML5の使用が拡大するにつれて、Facebookチームがこのメタデータの有効な形式の受け入れを開始することを望んでいます。

検証を重視する理由：検証は、可能であれば、無視するように教えないことで、ページのエラーを警告するのに役立つことがわかりました。私たちはすべてブラウザで検証拡張機能を使用しているため、ページに検証エラー（または警告）があるかどうかを即座に把握し、それを排除できるかどうかを調査できます（99％以上の確率）。これにより、特に最近のフリンジプラットフォームやモバイルプラットフォームでの仕様の制限的な実装に対処する時間が節約されます。私たちはページが有効であることを認識し、ブラウザで何が起きていないかを知っているため、奇妙なバグが大幅に減少しました特定のUAが期待どおりに解釈できない可能性のある無効なマークアップと関係がある。

11
justbeez

これらのメタタグは、facebookがこれらのタグのページをスキャンする場合にのみ必要です。

    <? 
    if(eregi("facebookexternalhit", $_SERVER['HTTP_USER_AGENT'])){

      echo '<meta property="og:type" content=xxxxxxxxxxxxx';
      // continue with the other open graph tags
    }
   ?>

上記のタグは、facebookで必要な場合にのみ存在します-PHPのこのメソッドは、W3C検証を含む他のすべてのインスタンスに対して完全に削除します。

5
thejudge

ここでの回答の多くは時代遅れになっています。ヘッダーをスヌープしたり、JavaScriptを使用して書き込んだりしないでください（プロセッサがJSを評価しない可能性があるため）。

RDFa 1.1およびRDFa Lite 1.1と呼ばれるW3C勧告（HTML5の拡張）（ http://www.w3.org/TR/rdfa-lite/ および http：// wwwを参照.w3.org/TR/rdfa-primer / ）は、「property」属性を有効かつ適合させました。それまでの間（ここでは古い回答です）、バリデーター http://validator.w3.org/check は属性が有効であると認識します。さらに、Open Graph Protocolのドキュメント http://ogp.me/ は、RDFa 1.1を反映するように更新されました（「prefix」属性を使用）。

W3Cの作業は、特にOpenGraphおよびschema.orgからの入力を使用して行われ、この質問によって生じる問題の種類を解決しています。

要するに、OGタグがRDFaに準拠しており、あなたが黄金であることを確認してください。

4
WraithKenny

1年以上が経ちましたが、最善の解決策は、メタタグを何らかのサーバー側の検証でラップすることです。

In PHP私がやった：

<?php if (stristr($_SERVER["HTTP_USER_AGENT"],'facebook') !== false) { ?>
  <meta property="og:title" content="Title of the page" />
  <meta property="og:url" content="http://www.example.com/" />
  <meta property="og:type" content="website" />
  <meta property="fb:admins" content="123456789" />
  <meta property="og:image" content="http://www.example.com/images/thumb.jpg" />
<?php } ?>

それは本当にFacebookで機能します。しかし、私はこのアイデアが本当に好きではありません！

4
Leonel

最近の解決策の1つは、htmlまたはheadタグにプレフィックスを登録することです。

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

または

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

here から取得-申し訳ありませんが、ページはドイツ語です...

4
Kjell

メタタグの不適切なソリューション。これらをJavascriptでラップすると、Facebook Linterはそれらを見つけられません。それはまったくそれらを入れないことと同じです。

スクリプトでボタンなどをラッピングすると、XHTML 1.0ではなくHTML5で検証できます。

2
Kenneth Benjamin

JSPの場合：

<%
  String ua=request.getHeader("user-agent").toLowerCase();
  if(ua.matches(".*facebookexternalhit.*")){
  }
%>
<meta property="og:image" content="images/facebook.jpg" />
...
<%
  }
%>

または：

<c:set var="ua" value="${header['User-Agent']}" scope="page"/>
<c:if test="${ua.matches('.*facebookexternalhit.*')}">
  <meta property="og:image" content="images/facebook.jpg" />
  ...
</c:if>
1
cupto

まあ、Visual Studio 2011は、「プロパティ」属性が無効であることを教えてくれます。ただし、W3Cはもう少し寛大なようです。

http://validator.w3.org/check?uri=http%3A%2F%2Fpacificfoods.com%2F

Facebookの推奨ごとにOpen Graphタグをそのサイトに追加したこと、そしてそれがW3Cバリデーターを壊さないことに気付くでしょう。

公式の メタタグのW3C HTML5仕様 を参照すると、「property」属性（「name」、「http-equiv」、「charset」、または「itemprop」属性）は無効です。ただし、それらのバリデーターはそれを検証します（???）。この矛盾については説明がありません。

0
Ethan Brown