ソース開く必要ナシ。Hタグをハイライトするブックマークレット「html-highlighter」を公開しました

ソース、どうやって確認していますか?

正しいマークアップ、HTML構造化の観点から、hタグ(h1, h2, h3…)の使いどころが大事なのは、メディア運営に限った話ではないはず。

とりあえず、SEO関連記事やHTMLについて調べてみるんだけど、記事によって書いてることが違ったりして、どうしていいやら。結局のところ、他サイト、有名サイトではhタグをどうやって使ってるんだろう?
そこで、構造化がしっかりしてるサイトでhタグがどのように使われてるか参考にする、あると思います。

今まではどうやっていたのか

1. HTMLソースを開いて確認する

ブラウザで見ているWebページ上で、 Command + Option + u とする(Chromeの場合)と、HTMLソースが別タブで開く。さらに Command + f とやって、ページ内を「h1」などのキーワードで検索する。と、ハイライトされ「あぁ、ここね」となります。

スクリーンショット 2015 06 24 9 29 54

めんどくさい……。

2. デバッガを開いて確認する

Webページ上で、 Command + Option + i とすると、「デベロッパーツール」が立ち上がりますが、上部のバーに表示されている虫眼鏡アイコンをクリックすると、Webページ上でカーソルが乗った部分がハイライト。クリックすると、デバッガ上でHTMLのその箇所を指し示してくれます。……その箇所が何のタグなのかをHTMLで確認、「……あぁ、ここがh1タグなのかぁ」という具合。

スクリーンショット 2015 06 24 9 30 56

やっぱりめんどくさい。

これからはhtml-highlighterを使いましょう

これ。

html-highlighter

ブックマークに追加して使ってください。

見たいページを開きます。あとは、あらかじめブックマークバーに追加しておいたこのブックマークレットをクリックするだけ。
そうすると、無駄にGoogle Material Designのカラーコードでハイライトされつつ、テキストで「〇〇 | h1」のように、タグ名も追加されるので、HTMLソースを確認しにいったり面倒な作業が要らなくなります。

これを使い始めると、いろんなページでポチポチとタグ確認するのが楽しくなるハズ。

GitHubでも公開してる

この html-highlighter株式会社ZINEのGitHubでも公開しています。

html-highlighter – ZINE INC.

圧縮前のjavascriptのソースコードも公開しているので、良かったらプルリク感想もお待ちしてます。

こんな感じで使える

SEOに気を遣ってるWebサイトと言えばnanapi

スクリーンショット 2015 06 24 9 50 19

ブックマークレット1発でこうなります。

スクリーンショット 2015 06 24 9 50 35

これ。

次ははてブ

スクリーンショット 2015 06 24 9 52 00

はてブもこう。

スクリーンショット 2015 06 24 9 52 13

ご活用ください。