FacebookとTwitterに役立つ12のオープングラフメタタグタイプ

マーケターはたくさんのコンテンツを作成します。はい、コンテンツは王様ですが、その王様はフォロワーがいなければ無力です。

では、すばらしい新しいブログ投稿でより多くのユーザーにリーチしたいときに最初に頭に浮かぶことは何でしょうか。

もちろん、ソーシャルメディアで共有します。 FacebookやTwitterのようなサイトの大規模なオーディエンスは、それらを最高の共有の一部にしていますが、そのアウトリーチの可能性を最適化する方法を知っていますか？

オープングラフメタタグは、まさにそれを行うように設計されています。しかし、それらは何であり、なぜそれらが重要であり、そして最も重要なことに、どのようにそれらを使用するのでしょうか。

オープングラフとは何ですか？なぜそれが作成されたのですか？
Facebookは2010年にOpenGraphを導入し、投稿を他のFacebookオブジェクトと同じ機能を持つリッチオブジェクトにすることで、Facebookと他のWebサイトの統合を促進しました。

簡単に言えば、ページが共有されたとき（またはいいねされたときなど）に情報がサードパーティのWebサイトからFacebookに移動する方法をより細かく制御できるため、Facebookの投稿を最適化するのに役立ちます。

これを可能にするために、情報はWebサイトのコードの<head>部分にあるOpenGraphメタタグを介して送信されます。

オープングラフメタタグのヘッドHTML
現在、他のソーシャルメディアサイトもソーシャルメタタグを利用しています。

TwitterやLinkedInを含む他のいくつかの主要なプラットフォームは、OpenGraphタグを認識します。 Twitterには実際にはTwitterカード用の独自のメタタグがありますが、Twitterロボットがそれを見つけられない場合、Twitterは代わりにOpenGraphタグを使用します。

ニール・パテルとの相談
私の代理店があなたのウェブサイトへの大量のトラフィックをどのように促進できるかをご覧ください

SEO-大量のSEO トラフィックのロックを解除します。実際の結果をご覧ください。
コンテンツマーケティング-私たちのチームは、共有され、リンクを取得し、トラフィックを引き付ける壮大なコンテンツを作成します。
有料メディア-明確なROIを備えた効果的な有料戦略。
電話を予約する

マーケターがオープングラフを気にする必要がある理由
ソーシャルメディアサイトは、ほとんどのWebトラフィックの主要な推進力です。したがって、ソーシャルメタタグの力を活用する能力は、今日のマーケターにとって不可欠なスキルです。

最も重要なこと：オープングラフメタタグは、コンバージョンとクリック率に大きな影響を与える可能性があります。

Facebookでリンクを共有したことがありますが、サムネイルが欠落している、または予想とはまったく異なる画像があったことがわかりましたか？

Open Graphタグについて少し知っていると、これらの問題に取り組み、ソーシャルメディアマーケティングを改善するのに役立ちます。

Open Graphタグをウェブサイトに追加しても、ページ上のSEOに直接影響することはありませんが、ソーシャルメディア上のリンクのパフォーマンスに影響するため、調査する価値があります。 Facebookの最も重要なメタタグと、それらを最適化して共有を改善する方法を見てみましょう。

FacebookのOpenGraphメタタグを理解する
Facebookには、いくつかのオープングラフメタタグタイプがあります。さまざまなタイプについて説明してから、それらの使用方法について説明します。

FacebookHTMLタグオープングラフメタタグガイド
og：title
ご想像のとおり、これがコンテンツのタイトルを定義する方法です。これは、コード内の従来のメタタイトルタグと同様の目的を果たします。実際、Facebookがページでog：titleタグを見つけられない場合は、代わりにメタタイトルを使用します。

Facebookフィードに表示されるテキストは太字で、非常に目を引くものであることに注意してください。良い投稿タイトルのように、説得力があるに違いありません。

文字数に制限はありませんが、60〜90文字を維持することをお勧めします。タイトルが100文字を超える場合、Facebookは88文字に切り捨てます。

例：

og：url
これは、共有しているページの正規URLを設定する方法です。これが意味するのは、すべての共有が移動する1つのページを定義することです。同じコンテンツに対して複数のURLがある場合（たとえば、パラメータを使用する場合）に便利です。重要な注意：提供されたURLはFacebookニュースフィードに表示されず、ドメインのみが表示されます。

例：

og：type
これは、共有しているオブジェクトの種類（ブログ投稿、ビデオ、写真など）を説明する方法です。選択できるリストは長いです。ここではいくつかの例を示します。

Webベース：

Webサイト
記事
ブログ
エンターテイメント：

本
ゲーム
映画
食物
場所：

市
国
人々：

俳優
著者
政治家
仕事：

会社
ホテル
レストラン
タイプの完全なリストはここで見ることができます。

このタグは、ページに「いいね」ボタンがあり、実際のオブジェクト（本や映画など）を表す場合に重要です。ユーザーが「いいね」した場合に、プロフィールのユーザーの関心セクションにコンテンツが表示されるかどうかを決定します。

共有しているのはWebサイトへのリンクであるため、ほとんどの場合、「website」値を使用します。実際、タイプを定義しない場合、Facebookはデフォルトでそれを「ウェブサイト」として読み取ります。

例：

og：description
このメタデータ記述子は、HTMLのメタ記述タグと非常によく似ています。ここでコンテンツを説明しますが、検索エンジンの結果ページに表示される代わりに、Facebookのリンクタイトルの下に表示されます。

Unlik

通常のメタディスクリプションタグの場合、SEOには影響しません。（したがって、キーワードを忍び込む方法を理解するのにあまり時間をかけないでください。）ただし、ユーザーにクリックしてもらいたいので、説得力のあるものにすることをお勧めします。

文字数に制限はありませんが、200文字程度を使用することをお勧めします。リンク/タイトル/ドメインによっては、Facebookで最大300文字を表示できる場合もありますが、200文字を超えるものは余分なものとして扱うことをお勧めします。

例：

og：image
写真は常にコンテンツを目立たせるのに役立つため、これは多くのマーケターにとって最も興味深いOpenGraphタグです。これは、ページが共有されたときに特定のサムネイルが表示されるようにする方法です。コンバージョン率に非常に役立ちます。

選択したog：imageを必ず設定してください。そうしないと、Facebookは、ページから削り取られた不要な広告バナーのような愚かなものを表示するか、まったく何も表示しません（以下を参照）。私たちは絶対にそれを望んでいません！

FBサムネイルなしオープングラフメタタグ
ページが静的で、コンテンツ管理システム（CMS）（WordPressなど）を使用していない場合は、ページごとにog：imageを手動で変更する必要があることを覚えておくことが重要です。

WebサイトがCMSで制御されており、関連するプラグインをインストールした場合、og：imageタグは各ページに自動的に割り当てられます。さらに下のプラグインのリストを探してください。

OG画像に最も頻繁に推奨される解像度は1200ピクセルx627ピクセル（1.91 / 1比）です。このサイズでは、サムネイルが大きくなり、群衆から目立つようになります。 5MBのサイズ制限を超えないようにしてください。

FB私のフルオープングラフメタタグの例
400ピクセルx209ピクセルよりも小さい画像を使用すると、はるかに小さいサムネイルとしてレンダリングされます。目を引くほどではありません。

オープングラフメタタグのFB小さなサムネイル
Open Graphイメージとして使用する画像は、ページにある画像とは異なる場合があることに注意してください。

その機会を利用して、さらに目立つようにしないのはなぜですか。

たとえば、タイトルは良いが、使用している写真があまりエキサイティングではない場合（インフォグラフィックや見栄えの良い人物などではない場合）、代わりに1〜2行のコピーの良い画像を使用することを検討してください（例を参照）下）。

これを行う場合に覚えておく必要のあることの1つは、画像の中央でテキストまたはその最も重要な部分をひもで締めることです。 Facebookはサムネイルの側面をトリミングするため、これは重要です。

テキストオープングラフメタタグを中心としたFBサムネイル
例：

高度なFacebookオープングラフタグ
上記のOpenGraphタグは、本当に知っておく必要のあるタグです（og：descriptionはそれほど多くはありませんが、便利です）。さらに詳細な仕様を提供するために使用できる、より高度なタグが他にもあります。

og：locale –言語を定義し、アメリカ英語がデフォルトです
og：site_name –共有しているページ（オブジェクト）がより大きなネットワークの一部である場合
og：audioまたはog：video –オブジェクトにオーディオまたはビデオファイルを追加します
fb：app_id –オブジェクトを使用してFacebookアプリケーション（FBコメントなど）にリンクするため
オープングラフタグを確認してください
生活を楽にするために、FacebookはSharingDebuggerと呼ばれるツールを作成しました。 2つの非常に役立つ機能があります。

まず、確認したいリンクを入力すると、エラーやOGタグの提案があればそれが返されます。また、og：imageがどのように見えるか、説明が何であるかなどを確認することもできます。

次に、Facebookのキャッシュをクリアします。これを想像してみてください。Facebookへのリンクを投稿しましたが、サムネイルに間違いが表示されたため、サイトに戻ってOGタグを調整し、Facebookに再度投稿します。

おそらく、何も起こりません。サムネイルは同じままです。これはキャッシュが原因です。 Facebook共有デバッガーは、調整後にリンクのキャッシュを更新するため、毎回使用することを忘れないでください。

Facebook ObjectDebuggerオープングラフメタタグ
Twitterのグラフメタタグを開く：Twitterカード
FacebookのOpenGraphタグと同様に、Twitterカードを使用すると多数のツイートから目立つようになります。 140文字のツイートから追加のコンテンツを生成できます。

これはユーザーのフィードに自動的に表示されるわけではありませんが、ツイートの下に小さな[概要を表示]ボタンが追加されます。

Evolero 2twitterオープングラフメタタグの例
クリックすると：

Twitterカードタグオープングラフメタタグの例
Twitterカードタグオープングラフメタタグの例
クリックするのは魅力的で、共有ページであるTwitterカードの便利な要約を提供します。驚いたことに、これらのタグを利用しているサイトは多くありません。これは、混雑したTwitterフィードでツイートを目立たせる大きな機会です。

それらを取得する最良の方法は、WordPress プラグインの1つをインストールすることです。上記のYoastによるWordPressSEOがその役割を果たします。それが不可能な場合は、Web開発者に依頼して、すぐに実装できるようにしてください。

Twitterカードタグ。作成方法は次のとおりです。

twitter：card
この必須タグは、og：typeと同じように機能します。共有しているコンテンツの種類を説明します。サマリー、写真、ビデオ、製品、アプリ、ギャラリー、および「ラージバージョン」サマリーの7つのオプションから選択できます。

選択したコンテンツの種類に応じて、ツイートの下部にあるリンクが変わります。要約の場合は「要約の表示」、写真の場合は「写真の表示」などを取得できます。このタグが設定されていない場合、Twitterはデフォルトでリンクを「要約」として読み取ります。

例：

twitter：title
これは基本的に、OGの対応物と同じことを行います。太字で表示される記事のタイトルを指定します。ツイートにあるのと同じテキストを繰り返さないようにするのが賢明です。提供されたスペースを最大限に活用し、メッセージを補強するために2つのコピーを互いに再生させます。最大70文字を使用してください。

例：

ツイッター：説明
このタグを使用して、共有しているページへの説明的なリードを記述します。 Open Graphタグと同様に、キーワードはSEOにとって重要ではないため、キーワードに焦点を当てないでください。ツイートとタイトルをうまく補完する説得力のあるコピーを作成します。 Twitterではこの部分を200文字に制限しています。

例：

twitter：url
これにより、共有しているコンテンツの正規URLが設定されます。（詳細については、上記の同等のFacebook Open Graphタグの説明を確認してください。）

例：

twitter：image
はい、あなたはそれを推測しました。これは、ツイートに合わせて画像を設定する方法です。 Twitterでは、画像が小さいカードと大きいカードの2つのオプションがあります。

typeタグでどちらを使用するかを決定します。大きなオプションを選択する場合は、解像度が280x150px以上であり、ファイルサイズが1MB以下であることを確認してください。 Facebookのサムネイルと同じトリックを使用することを検討できます。画像にテキストを追加して、メッセージを強調します。

例：

Twitterからの承認をリクエストする
Twitterカードを十分に活用するには、Twitterにページの承認をリクエストする必要があることに注意してください。幸い、これにはそれほど時間はかからず、CardValidatorを使用して簡単に実行できます。承認を得ると、CardValidatorはFacebookSharing Debuggerとまったく同じ目的を果たし、コミットする前にリンクを確認できます。

Twitterカードプラグイン
 Facebookと同様に、Twitterカードを実装するために利用できるプラグインはたくさんあります。ここにいくつかあります：

Drupal
Magento
禅カート
osCommerce
オープングラフメタタグを実装する方法
OGタグをどのように実装しますか？基本的に、これらはページのHTMLの<head>部分に属します。コードを管理していない場合は、ウェブ開発者にサポートを依頼する必要があります。上記のヒントを使用してパッケージ全体を自分で準備し、貴重な時間を節約できます。

WordPressを使用している場合は、コードを適切に実装するプラグインの1つをインストールするだけです。 YoastのWordPressSEOを使用するのが好きですが、公式のFacebook プラグインなどから選択できます。

オープングラフメタタグ用のYoastによるWordpressSEO
その他のOGプラグイン/拡張機能/アドオンは次のとおりです。

Joomla
Drupal
Magento
禅カート
osCommerce
オープングラフメタタグ結論
FacebookとTwitterの両方の最終的なコードは、多かれ少なかれ次のようになります。

最終コード画面オープングラフメタタグ結論
少し紛らわしいように思えるかもしれませんが、幸いなことに、プロセスを簡単にするツールがいくつかあります。コーディング方法を知る必要はありません。

これらのタグを最適化する人が少ないのは驚くべきことです。それはあなたが目立ち、より多くのクリックとビューを引き出すのを助け、そしてそれはあなたのSEOを改善するのを助けることができるのでそれはする価値があります-それはより多くの利益につながるすべてのものです。

オープングラフメタタグを実装しましたか？それはあなたのサイトにどのような影響を与えましたか？