OGP設定は大事です

OGP設定は大事です

webのあれこれ
2019/01/18
0
vanillaice (Akira)
vanillaice (Akira)
OGP初心者向けInstruction

OGP (Opne Graph Protocol, オープン グラフ プロゥトコル) というのが何物であってどんな役割か、という説明です。結論から簡単に言うと SNSシェアを重要視する場合にはOGP設定が必須 です。

OGPとは

略称は「オージーピー」です。この役割は SNSでシェアされる際に「記事タイトル」「記事概要」「記事サムネイル」「記事URL」「記事の著者(サイト情報)」を正しく伝える ことにあります。テンプレートhtmlの最上部head要素内にmeta要素として記載されます。

逆の言い方をすると OGPが設定されていないとこれらの情報が正しく伝わらない ということですね。ですから「記事のシェア」を重要だと思うのであれば設定必須です。

中には「シェアをされたくない」という方もいらっしゃるかもしれません。その場合にはOGP設定を外すことに加え テンプレート内のSNSシェアアイコンも削除 してくださいね。シェアアイコンが表示されていることはシェアを許可しているのと同義です。ブログサービスによってはシェアアイコンを非表示化出来ない場合もありますが、その場合にはブログ自体を非表示にするかブログを辞めるか(笑)

OGP設定・未設定の表示の違い

Facebook

【OGP有効時】

【OGP無効時】

ブログカード

【OGP有効時】

【OGP無効時】

Twitterはまたちょっと違うんですが(後述)、一般的なSNSでは概ね上記のような感じです。ブログカードに至ってはもうなんともならないので単なるテキストリンクにされてしまう可能性が高いですよね。ブログカードを利用するということは相手方はせっかく紹介してくれる気満々なのにもったいないことです。

ページ送り背景

あとSNSとは直接関係ありませんが、私の制作した一部のテンプレートでは個別記事下にある ページ送り でOGP情報から取得したサムネイル表示を行っています。

【OGP有効時】

【OGP無効時】

全てのテンプレートではありませんので各テンプレートの専用記事に記してある仕様をご確認頂きまして、現時点でサムネイルが表示されていない方はOGPが無効状態のはずですから表示させたいならば有効化してください。

FC2ブログでOGPを設定するには

やり方は2通りあります。

  • テンプレートに直書き
  • ブログ個人設定で有効化

個人設定でもって行うのが一番簡単で確実ですからこちらを使ってください。
メタタグの設定

なんかもう、FC2ブログの機能の名付けが下手すぎる (´・ェ・`)
メタタグ設定 なんて言われても大抵の人は何のことかわからんし。メタタグ(メタ要素)なんてのは山程ありますがこの設定で触れるのはOGPだけ。なら OGP設定 って書いとけや (´-ε-`;)
「OGP」が「メタタグ」の一種であるとすぐに理解できる人は少ないと思うのですが。

「有効にする」を選択して「更新」を押しても設定が変更されない場合にはブラウザにAdblock(アドブロック)あるいはその類似拡張機能がONになっていないか確認してください。広告をブロックするためのアドオンです。これが設定変更の邪魔をすることが稀にあります。

正しく設定されたか確認するのに手っ取り早いのは個別記事のページ余白で右クリック「ページのソースを表示」「View page source」など似たような文言の項目がありますのでクリック。別タブでhtmlソースが開示されますので上の方に

  1. <meta property="og:site_name" content="サイト名">
  2. <meta property="og:title" content="記事タイトル">
  3. <meta property="og:type" content="article">
  4. <meta property="og:url" content="記事URL">
  5. <meta property="og:description" content="記事概要文">
  6. <meta property="og:image" content="記事内画像またはプロフィール画像アドレス">

この6項目が表記されているか確認。日本語の部分は不確定要素、記事ごとに異なる内容です。また、それらの内容が </head> の直前に書かれているかどうかも確認。位置が違う場合、特に </head> よりも下に書かれている場合にはhead要素のhtml構文にエラーがあるはずですから修正必須です。修正の仕方はそれぞれ異なりますのでお調べになるかテンプレート製作者に尋ねるか。

Twitterカード設定

Twitterでは「Twitterカード」と呼ばれる独自の仕様がありますので以下の記事を参考に。

FC2でOGPを利用したTweetの設定【Twitterカード】

FC2でOGPを利用したTweetの設定【Twitterカード】

SNSシェアに欠かせないOGP(おーぷん ぐらふ ぷろとこる) を含めたFC2でのシェアの仕方についてです。 SNS共通の設定がOGPと呼ばれるものです。 一体なんぞ? というのは通常の単純なシェアというのは見た目がとっても寂しい物です。 URLだけポーン みたいな (´・ω・`) OGPを正しく設定していると表示がリッチになります。...

まとめ

というわけでOGPについてでした。設定していない方が結構いらっしゃるようで、FC2ブログのデフォルト設定は「無効」ですから能動的に変更してください。FC2としてはユーザーの意志を無視して勝手にいれるわけにいきませんのでデフォルト無効です。

私が制作したテンプレートのページ送りの件を調べるには以下のリンクから専用記事へ。
FC2共有テンプレート一覧(表示タイプ別)

ブログカードをお使いになりたい方は以下の記事へ。

ブログカードのブックマークレットを作成しました

ブログカードのブックマークレットを作成しました

SSL化後の悩ましい作業のひとつ ブログカード これまで Embedly を使ってきましたが、仕様がかなり独特なんですよね (´・ω・`) 画像や記事概要など、必ずしもOGPに従っているわけではないもので。かといって はてなブログカード はSSLに対応できてないですし。 * 2018年現在ではSSL対応しています。...

Related post

Comments  0

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)