オープングラフバリデーター

オープングラフのメタデータを抽出して検証する

ETTVI の Open Graph Validator を使用してオープン グラフを検査し、Web ページのメタデータがソーシャル メディアで共有されたときに注目を集めるかどうかを確認します。この高度なツールは、Web マスターが Facebook、Pinterest、Instagram、LinkedIn で Web リンクがどの程度適切に表示されるかをリアルタイムで確認するのに役立ちます。

ウェブページの URL を入力するだけで、ETTVI の Open Graph Validator がオープン グラフのプレビューとメタデータをどれだけ速く表示するかを確認できます。コピー可能なものを抽出して強調表示します。

• オープングラフのタイトル

• オープングラフの説明

• Webリソースの種類

• ウェブサイト名

• ウェブサイトのURL

• 画像URL

ETTVI の画期的な Open Graph Generator Validator は、  OG メタ タグを抽出し 、Open Graph メタ タグを自動的に取得して表示します。ユーザーは、要求された Open Graph のコードを簡単にコピーまたはダウンロードできます。

オープングラフ メタタグを検証および抽出します。Web リンクがソーシャル メディアにどのように表示されるかを無料でプレビューします。

任意の Web リンクのオープン グラフを確認するには、次の手順に従います。

ステップ1「URLを入力」

次のように、オープン グラフを検証する Web ページへのリンクを配置します。

ステップ2「ツールを実行する」

検証をクリックして、ETTVI の Open Graph Checker を実行します。

ステップ3「オープングラフのプレビュー」

ETTVI の Open Graph Validator は、次のようにオープングラフを表示して、リンクがソーシャル メディア上でどのように表示されるかを示します。

ステップ4「オープングラフの詳細を確認する」

ETTVI の Open Graph Validator は、次の情報を抽出して強調表示します。

ステップ5「Open Graphメタタグを取得する」

ETTVI の Open Graph Validator は OG メタタグを抽出し、次のように表示します。

または をクリックして、指定されたオープン グラフのメタ タグを保存します。

ETTVI の Open Graph Validator は、ソーシャル メディア ユーザーが Web リンクを非常に重要だと判断するかどうかを確認するのに最適です。これにより、1 分以内に任意の Web のオープン グラフをプレビューして検証できます。さらに、ETTVI の高度なツールを使用すると、任意のオープン グラフのコピー可能なメタデータとメタ タグを簡単に抽出できます。

ETTVI の Open Graph Checker が提供する機能と、それを選択する理由については、以下をご覧ください。

ユーザーフレンドリーなインターフェース

ETTVI チームは、ユーザーがこのツールを簡単に見つけ、アクセスし、使用して、あらゆる Web リソースのオープン グラフをテストできるようにしました。ETTVI の Open Graph Validator のすべての特徴と機能は、目立つように適切に整理されて表示されています。さらに、ETTVI の Open Graph Tester の機能、ユーザーがそれをどのように、なぜ使用すべきかが明確に指定されています。

正確に言えば、このツールがあらゆる Web リンクのオープン グラフをチェックするために設計および開発された方法は、実に驚くべきものです。このツールは効率的かつ正確に動作し、Web マスターがあらゆるオープン グラフを検証するのに役立ちます。

ワンクリック検証

ETTVI の Open Graph Validator では、ユーザーは Web リソースの URL を入力するだけで、そのオープン グラフを取得して表示できます。ユーザーは 1 回のクリックで、任意の Web ページのオープン グラフをチェックして検証できます。ツールの動作を理解する上で問題がある場合は、統合マニュアルを読んで、ETTVI の Open Graph Validator でオープン グラフをテストする方法を知ることができます。

クイック抽出

ユーザーが Web リソースの URL を入力すると、オープン グラフの詳細がすべて自動的に取得されて表示されます。つまり、ETTVI の Open Graph Validator は、要求されたオープン グラフのメタデータとメタ タグを抽出し、ユーザーが必要に応じてコピーまたはダウンロードできるようにします。SEO 担当者、ソーシャル メディア マーケティング担当者、ブロガーなど、すべての Web マスターがこの高度なツールを活用して、オープン グラフの og メタ タグやタイトル、説明をリアルタイムで追跡できます。

無料で無制限にアクセス

ETTVI を使用すると、ユーザーは Open Graph Validator に無料でアクセスして使用できます。世界中の人々が、時間制限やサブスクリプションに関係なく、この高度なツールを使用してオープン グラフを検証できます。

コンテンツは最も重要です。しかし、ソーシャル メディアでの共有や共有を促進するプラットフォームがなければ、最高のコンテンツであっても注目されません。ユーザーがソーシャル ネットワークでのリーチを最大化したい場合、まず行うべきことは、共有時のコンテンツの見栄えを改善することです。これは、SEO 担当者が Open Graph タグを使用して行うことができます。

Open Graph メタタグとは何ですか?

すべての Web ページは、Open Graph プロトコルを通じてソーシャル グラフ内のリッチ オブジェクトに変換できます。HTML タグのヘッダーに Open Graph メタ タグを追加することで、ソーシャル メディアでの URL の表示方法を変更できます。

Web ページのセクションにはこれらのタグが含まれます。Open Graph タグは、プロパティ名の前にプレフィックス og: が付いたタグです。

オープン グラフのメタ タグは次のようにコード化されます。

オープングラフタグが何であるかを学んだ後、SEO 担当者はこれらのタグのコーディングがどのようなものか疑問に思うかもしれません。

このコーディングの基本的な式は次のとおりです。

Facebook がこの概念を先駆的に導入しましたが、その後、他のソーシャル メディア企業もこれを採用しました。Twitter、LinkedIn、Google はオープン グラフ タグを認識します。Twitter には「Twitter カード」と呼ばれる独自のメタ タグがありますが、Twitter カードが見つからない場合は、依然としてオープン グラフ タグを認識して使用しています。ただし、SEO 担当者は、正常に実装されている有効なタグの概要を提供する ETTVI のオープン グラフ チェッカーを使用できます。

なぜウェブサイトにオープングラフプロトコルが必要なのでしょうか?

Open Graph プロトコルは、共有コンテンツのユーザー エクスペリエンスを向上させます。コンテンツの露出度を高め、より興味深いものにし、読者がクリックするように促します。

たとえば、次のようなリッチアイテムに取り組みます。

• ウェブサイトを訪問する人の数を増やす

• 検索エンジンのランクを上げて売上を伸ばす

• ウェブサイトへの高品質なバックリンクを獲得

• 特定のコンテンツに反応する人の数を増やす

• ソーシャルメディアのフォロワーを増やす

• ウェブサイトのクリック率（CTR）を高める

OG タグを使用して、誰かがコンテンツを共有したときにどのコンテンツを表示するかをソーシャル メディア ネットワークに通知します。画像が欠落していたり​​、タイトルが間違っていたりする場合は、Facebook にリンクを投稿するのは適切ではありません。OG タグは、特定のグループや場所をターゲットにするためにも使用できます。たとえば、SEO 担当者は、特定のエリアのユーザーに表示される情報を制御できます。まずは、オープン グラフのメタデータの基本から始めましょう。

メタデータの基礎

すべてのページに含めるべき基本的なメタ タグは 4 つあります。

• og:title: ページのタイトル。これにはサイト固有の識別子は含まれず、ページ自体に関する情報のみが含まれます。

• og:type: ページのコンテンツ タイプ。最も一般的なタイプは Web サイトですが、Web マスターがより具体的なものを必要とする場合は、より多くの種類が利用できます。

• og:image: リンクのプレビューに表示される画像。これは、ページのコンテンツを代表する画像である必要があります。また、リンクにリンクされているサイトを表すフォールバック画像を含めることも有益です。

• og:url: ページの正規 URL。完全修飾 URL である必要があります。

Open Graph タグを実装しても、オンページ SEO には直接影響はありませんが、ソーシャル メディア リンクのパフォーマンスには確実に影響します。したがって、これは調査すべき重要な側面です。

Facebook の AND メタタグを理解する

Facebook のオープン グラフ メタ タグにはさまざまな種類があります。ここでは、さまざまなタイプのオープン グラフを紹介し、それぞれの使用方法を説明します。

と:タイトル

コンテンツのタイトルは、ユーザーが期待するとおり、このように定義されます。コードでは、この目的のために標準のメタ タイトル タグを使用できます。Facebook がページ上でメタ タイトルを見つけられない場合は、og:title タグの代わりにメタ タイトルが使用されます。

Facebook ニュースフィードに表示されるテキストは太字で、非常に目を引くものであることを忘れないようにしてください。優れたブログ記事のタイトルと同様に、興味をそそるものでなければなりません。

目安としては 60 文字から 90 文字に抑えるのがよいでしょうが、上限や下限の制限はありません。タイトルが 100 文字を超える場合、Facebook はそれを 88 文字に切り捨てます。

そして:URL

ページを共有する場合、ページの正規 URL を設定するのは簡単です。基本的に、これはすべての共有が 1 つの Web ページにリンクされることを意味します。コンテンツに同じコンテンツを指す URL が多数ある場合、このタグは役立ちます。重要な注意: Facebook のニュース フィードにはドメイン名のみが表示され、ユーザーが提供した URL は表示されません。

そして: タイプ

これはオブジェクトのタイプを表します。以下にいくつか例を示します。

エンターテインメント：

• 本

• ゲーム

• 映画

このメタ記述子と HTML メタ記述タグには多くの重複があります。og:description タグは Facebook のコンテンツを説明するために使用され、検索エンジンの結果ページの上部ではなく、リンク タイトルの下に表示されます。コンテンツにキーワードを含める方法を考えるのに時間をかけすぎないでください。その結果、検索エンジンのランキングに影響が及ぶことはありません。ただし、SEO 担当者がユーザーにクリックしてもらいたい場合は、興味深く魅力的なものにする必要があります。og 記述、見出し、画像、コンテンツを ETTVI のオープン グラフ バリデータで確認できます。

Twitter カード

Tumblr カードは、ツイート専用に使用されるソーシャル メタ タグの一種です。

Twitter は Twitter カード タグを使用します。これは、利用可能な場合に、より強力な機能とオプションを提供します。そうでない場合は、Open Graph がデフォルトとして使用されます (これも、提供されている場合)。

Twitter カードを使用すると、写真、ビデオ、その他のメディアなどの追加コンテンツがツイート内に瞬時に組み込まれ、インタラクションが向上します。

Twitter カードのタグ

Twitter:card は、状況で使用されるカードの種類を決定します。

概要 - 概要情報を伴う四角形の画像を含む概要カードを提供します。

Large-Summary-Image: 使用される画像が長方形の場合、ユーザーは小さな概要画像ではなく大きな概要画像を使用したいと考えています。

twitter:description (og:description) ページまたは記事の説明。

twitter:site ビジネスまたはウェブサイトに関連付けられたTwitterハンドルを使用する

twitter:creator (オプション)。作成されたコンテンツ作成者の Twitter ハンドル。twitter:card が大きな画像を要約するように定義されている場合にのみ、このタグは意味を持ちます。

サマリーに設定された Twitter:cards には、4096x4096 ピクセルから 144x144 ピクセルまでのサイズの正方形画像 (twitter:image タグ経由) を使用できます。

また、4096x4096 から 300x157 ピクセルの長方形の画像が、より大きな画像に使用できるサマリー ラージ イメージ パラメータでサポートされています。JPG、WEBP、GIF、PNG ファイルはすべてサポートされており、ファイル サイズは 5MB を超えてはなりません。一方、Twitter はアニメーション GIF をサポートしていません。代わりに、最初のフレームが使用されます。ただし、ETTVI の Open Graph Checker ツールは、SEO 専門家がニーズに応じて Web ページの OG タグを識別して最適化するのに役立ちます。

Facebook用のShopifyのOpen Graphタグを設定する

og:title や og:image などの OG タグは、ほとんどの Shopify テーマのタイトル タグや注目の画像などの変数から取得されます。og:image タグのみ、Shopify UI からカスタマイズできます。テーマ/カスタマイズ/テーマ設定/カスタマイズ/ソーシャル メディア/ドロップダウン メニューから画像を選択します。実行方法を確認するには、オンライン ストア > テーマ > アクション > コードの編集 > スニペット > スクロール バーの social-meta-tags liquid に移動します。ユーザーがコードを変更する必要がある場合は、変更できます。

Wix で Open Graph タグを追加できるようになりました

Wix は、ページのメタタイトルと説明に加えて、他のデータも使用して一般的な OG タグを入力します。

「ソーシャルシェア」オプションでは、ユーザーは各ページの OG の説明、タイトル、画像を変更できます。OG 画像はサイト全体でカスタマイズすることもできます。メイン メニューで、[設定] > [ソーシャルシェア] を選択します。Wix では、ハードコードする必要がないため、OG タグを簡単に追加できます。

WordPress管理パネルでグラフタグを開く

Yoast の SEO プラグインは、ウェブサイトの検索エンジンランキングの向上に役立ちます。投稿またはページ エディターの一番下に SEO ツールボックスが表示されます。[ソーシャル] ドロップダウン メニューから [Facebook] を選択します。

og:description、og:title、og:image タグを設定するには、ここに情報を入力します。og:url を明示的に設定する必要はありません。Yoast がこれを処理します。画像のサイズも、役立つ可能性がある OG タグのリストに含まれています。ユーザーは知らないかもしれませんが、ユーザーが投稿の注目画像を持っていない場合、Yoast はデフォルトでそれを使用します。時間を節約するために、サイト名、画像サイズなど、他の Twitter カードおよび OG タグも追加されます。

サイト全体に og:image タグを設定することも推奨されます。共有 URL にカスタム タグがない場合、このメッセージが表示されます。Yoast の設定を使用すると、このオプションが見つかります。Yoast > Facebook > ソーシャル ネットワーク スイッチを「有効」に設定したら、適切な画像を送信します。ここはブランド画像に適した場所です。

投稿に OG タグが付いていないとどうなりますか?

デフォルトでは、ほとんどのソーシャル ネットワークは、コンテンツのプレビューを作成するために最善を尽くします。ほとんどの場合、これは計画どおりにいきません。ページの名前がタイトルと説明に表示されていても、ツイートは特に目を引くものではありません。単一の投稿のプレビューと比較すると、別の話が見られます。では、ユーザーが Web サイトでオープン グラフ タグを使用しない場合はどうなるでしょうか。ひどいことは起こりませんが、オンラインに投稿された他の大量のコンテンツからコンテンツを区別するいくつかの特徴を使用できなくなります。