Logo
  • DoRubyとは
  • お問い合わせ
  • Ruby/Rails
  • Web開発
  • Webマーケティング
  • アピリッツ
  • ライフハック
  • ゲーム制作/開発
  • アプリ開発
  • 新しいカテゴリ
  • Railsの小技
  • Rubyの小技
  • Gemの紹介
  • ActiveRecord
  • 初心者向け
  • Java/Scalaテク
  • Unixのあれこれ
  • データベース
  • スマホ開発
  • HTML/CSS/JavaScript
  • デザイン製作
  • インフラ
  • クラウド
  • セキュリティ
  • エディタ
  • バージョン管理
  • その他
  • python
  • アクセス解析
  • Googleアナリティクス
  • Googleデータスタジオ
  • Web広告
  • SEO
  • UI/UX
  • ソーシャルメディア
  • EC開発
  • Webシステム開発
  • コンサルティング
  • Webデザイン
  • ブロックチェーン
  • ゲーム紹介
  • アプリ紹介
  • ASP
  • 風景
  • パソコン
  • ツール
  • ガジェット
  • 仕事術
  • 健康
  • 生活
  • 書評
  • Excel(エクセル)
  • PowerPoint(パワーポイント)
  • ゲームプランニング
  • SpriteStudio
  • マスターデータ入力/作成
  • Unity
  • キャラクターデザイン
  • ゲームシナリオ
  • レベルデザイン
  • ゲーム分析
  • 3DCG
  • イラスト制作
  • CG/アニメーション
      1. ホーム
      2. Webマーケティング
      3. SEO
      4. OGPを設定してFacebookシェアで目立たせよう!
      • 2018-03-30
        • カテゴリ:
        • SEO

      OGPを設定してFacebookシェアで目立たせよう!

      A37f2614ab3637402ad7f277fa9b2a29

      OGPで画像を設定してシェア時に目立たせる様な対応を行ったのでそれについて記事にします。

      はじめに

      連続投稿となります。待ちに待ったプロ野球が開幕してテンション高めのむらさきです。
      今回はFacebook等SNSでのシェアでたくさんの人の目に留まるように画像やタイトル等を設定するOGPについて書いていきたいと思います。

      OGPとは

      OGPとはOpen Graph Protocolの略です。FacebookなどのSNSにウェブページの情報を載せる際に必要なタグのことです。
      OGPを設定することで下図のようにシェア時に任意の画像やタイトルを入れることができます!
      enter image description here
      画像を入れることで多くの人の目に留まるようになりたくさんの人に見てもらえる機会が増えるので是非設定しましょう!

      OGPの設定方法

      OGPは設定したいページのhead内に以下のようなmetaタグを入れることで設定できます。

      <meta property="og:locale" content="ja_JP">
      <meta property="og:site_name" context="DoRuby">
      <meta property="og:title" context="RailsでLoggerを使ってLogローテーション">
      <meta property="og:description" context="DoRubyは、株式会社Appirits(アピリッツ)が運営するWeb技術・マーケティング情報発信ブログです。Ruby on Railsを中心に開発現場ならではの実践的な情報を随時掲載していきます。">
      <meta property="og:type" context="article">
      <meta property="og:url" context="https://doruby.jp/users/ueki/entries/Rails%E3%81%A7Logger%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6Log%E3%83%AD%E3%83%BC%E3%83%86%E3%82%B7%E3%83%A7%E3%83%B3">
      <meta property="og:image" context="https://doruby.jp/images/doruby_og.png">
      

      今回はこのように設定しました。
      OGPには必須で入れないといけないものが4つあります。

      og:title    ページのタイトル
      og:type     どんなページなのか(今回は記事のページなのでarticleを設定しました。blogやwebsiteなどもあります。)
      og:url      ページのurl
      og:image     ページの画像
      

      です。それ以外に書かれているmetaタグは必須ではないですが入れることでより詳しく表示させることができます。

      og:description     ページの説明文
      og:locale         サポートしている言語
      og:site_name       サイトの名前
      

      となっています。自分のページに合わせて設定しましょう!

      OGPの確認

      OGPが正しく設定されているかを確認するにはfacebook for developersのシェアデバッガーを使用しましょう。
      ここに確認したいページのurlを入れることで正しく設定されているかを確認できます。
      また、設定してもfacebookのクローラーにクロールされないと設定した画像等には切り替わらないのですが、「もう一度スクレイピング」を押すことですぐに設定した情報を反映させることができます。

      おわりに

      いかがだったでしょうか。
      OGPを設定して画像を変えたのに変わっていない!?と焦りましたが、シェアデバッガーで確認と同時に更新が出来るのでクロールされるのを待つ必要がないのはとてもいいですね。
      OGPを正しく設定してたくさんの人の目に留まるサイト作りを目指しましょう!


      • 79 views
        • Tweet
        • このエントリーをはてなブックマークに追加

      この記事を書いた人
      62c91f390ef106d4fcfedbe22660a53d?default=mm&size=80
      むらさき
      Rails初心者の17新卒エンジニア。日々新しい知識を取り入れながら、必要そうなことを備忘録として書き込んでいきます。

      「いいね!」するとDoRubyの最新記事を受け取ることができます。

      Facebook

      Twitterから最新記事を受け取るならこちら

      Follow @doruby

      Feedlyから最新記事を受け取るならこちら

      follow us in feedly

      おすすめの記事
      • 150 views
      • 2016-07-07
      便利なBootstrapデザイン
      • 1,640 views
      • 2016-07-27
      リニューアルをしたDoRubyの3つの目的

      カテゴリ

      Icon category 1Ruby/RailsList elementRailsの小技List elementRubyの小技List elementGemの紹介List elementActiveRecordList element初心者向けIcon category 4Web開発List elementJava/ScalaテクList elementUnixのあれこれList elementデータベースList elementスマホ開発List elementHTML/CSS/JavaScriptList elementデザイン製作List elementインフラList elementクラウドList elementセキュリティList elementエディタList elementバージョン管理List elementその他List elementpythonIcon category 5WebマーケティングList elementアクセス解析List elementGoogleアナリティクスList elementGoogleデータスタジオList elementWeb広告List elementSEOList elementUI/UXList elementソーシャルメディアIcon category 6アピリッツList elementEC開発List elementWebシステム開発List elementコンサルティングList elementWebデザインList elementブロックチェーンList elementゲーム紹介List elementアプリ紹介List elementASPList element風景Icon category 7ライフハックList elementパソコンList elementツールList elementガジェットList element仕事術List element健康List element生活List element書評List elementExcel(エクセル)List elementPowerPoint(パワーポイント)List elementゲーム制作/開発List elementゲームプランニングList elementSpriteStudioList elementマスターデータ入力/作成List elementUnityList elementキャラクターデザインList elementゲームシナリオList elementレベルデザインList elementゲーム分析List element3DCGList elementイラスト制作List elementCG/アニメーションList elementアプリ開発List element新しいカテゴリ

        人気の記事
        • 27 views
        • 2019-02-12
        カスタマーへの活用促進とヘルススコア
        最近の記事
        • 27 views
        • 2019-02-12
        カスタマーへの活用促進とヘルススコア
        • 115 views
        • 2019-01-08
        日本でもっとカスタマーサクセスを盛り上げよう!!の年末イベント
        • 177 views
        • 2018-12-10
        【Rails】I18nの言語データをDBから取得 / キャッシュ使用【i18n/i18n-active_record】
        • 165 views
        • 2018-12-10
        【Rails】I18nの言語データをDBから取得【i18n/i18n-active_record】
        • 148 views
        • 2018-11-12
        【jQuery】開閉パネルを最初から開いた状態にする
        Facebook

          サイト情報
          • DoRubyとは
          • 株式会社アピリッツ

          企業情報
          • 会社概要
          • 採用情報
          • お問い合わせ

          ソーシャルアカウント
          • Facebook
          • Twitter
          サービス製品
          • コミュニティサイト
          • Android向け ECアプリ制作パッケージ「ポケコマ」
          • レコメンドASP
          • サイト内検索ASP「Advantage Search」
          • オープンソースECサイト構築パッケージ「エレコマ」

          • 受注・在庫・商品情報一元管理「モールコネクター」
          • セキュリティ診断サービス
          • 戦略的EC画面設計・制作サービス
          • Googleアナリティクスセミナー
          • アクセス解析コンサルティング
          • SEOコンサルティング

          Copyright © Appirits All Rights Reserved.