Open Graphとは何ですか?Webサイトでどのように使用できますか?

コンテンツの作成とウェブサイトの維持には、かなりの時間がかかる場合があります。インターネット上のソーシャルフィードで共有されるときに、コンテンツを目立たせるにはどうすればよいですか?

  • Open Graphとは何ですか?
  • なぜ必要なのですか?
  • 持っていない場合はどうなりますか?
  • オープングラフの基本から始める
  • ウェブサイトオープングラフタイプ
  • 追加する価値のある他のいくつかのオープングラフタグ
  • オープングラフを使用したTwitterやその他のソーシャルメディアネットワーク
  • 開いたグラフの画像
  • 開いているグラフタグをテストする
  • 例を挙げてもらえますか?

Open Graphとは何ですか?

Open Graphは、ページのコンテンツを表すためにWebページ内のメタデータの使用を標準化するためにFacebookによって最初に作成されたインターネットプロトコルです。

その中で、ページのタイトルのように単純な詳細、またはビデオの長さのように具体的な詳細を提供できます。これらの要素はすべて組み合わされて、インターネットの個々のページの表現を形成します。

なぜ必要なのですか?

インターネット上のコンテンツは通常、他の人と共有するという少なくとも1つの目標を念頭に置いて作成されます。これは、1人の友人に送信するだけの場合は必ずしも重要ではありませんが、共有したい場合、またはリッチプレビューを利用するソーシャルネットワークやアプリで共有したい場合は、そのプレビューを同じように効果的にする必要があります。できるだけ。

2020年にフルスタックWeb開発者になる方法#javascript#fullstack //t.co/A1TsFaDguD

—コルビー・ファイオック(@colbyfayock)2020年3月10日

これは、人々があなたのコンテンツをチェックアウトし、必然的にあなたのコンテンツにクリックスルーすることを奨励するのに役立ちます。

持っていない場合はどうなりますか?

ほとんどのソーシャルネットワークは、デフォルトで、コンテンツのプレビューを作成するために最善を尽くそうとします。多くの場合、これはあまりうまくいきません。

たとえば私のウェブサイトcolbyfayock.comを見てください。

それは私のページのタイトルと説明を正しく取得しますが、フィード内で最も魅力的な見た目のツイートではありません。

それを単一の投稿のプレビューと比較すると、別のストーリーが表示されます。

では、開いているグラフタグがない場合はどうなりますか?悪いことは何も起こりませんが、インターネットに投稿される他のコンテンツの負荷の次にコンテンツを目立たせるのに役立ついくつかの機能を利用することはできません。

オープングラフの基本から始める

各ページのために必要とされる四つの基本的なオープングラフタグはog:titleog:typeog:image、とog:url。これらのタグは、提供するページごとに一意である必要があります。つまり、ホームページのタグはすべて、ブログ投稿記事のページとは異なる必要があります。

非常に簡単なはずですが、各タグの意味の内訳は次のとおりです。

  • og:title:ページのタイトル。別の方法で表示したい場合を除いて、これは通常、Webページのタグと同じです。
  • og:type:あなたが持っているウェブサイトの「タイプ」。一般的な「タイプ」は「ウェブサイト」ですが、次のセクションで詳しく説明します。
  • og:image:これは、コンテンツを表現したい画像へのリンクである必要があります。ソーシャルネットワークがフィードで使用するのは高解像度の画像である必要があります。
  • og:url:これは現在のページのURLである必要があります。

Webサイトにタグを配置するときは、他のメタデータと一緒にタグを配置する必要があります。使用されるタグはタグであり、次のパターンのようになります。

したがって、自分のWebサイトcolbyfayock.com用に4つの基本的なオープングラフタグのセットを作成すると、次のようになります。

ウェブサイトオープングラフタイプ

オープングラフプロトコルには、サポートするWebサイトの「タイプ」のバリエーションがいくつかあります。これには、Webサイト、記事、ビデオなどのタイプが含まれます。

オープングラフタグを設定するときは、どのタイプがWebサイトにとってより意味があるかを把握する必要があります。ページが単一のビデオに焦点を合わせている場合は、「ビデオ」タイプを使用するのがおそらく理にかなっています。特定の業種がない一般的なWebサイトの場合は、「website」タイプを使用することをお勧めします。

他のページと同様に、これはページごとに異なります。したがって、ホームページが「ウェブサイト」の場合、「ビデオ」タイプの別のページをいつでも作成できます。

したがって、自分のWebサイト用にオープングラフタイプを作成すると、ホームページでは次のようになります。

ブログ投稿に移動すると、次のようになります。

最も一般的なオープングラフWebサイトの種類は、オープングラフWebページ//ogp.me/#typesにあります。

追加する価値のある他のいくつかのオープングラフタグ

基本的には大丈夫ですが、追加する価値のあるものがいくつかあります。

  • og:description:ページの説明。と同様にog:title別の方法で表示したい場合を除いて、これはWebサイトのタグと同じである可能性があります。
  • og:locale:タグをローカライズする場合は、ロケールを含めるのが理にかなっています。形式はlanguage_TERRITORY、ですen_US。デフォルトはです。
  • og:site_name:コンテンツが掲載されているWebサイト全体の名前。ブログ投稿ページを表示している場合は、titleそのブログ投稿のタイトルを使用している可能性がsite_nameあります。ここで、はブログの名前になります。
  • og:video:あなたのコンテンツをサポートするビデオがありますか?これを含めるチャンスです。このタグを使用して、動画へのリンクを追加します。

これらのタグは、以前と同じパターンで追加されます。

オープングラフを使用したTwitterやその他のソーシャルメディアネットワーク

ほとんどのソーシャルネットワークはオープングラフ標準の基本に準拠していますが、一部のソーシャルネットワークには、エコシステム内のルックアンドフィールをカスタマイズするのに役立つ独自の拡張機能も含まれています。

たとえば、Twitterでは、を指定できますtwitter:card。これは、Webサイトを表示するときに使用できる「カード」のタイプです。現時点では、カードの種類は次のとおりです。

  • 概要
  • summary_large_image
  • アプリ
  • プレーヤー

これは、フィードでのリンクの使用方法を選択するのに役立ちます。summary_large_imageたとえば、を選択した場合、og:imageタグで指定している限り、Twitterは大きな高解像度の画像でリンクを表示します。

いくつかのソーシャルメディアサイトでオープングラフタグを使用する方法のドキュメントへのクイックリファレンスを次に示します。

  • Twitter://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started
  • Facebook://developers.facebook.com/docs/sharing/webmasters/
  • Pinterest://developers.pinterest.com/docs/rich-pins/overview/?
  • LinkedIn://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang = en

開いたグラフの画像

og:image多くの場合、画像を追加するだけで十分ですが、画像を正しく表示するのが難しい場合があります。問題が発生していると思われる場合は、オープングラフ標準にog:image:urlvsやandなどのいくつかの画像タグがog:image:secure_url含まれています。og:image:widthog:image:height

開いているグラフのドキュメントにあるすべての注意事項と例に従っていることを確認してください。さらに、一部のソーシャルネットワークには画像要件があります。たとえば、Twitterでは2:1の比率が必要で、最小サイズは300x157、最大サイズは4096x4096で、5 MB未満で、JPG、PNG、WEBP、またはGIF形式です。

行き詰まっている場合は、ソーシャルメディアネットワークのツールを使用してタグをテストし、問題を見つけることができるかどうかを確認してください。

開いているグラフタグをテストする

幸いなことに、私たちのお気に入りのソーシャルネットワークは、タグのデバッグに役立つツールも提供しています。タグが実際にウェブサイトのソースコードに表示されていることを確認したら、フィードでウェブサイトがどのように表示されるかをプレビューできます。

  • Twitter://cards-dev.twitter.com/validator
  • Facebook://developers.facebook.com/tools/debug/
  • Pinterest://developers.pinterest.com/tools/url-debugger/

開いているグラフタグをさらに掘り下げる

これらのほとんどは基本的なウェブサイトをカバーする必要がありますが、ソーシャルネットワーク全体であなたとあなたのビジネスの発見可能性を助けるかもしれないいくつかのタグがあります。

さらに詳しく知りたい場合は、ドキュメントで、使用可能なすべてのタグのリストを提供できます。

//ogp.me/

例を挙げてもらえますか?

開始するための例を単に探している場合は、ブログ投稿のタグを設定するときに最終的には次のようになります。

コンテンツを最適化および分析する他の方法をお探しですか?

  • ソーシャルメディア画像をGithubプロジェクトリポジトリに追加する方法
  • GoogleAnalyticsとあなたのウェブサイトへのトラフィックを理解する方法
  • GoogleAnalyticsでYouTubeチャンネルのパフォーマンスを設定および追跡する方法

Javascript、UX、その他の興味深いものについては、私に従ってください!

  • ?Twitterでフォローミー
  • ?️私のYoutubeを購読する
  • ✉️私のニュースレターにサインアップ