
ソース開く必要ナシ。Hタグをハイライトするブックマークレット「html-highlighter」を公開しました
ソース、どうやって確認していますか?
正しいマークアップ、HTML構造化の観点から、hタグ(h1, h2, h3…)の使いどころが大事なのは、メディア運営に限った話ではないはず。
とりあえず、SEO関連記事やHTMLについて調べてみるんだけど、記事によって書いてることが違ったりして、どうしていいやら。結局のところ、他サイト、有名サイトではhタグをどうやって使ってるんだろう?
そこで、構造化がしっかりしてるサイトでhタグがどのように使われてるか参考にする、あると思います。
今まではどうやっていたのか
1. HTMLソースを開いて確認する
ブラウザで見ているWebページ上で、 Command + Option + u
とする(Chromeの場合)と、HTMLソースが別タブで開く。さらに Command + f
とやって、ページ内を「h1」などのキーワードで検索する。と、ハイライトされ「あぁ、ここね」となります。
めんどくさい……。
2. デバッガを開いて確認する
Webページ上で、 Command + Option + i
とすると、「デベロッパーツール」が立ち上がりますが、上部のバーに表示されている虫眼鏡アイコンをクリックすると、Webページ上でカーソルが乗った部分がハイライト。クリックすると、デバッガ上でHTMLのその箇所を指し示してくれます。……その箇所が何のタグなのかをHTMLで確認、「……あぁ、ここがh1タグなのかぁ」という具合。
やっぱりめんどくさい。
これからはhtml-highlighterを使いましょう
これ。
ブックマークに追加して使ってください。
見たいページを開きます。あとは、あらかじめブックマークバーに追加しておいたこのブックマークレットをクリックするだけ。
そうすると、無駄にGoogle Material Designのカラーコードでハイライトされつつ、テキストで「〇〇 | h1」のように、タグ名も追加されるので、HTMLソースを確認しにいったり面倒な作業が要らなくなります。
これを使い始めると、いろんなページでポチポチとタグ確認するのが楽しくなるハズ。
GitHubでも公開してる
この html-highlighter
、株式会社ZINEのGitHubでも公開しています。
圧縮前のjavascriptのソースコードも公開しているので、良かったらプルリク、感想もお待ちしてます。
こんな感じで使える
SEOに気を遣ってるWebサイトと言えばnanapi。
ブックマークレット1発でこうなります。
これ。
次ははてブ。
はてブもこう。
ご活用ください。