web-dev-qa-db-ja.com

Facebook共有で「og」(Open Graph)メタタグを使用する方法

Facebookは私のサイトからすべての写真を取得します。

そのページにある写真を1つだけ共有したい。

ogメタタグについて聞いたことがありますが、その配置方法がわかりません。

114

つかいます:

<!-- For Google -->
<meta name="description" content="" />
<meta name="keywords" content="" />

<meta name="author" content="" />
<meta name="copyright" content="" />
<meta name="application-name" content="" />

<!-- For Facebook -->
<meta property="og:title" content="" />
<meta property="og:type" content="article" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta property="og:description" content="" />

<!-- For Twitter -->
<meta name="Twitter:card" content="summary" />
<meta name="Twitter:title" content="" />
<meta name="Twitter:description" content="" />
<meta name="Twitter:image" content="" />

ページのコンテンツに応じて、コンテンツ= "..."を入力します。

詳細については、2013年にすべてのWebページに必要な18のメタタグをご覧ください。

347
CarlosPinedaT

Facebookは Open Graph Protocol と呼ばれるものを使用して、リンクを共有するときに表示するものを決定します。 OGPはページを見て、表示するコンテンツを決定しようとします。手を貸して、実際にtellFacebookからページから何を取得するかを伝えることができます。

その方法は、og:metaタグを使用しています

タグは次のようになります-

  <meta property="og:title" content="Stuffed Cookies" />
  <meta property="og:image" content="http://fbwerks.com:8000/zhen/cookie.jpg" />
  <meta property="og:description" content="The Turducken of Cookies" />
  <meta property="og:url" content="http://fbwerks.com:8000/zhen/cookie.html">

HTMLファイルの<head>にこれらまたは類似のメタタグを配置する必要があります。独自の値に置き換えることを忘れないでください!

詳細については、ドキュメントでFacebookがこれらのメタタグをどのように使用するかについてのすべてを読むことができます。そこからのチュートリアルの1つです。 https://developers.facebook.com/docs/opengraph/tutorial/


Facebookは、これらのメタタグを処理するときに役立つ小さなツールを提供します- Debugger を使用して、FacebookがURLをどのように認識しているかを確認できます。 。

ここで注意すべきことは、メタタグに変更を加えるたびに、 デバッガ を介してURLをフィードする必要があることです。これにより、FacebookはあなたのURLに関するサーバー。

40
Lix

メタ生成用のツールを作成しました。 Facebook、Google +、Twitterのエントリを事前設定します。ここで無料で使用できます。 http://www.groovymeta.com

質問にもう少し答えるには、OGタグ(Open Graph)タグはメタタグと同様に機能し、HTMLファイルのHEADセクションに配置する必要があります。 OGタグを効果的に使用する方法の詳細については、 Facebookのベストプラクティス を参照してください。

27
Louis Otto