FacebookのOpenGRaphプロトコルを製品ページに実装しようとしています。
各ページのヘッドセクションの上にこれがあります。
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
次に、ヘッドセクション内にあります:
<meta property="og:title" content="This Page Title"/>
<meta property="og:type" content="product"/>
<meta property="og:url" content="http://www.mywebaddress.com"/>
<meta property="og:image" content="http://www.myimage.jpg"/>
<meta property="og:site_name" content="My Site Name"/>
<meta property="fb:admins" content="10101010101"/>
<meta property="og:email" content="[email protected]"/>
<meta property="og:description" content="Description of my product."/>
次に、このコードの「いいね」ボタンがあります。
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://thispagesurl" data-send="true" data-width="350" data-show-faces="false"></div>
私の目には、すべてが Facebook Developersページ で見られるものを複製しているように見えますが、「いいね」と言うと、Facebookはページタイトルと一般情報だけを取り上げているようです。
私はオブジェクトデバッガを使用してページを「デバッグ」しようとしましたが、これらの警告が表示されます:
Inferred Property The og:url property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The og:title property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The og:image property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The og:locale property should be explicitly provided, even if a value can be inferred from other tags.
私が知る限り、私はFacebookへの手紙の指示に従ったが、喜びはない。私が間違ったことをしている場合、誰でも指摘できますか?
事前に感謝、ダン
これらのタグは「http://www.mywebaddress.com」にありますか?
このタグはコンテンツの正規のURLを指す必要があるため、リンターはog:urlタグに従うことに注意してください。 「http://mywebaddress.com/article1」とog:url
タグが「http://mywebaddress.com」を指している場合、Facebookはそこに行き、そこにあるタグも読み取ります。
それに失敗すると、一見正しいタグがリンターによって検出されないために私が見た最も一般的な理由は、手動でチェックしたときに表示されるコンテンツとは異なるコンテンツをFacebookのクローラーに返すユーザーエージェント検出です
引用符の最後のセットの後にスペースが必要です
<meta property="og:url" content="http://www.mywebaddress.com"/>
このようになります
<meta property="og:url" content="http://www.mywebaddress.com" />
Facebookのツールとドキュメントのトンについて混乱があります。多くの人はおそらくSharing Debuggerツールを使用してOpenGraphマークアップをチェックします。 https://developers.facebook.com/tools/debug/sharing/
ただし、Facebookキャッシュからサイトに関する情報のみを取得します。これは、サイトのogp-markupを変更した後、Sharing Debuggerが古いキャッシュデータを使用していることを意味します。さらに、Facebookサーバーにキャッシュされたデータがない場合、共有デバッガーは次のエラーを表示します:This URL hasn't been shared on Facebook before.
そのため、解決策は別のツールを使用することです–Open Graph Object Debugger: https://developers.facebook.com/tools/debug/og/object/
新しいスクレイプ情報を取得するを使用して、Facebookキャッシュを更新できます。
正直なところ、developers.facebook.comのTools&Supportセクションを探索するこのツールを見つける方法がわかりません。リンクや言及が見つかりません。このツールはブックマークにしかありません。それはFacebookです:)
また、一部の開発者がname
の代わりにproperty
属性を使用することにも注意しました。多くのパーサーはおそらくこのようなタグを適切に処理しますが、 The Open Graph protocol に従って、property
ではなくname
を使用する必要があります。
<meta property="og:url" content="http://www.mywebaddress.com"/>
最後の推奨事項は、完全なURLを指定することです。たとえば、og:image
で相対URLを使用すると、Facebookから苦情が寄せられます。したがって、完全なものを使用してください:
<meta property="og:image" content="http://www.mywebaddress.com/myimage.jpg"/>
私が同じエラーを経験した人の助けになる場合。私のページはしばらくの間Facebookによって破棄されておらず、古いエラーでした。それを修正するページに再びスクレイプボタンがありました。
FacebookがOpen Graphをうまく読み込めるようにするのに苦労している人々を助けるかもしれません...
Firefox、Chromeまたは別のデスクトップブラウザー(多くの携帯電話はソースを表示しません)を使用してブラウザーによって生成されるソースコードを見て、Doctypeの前に空白行がないことを確認してください行またはヘッドタグ... Facebookがある場合、完全なかんしゃくがあり、おもちゃを乳母車から放り出します!(最良の説明!)空白行を削除-幸せなFacebook ...これを見つけるのに約1.5-2時間かかりました!