Open Graph タグの使い方

admin 0 Comments Articles

Open Graph タグの使い方

title タグと meta description タグは使っていますか? メタタグが検索エンジンのランキングを上げるのに役立つことはすでにご存知ですから、もちろんそうでしょう。

しかし、メタタグが実際にソーシャルメディアのトラフィックに影響を与えることをご存知でしたか？ 確かに、Google のオーサーシップ タグはありますが、Facebook や Twitter はどうでしょうか？ 実は、どちらも独自のソーシャルメディア用メタタグを持っており、ソーシャル トラフィックの量を増やすのに役立ちます。

ソーシャルメディア上でクールな画像や動画がある投稿を見たことがありますか？

Facebook Open Graph

Facebook で画像を共有するとき、それはどのように見えるのでしょうか？

必ずしもそのように見えるわけではありませんが、Facebook で画像を共有するとき、それはどのように見えるのでしょうか？ Facebookはあなたのページのコードを読もうとしますが、いつも画像を引っ張ってこられるわけではありません。 Facebook で URL を共有するときに Open Graph タグを使用しない場合、次のように表示されることがあります：

これは、私が自分のサイトに Open Graph タグを実装する前に Quick Sprout で表示されたものです。 Open Graph タグを実装した後、Quick Sprout のステータスの更新の横に画像が表示されるようになっただけで、Facebookのトラフィックが 174% 増加しました。 これは、検索エンジンが使用する通常の html タイトルタグに似ていると考えてください。 og:titleを作成するとき、文字数を95文字未満に保ちます。

例 <meta property=”og:title” content=”11 Creative Ways to Build Links”/>

og:type

ここで、共有しているコンテンツの種類を記述するのです。 動画、写真、ブログ記事などでしょうか。 コンテンツ タイプを定義するときに選択できる完全なリストは、次のとおりです。

Activities

  • activity
  • sport

Businesses

  • Bar

    • 。

  • 会社
  • カフェ
  • ホテル
  • レストラン

グループ

  • 原因sports_league
  • sports_team

Organizations

  • band
  • governmentnon_profit
  • school
  • university

People

  • actor
  • athlete
  • author
  • 監督
  • 音楽家
  • 政治家
  • 公人

地名

都市

  • 国
  • ランドマーク
  • 州

    • 製品および娯楽

    アルバム

  • 書籍
  • 飲料
  • 食品
  • ゲーム
  • 商品
  • 歌
  • 映画tv_show

    • ウェブサイト

    • blog
    • website
    • article

    例。 <meta property=”og:type” content=”article”/>

    og:description

    これもコンテンツを説明するために使うので、html の meta description タグと似ています。 キーワードが多くても気にせず、よりクリックされるような魅力的な説明文を考えましょう。 あなたはこのタグのために297文字まで持っている。 <meta property=”og:description” content=”Are you tired of links building the old school way? 何千ものウェブマスターにメールを送り、リンクを懇願するような方法です。 “/>

    og:image

    私が Facebook のトラフィックを 174% 増加させることができたと述べたのを覚えていますか？ それは、誰かが Quick Sprout からの URL を共有するたびに、Facebook が画像を表示するように、Open Graph を使用したからです。

    このタグの使い方に入る前に、Facebookの要件について説明します。 画像は、少なくとも50px×50px、できれば200px×200pxより大きいものでなければなりません。 さらに、画像のサイズは5MBを超えてはいけません。

    例 <meta property=”og:image” content=”https://www.quicksprout.com/wp-content/uploads/2013/03/linkbuilding.jpg”/>

    og:url

    このタグに、共有するページの URL を記述します。 このタグは一見関係ないように見えますが、同じコンテンツに複数の URL を設定することがあるため、重要なタグです。 このタグを使用することで、すべての共有が複数の URL ではなく 1 つの URL に移動するようになり、Facebook Edgerank の助けになります。

    例 <meta property=”og:url” content=”https://www.quicksprout.com/2013/03/21/11-creative-ways-to-build-links/”/>

    og:site_name

    このタグは Facebook にあなたのウェブサイトの名前を通知します。 このタグは本当に必要ではありませんが、含めても害はありません。

    例。 <meta property=”og:site_name” content=”Quick Sprout”/>

    fb:admins

    Facebookにファンページを持っていて、Facebookインサイトでもっとデータを取得したい場合、このタグを使用しなければなりません。 これは、あなたがサイトオーナーであることをFacebookに伝え、FacebookファンページをあなたのWebサイトに接続します。

    例: <meta property=”fb:admins” content=”500013011″/>

    Facebook Open Graph meta タグを配置したところで、Twitter Cards に進みましょう。

    Twitter Cards

    こんなツイートを見たことがありますか？

    さて、こうした細かいツイートは、Twitter Cardsを利用したときだけ表示されるのですが、その詳細を見てみましょう。 あなたのサイトにも導入しませんか？

    ここで、Twitter Cards を活用する方法を説明します。

    Yoast による SEO for WordPress プラグインを使用している場合は、次の手順を実行するだけです。 それ以外の方は、以下の手順に従ってください。

    twitter:card

    このメタ タグは、共有するコンテンツの種類を記述します。 Twitterでは、写真（画像の場合）、プレーヤー（動画の場合）、要約（その他のすべての場合）の3つのオプションがあります。 カードを定義しない場合、Twitterはデフォルトでsummaryを使用します。

    例: <meta name=”twitter:card” content=”summary”>

    twitter:url

    これは、Twitterで共有しているページです。 FacebookがURLを要求するのと同様に、TwitterもURLを要求します。これは、同じコンテンツを複数回サイトに掲載する可能性があるためです。 これは、1つのURLがすべてのツイートを取得することを保証します。 そうしないと、ツイートが複数のURLに分割されてしまいます。

    例: <meta name=”twitter:url” content=”https://www.quicksprout.com/2013/03/21/11-creative-ways-to-build-links/”>

    twitter:title

    Facebookのオープングラフのタイトルと同様に、これはキーワードで詰め込んではいけません。 人々がクリックしたくなるような、魅力的なものにしましょう。 ここでも、Facebookと同様に、文字数は70文字に制限しましょう。

    例 <meta name=”twitter:title” content=”11 Creative Ways to Build Links”>

    twitter:description

    これはGoogleのmeta descriptionタグに似ていますね。 しかし、キーワードを詰め込んではいけません。 あなたの目標は、人々があなたのウェブサイトをクリックするよう促す、説得力のある文章を作成することです。 あなたの説明は200文字に制限されています。

    例。 <meta name=”twitter:description” content=” 旧来の方法でリンクを構築することに疲れていませんか？ 何千ものウェブマスターにメールを送り、リンクを懇願するような方法です。 “>

    twitter:image

    あなたのツイートを目立たせるには、画像が必要です。 画像はファイルサイズが 1 MB 未満でなければならず、60px × 60px より小さくすることはできません。 120px by 120pxより大きい画像はリサイズされます。

    例: <meta name=”twitter:image” content=” https://www.quicksprout.com/wp-content/uploads/2013/03/linkbuilding.jpg”>

    Twitterカードのmetaタグをサイトに適用したら、Twitterのカードプログラムに申請する必要があります。 承認されると、Web サイトの URL がカード形式で表示されます。

    結論

    メタ タグは検索エンジンのためだけではありません。 ソーシャル メディア サイトでも活用されています。

    Google のランキングとクリックスルー レートのためにメタ タグを最適化するのと同じように、Facebook と Twitter にも同じことをする必要があります。

    ご覧のように、前もって少し多くの作業を必要としますが、ソーシャルメディアから実際にサイトを訪問する人を増やすことができるため、その成果は得られます。

    コメントを残す

    メールアドレスが公開されることはありません。