はじめまして。
Qiita初投稿になります。
この記事はわたくしが、
Googleが管理しているであろうサイトのソースコードを
ChromeのDeveloper Toolsで見たときの感想です。
結論等があるわけではなく、あくまで備忘録的なものですが、
もしかしたら役に立つ方がいらっしゃるかもしれませんので、
一応、記事として残しシェアしたく思います。
目次
- なぜ、Googleが管理しているサイトのソースコードを見たのか
- どこがわからなかったのか
- Grow with Google
- Google Analitics
- Google document
- まとめ
#なぜ、Googleのサイトのソースコードを見ることになったか
当時わたしはSEOの勉強をしており、
見出し(hタグ)の適切なマークアップについて調べていました。
いい見本がないか考えていたところ、
Googleが管理しているサイトのソースコードを
見ればよいのではないかと思いつきました。
(SEO＝Google対策という話を聞いたことがあるため)
#どこがわからなかったのか
それでは本題です。
以下にわからなかった点をいくつか紹介いたします。
##Grow with Google
https://grow.google/intl/ALL_jp/
わからないところ…
複数のh1タグと一番上にh3タグ
このサイトは一つのページにh1を連発しています。
簡単に数えたところ11個ありました。
あと、一番上にh3タグがあります。
確かにh1タグはいくつ使ってもいいという話は
聞いたことがありますが、このページのhタグの
使い分けが僕にはよくわかりませんでした…。
いきなりh3タグというのも謎です…。
##Google Analitics
https://marketingplatform.google.com/intl/ja/about/analytics/
わからないところ…
h2の中にpタグ
一番上のh1タグの下にある文章をh2タグにしており、
そのh2タグの中をさらにpタグでマークアップしています。
わたくしは以前、見出しのタグの中にpタグを入れており、
間違っていると指摘された経験があります。
その後、自分でも調べて間違っているという情報が多かったので、
それ以降はやめていたのですが、今回Google Analiticsのサイトで、
見つけてしまい、またわからなくなりました。
##Google document
https://www.google.com/intl/ja_jp/docs/about/
わからないところ…
見出しっぽいのにspanタグ
ページ中盤あたりの、「共同作業でもっと便利に」
という文章は見出しっぽいのに、spanタグでマークアップされています。
親要素はlabelタグでこれもよくわかりません。(クリックできるような
カーソルの変化はありますが、クリックしても変化はありませんし…。)
#まとめ
以上です。
全てのサイトを見たわけではありませんので、
他にもあるかもしれませんが…。
今回は、もともと自身のマークアップやSEOの勉強のために、
Googleのサイトのソースコードを見ましたが、
自分が学んできたマークアップとの違いにびっくりした！
という記事でした。
今回紹介したGoogleのマークアップは現時点の自分にはできませんが、
いつか「なるほど。そういうことだったのか」などと、
思う日がやってくるかもしれません。
ある意味では新鮮な体験であり、勉強になりました。