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


118

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

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

ogメタタグについて聞いたのですが、入れ方がわかりません。

回答:


355

使用する:

<!-- 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のメタタグを参照してください。


authorタグに作成者名またはプロファイルURLへのリンクを含める必要があるかどうかを知っていますか?
2014

どちらも可能だと思います。google検索ページの投稿の左側にプロフィール画像が必要な場合は、google +プロフィールへのリンクを提供する必要があります。
jurihandl 2014

メタタグauthorは、ウェブサイトの作成者または現在の記事の作成者を意味しますか(ブログ記事の使用例)?
LuiGi 2014

これは良い実行ですか?Google / Facebook / Twitterはこれでエラーを検出しませんか?
ジェロミーデベラ2014

2
1)Facebookは<meta name = "author">タグを読み取り、誰かがページを共有するとプレビューに表示します2)Facebookは<meta property = "article:author">をサポートするようになりました(詳細はgiannopoulos.net/にあります) 2015/06/20 /…)Facebookプロフィールへのリンクを表示します(実際に記事へのリンクを追加した場合:author)3)Googleはリッチデータを「リッチスニペット」という形式で探します。 (developers.google.com/structured-data
MarkG

41

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

その方法は、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">

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

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


Facebookは、これらのメタタグを処理する際に役立つ優れた小さなツールを提供してくれます。デバッガーを使用して、FacebookがURLをどのように認識するかを確認できます。また、問題があるかどうかも通知されます。

ここで注意すべき点の1つは、メタタグに変更を加えるたびに、デバッガーを介してURLを再度フィードする必要があることです。これにより、Facebookはサーバーにキャッシュされているすべてのデータを消去します。


説明にhtmlタグが表示されていますが、これを回避する方法を知っていますか?
Neil、

28

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

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


1
ありがとう@Mogsdadそれに応じて私の答えを拡張しました。
Louis Otto

1
リンクが壊れています。
Vincent Sels 2017
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.