1. ホーム
  2. 質問と答え
  3. Facebookの共有に「og」（オープングラフ）メタタグを使用する方法

Facebookの共有に「og」（オープングラフ）メタタグを使用する方法

2012-07-23 12 views

答えて

36

FacebookはOpen Graph Protocolという名前を使用して、リンクを共有するときに表示するものを決定します。 OGPはあなたのページを見て、表示する内容を決定しようとします。実際に手を貸すことができます。tell Facebookのページから取るべきもの。

私たちのやり方は、og:metaタグです。あなたのHTMLファイルの<head>におけるこれらまたは類似のメタタグを配置する必要があります

<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">

から

タグは次のようになり。自分の値を代用することを忘れないでください！

詳細については、Facebookがこれらのメタタグをドキュメントでどのように使用しているかについて詳しく知ることができます。 「あなたは、FacebookがあなたのURLを見ているかを確認するためにDebuggerを使用することができ、そしてそれ - Facebookは私たちにこれらのメタタグを扱うときに私たちを助けるために偉大な小さなツールを提供しますhttps://developers.facebook.com/docs/opengraph/tutorial/

- ここではそこからチュートリアルの一つでありますそれに問題がある場合は教えてください。

ここで注目すべきことは、メタタグを変更するたびに、DebuggerからURLをフィードし直す必要があります。これにより、Facebookがサーバー上にキャッシュされているすべてのデータURL。

出典

2012-07-23 16:43:34 Lix

+0

私の説明にhtmlタグがありますが、これを回避する方法は分かりますか？ – Neil

330

用途：

<!-- 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="" />

コンテンツを埋める= "..." あなたのページの内容に応じました。

詳細については、18 Meta Tags Every Webpage Should Have in 2013をご覧ください。

出典

2013-05-29 20:03:26 CarlosPinedaT

+0

'author'タグに著者名、またはプロフィールURLへのリンクが必要かどうか知っていますか？ – tobek

+0

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

+0

metaタグ 'author'は、現在の記事のウェブサイトまたは著者の著者を意味します（ブログ記事の使用例）？ – LuiGi

27

私はメタ生成のためのツールを構築しました。 http://www.groovymeta.com

OGタグ（Open Graph）タグは、メタタグと同様に機能し、配置する必要があります（Facebook、Google+、Twitterのエントリを事前設定しています） HTMLファイルのHEADセクションにあります。 OGタグを効果的に使用する方法の詳細については、Facebook's best practisesを参照してください。

出典

2014-10-02 10:26:46

+1

ありがとう@Mogsdad私はそれに応じて私の答えを拡大しました。 –

+0

リンクが壊れました、残念ながら！ –

関連する問題

 関連する問題