【OGP設定】SNSでシェアするときのURLをリッチにする設定手順まとめ

更新日:

【Railsでアプリ開発中】プログラミング初心者の勉強ブログ #51

オリジナルアプリをSNSでシェアしたとき、表示がURLのみだとつまらないですよね。自分のWEBページのイメージ画像や詳細を正確に伝えられる、リッチな見た目のURLをOGPで設定方法を解説します。

はじめに

この記事は、railsフレームワークでオリジナルwebアプリ「免許学科試験学習サイト」作成中の僕が、プログラミングをしている中で気づいたことや学んだことを書いております。プログラミング初心者なので知識は少ないですが、現在通っているプログラミングスクール「DIVE INTO CODE」で学んでいることや、ネットで見つけた様々な記事を参考に記事を作成しております。

 

目次

 

OGPとは

OGPとは、「Open Graph Protcol(オープングラフプロトコル)」の略です。SNSでリンク貼ったときの表示を、URLだけでなく画像や説明文も加えたい場合は、OGPの設定が必要になります。「Twitterカード」はご存知でしょうか。それです、「Twitterカード」もOGPで設定されてます。

Twitterカード画像

設定かけるとこんな感じになります。 こうやってみるとOGPの力(女の子の力)は絶大です。クリックしたくなりますから。設置しておくに越したことありません。

 

ちなみにWordPressでのリンクカードでは、

こうなります。

OGPの設定を行えば、TwitterだけでなくSNS全般でリンクを貼り付けた際のURLがリッチになります。

 

OGP設定手順

OGPの設定は、基本的にHTMLの<head>タグ内に<meta>タグを追加するだけです。

ちなみに、以下の手順で設定した際、URLが適切に表示されているのを確認できたのは、

  1. Twitter
  2. facebook
  3. WordPress
  4. LINE
  5. slack

の5つです。TwitterとWPは上二つとして、残りは以下の画像です。

OGP一覧

 

では設定していきます。

 

HTMLのheadタグ内に<meta>タグを追加

今回はRailsで開発したアプリのORG設定を行いますので「views/layouts/application.html.erb」を編集していきます。とにかくHTMLのheadタグ内に追記する必要があります。

app/views/layouts/application.html.erb

 

headタグに「prefix」属性を追加

このまま記入します。調べていた際、サイトによって書いていたり書いてなかったりありましたが、記入して反映されるので問題ないです。

 

OGP共通設定部分

<meta property="og:〇〇".....>が共通部分の設定を行うmetaタグになります。

抜き出したものがこちら。

 

一行ずつ見ていきます。

 

サイト名の設定です。サイト名を「content」内に入れてください。

 

サイトのタイプの設定です。 基本的には「website」もしくは「article」のどちらか適した方を入れてください。

更に適切なタイプをつけたい場合は、以下のURL参照してください。

 

サイトのURLを設定します。URLを「content」内に入れてください。

 

サイトのタイトルを入れます。今回はサイト名と同じにしてます。

 

サイトの説明文の設定です。「content」内に説明文を入れてください。

 

サイトのイメージ画像の設定です。画像の「絶対パス」を入れてください。 必ず絶対パスです。

 

OGPでURLと共に表示される画像は、外部からの「スクレイピング」によって、設定した画像パスにアクセスし、画像データを取得することになります。

ですので、Railsアプリの場合は、設定したい画像を「public/assets」下に入れ、その画像の絶対パスを「content」内に記入しなければなりません。「app/assets/images」下ではOGPが画像を引っ張ってくることができないです、注意してください。

 

「public/assets」下は、基本的にはデプロイ前の「アセットプリコンパイル」によって生成されたファイルが入るものです。「app/assets/images」下に入れた画像も、アセットプリコンパイルすることで「public/assets」に入りますが、拡張子前にハッシュが付与されるため、元々の画像につけた名前と異なります。画像パスを入力する際に気をつけなければならない事項です。

 

今回の場合、

という絶対パスを使用しております。 これは「public/assets」下の「eyecatch.jpg」という名前の画像への絶対パスです。「eyecatch.jpg」にハッシュがついてないのは、アセットプリコンパイルとは関係なく、直で「public/assets」下に画像を入れ込んだためです。もし、アセットプリコンパイル後のハッシュのついた画像を入れ込む場合は、

みたいな形でハッシュのついた画像パスを入れてください。

 

いまいち何言ってるかわからない場合は、

この記事読んでください。読んだ後なら多分わかると思います。

 

Twitterカード関係の設定

Twitterは別設定になります。

「twitter:card」のところで、Twitterカードの種類を選ぶことができます。「summary」か「summary_large_image」が基本入ります。

「twitter:site」は自分のアカウント入れてください。

 

Twitterカードは4種類くらいあるみたいですが、ここでは基本の2つを紹介します。

summary_large_image

Twitterカードsummary_large_image

 

summary

Twitterカードsummary

 

画像を大きく見せた方が写りがいいです。有名ブロガーさんはだいたいsummary_large_imageを使用してます。僕は今WordPressのアイキャッチ画像が正方形で設定している関係でsummaryを使用しておりますが、設定変えてsummary_large_image使いたいなって思ってます。

 

fasebook関係の設定

facebook関係の設定は、

この1行だけなので簡単ですが、 「fb:app_id」とやらを取得しなければなりません。

やり方が載っているサイトを貼っときます。

取得したらあとは「content」にidを入れてください。

 

以上で完了です。上手くできていればURLがリッチになってると思います。

 

OGP設定が上手くいかないときに試すこと

OGP関連の設定を行い、いざURL共有してみるとうまい具合に表示されてないときがあります。特に画像は出ないことが多いです。原因は古いキャッシュが邪魔してるからです。もしくは、そもそも設定がうまく言ってないからです。後者の場合、頑張って設定し直すしかないのですが、キャッシュの場合は対応策があります。Twitterとfacebookのみですが、以下にリンク貼っときます。

 

シェアデバッガー

このサイトに調べたいURLを入力するとキャッシュが更新されて、現状facebookでどのように写っているか確認できます。

 

Card validator

こちらもシェアデバッガーと同様、調べたいURLを打ち込むとキャッシュが更新されます。

 

まとめ

URLの表示をキレイにしたいなと前から気になっていたことだったので、今回のオリジナルアプリ独自ドメイン化を機に、勉強しておこうと思いまとめてみました。

OGPで設定しおわった表示を見ると、写真の力は絶大というか、見た目は大事だなと改めて思います。

以上ありがとうございました。

-プログラミング学習
-, ,

Copyright© s u p ? , 2019 All Rights Reserved.