BLOG



ogpcheck.gif

こんにちは、フロントエンドの村山です。

開発者向けにOGP設定等をまとめてチェックするブックマークレットを作成しました。先輩の柿内が以前にも「OGPタグ確認に便利!ブックマークレットで手早くチェック」という記事でブックマークレットを公開していますがあれのパクr・・・もとい、リスペクトした拡張版みたいな物です。

ソースは一から全て書きましたので、後継版とかバージョンアップではなく、全く別ものとなっております。

なぜこれを作ったかというと、以前の物も機能は十分だったのですが「ページ数が多くなると確認が面倒くさい」といういかにもダメなエンジニア思考(ディレクターさんにも同意を得ましたが)に依ります。一回で全部チェックできたらよくね?っていう事で作りました。

このOGPチェック/サイトマップローダーは動作したウェブページのsitemap.xmlを取得し解析、記載される全てのURLを読み込んでOGPタグ等の設定をチェックします。特性上大量アクセスが発生するため様々の問題に繋がる可能性があります。

ご利用は自己責任でお願い致します。ご利用した事で発生するいかなる問題にも私個人、弊社ともに責任を負わない事にご了承頂けた方のみご利用ください。

OGPチェック/サイトマップローダー
Google Chromeのブックマークに登録してください。
(その他のブラウザでの動作は多分すると思いますが、Chrome想定しかしていません)

このブックマークレットは永久公開を保証しませんがソース自体は隠してもいませんし、改変するなり組み込むなりご自由にご利用ください。

こういうチェックも必要じゃない?

とか、

こんな機能があったらイイネ!する

とかご意見ご要望ありましたらお寄せください。前向きに検討します。

OGPチェック/サイトマップローダーの概要

ブックマークレットが起動するとまずsitemap.xmlにアクセスを試みます。
sitemap.xmlは「今見ている階層 + sitemap.xml」で探し、見つからなければそれまでとなります。
大雑把ですが開発者のチェック用なので使い勝手や特殊なケース等は全く想定しておりません。

使い方

  1. ブックマークレットをブックマークしてください。
  2. 調べたいサイトのsitemap.xmlがある階層のページでブックマークレットを使用してください。
  3. 調査結果が一覧表示されます。

付けてみた機能

  • 左上のフィルタをクリックすると、エラーカードだけ表示するフィルタリングができます。
  • 周りの黒い部分をクリックすると、閉じます。

エラー判定基準

  • titleタグ がない場合
  • name属性 が description の metaタグ がない場合
  • OGP:url が設定されていない場合
  • OGP:title が設定されていない場合
  • OGP:description が設定されていない場合
  • titleタグ と OGP:title が一致しない場合
  • metaタグ(description) と OGP:description が一致しない場合
  • サイトマップ上の URL と OGP:url が一致しない場合

以上、村山の自由研究でした。