SEO対策とCSS【子(孫)セレクタによる読み込みの遅延、インライン化、構造化】

Question

HTML→CSS→JavaScript→jQueryと勉強を続け、現在はSEO対策について学んでいる初心者です。
SEO対策の内容については、主に書籍「現場のプロから学ぶSEO技術バイブル」からですが、こちらが2018/7/26初版なので、ネットでも並行して最新情報を調べながら勉強しています。
質問はSEO対策とCSSに関することで、下記の3点です。

###①子孫セレクタによる読み込みの遅延
前述の書籍において、子セレクタや子孫セレクタは、id名やclass名によるセレクタに比べて、探し出す工程が増えることによって読み込みが遅くなる為、多様すればユーザビリティの低下に繋がる、という記載があります。

一方で、HTMLやCSSの勉強をしていると、むやみやたらとidやclassを使用することは、コードが無駄に煩雑になり、運用過程での修正が手間になることがあるので、子セレクタや子孫セレクタを上手に使って、誰でも修正しやすい＝わかりやすいマークアップを心掛けると良い、としているサイトもあります。

個人的には、子セレクタや子孫セレクタは、初心者にとってはコードが見やすくわかりやすいので、divにidやclassを付与して、中身については子セレクタ子孫セレクタで対応したいと思っているのですが、実際の現場ではどのようにされているのでしょうか？

②CSSのインライン化

HTMLやCSSの勉強の中でよく見かけるのは、CSSをインライン化してはいけない、という内容です。
HTMLのコードが見づらくなることや、修正しにくいこと等が理由としてあげられています。

一方、SEOとCSSで検索をかけてみると、ファーストビューに関してはCSSをインライン化した方が、より早く表示できる(小さなCSSに限る)とかで、一部のインライン化を勧めているブログもあります。
これに関しては共通CSSについても同じで、内容が複雑でない限りは、外部ファイルとして読み込むのではなくインライン化すべき、という意見があるようです。

個人的にはHTMLとCSSはきっかり区別したいのですが、こちらも実際の現場ではどのようにされているのでしょうか？

③構造化マークアップ

前述の書籍において、構造化マークアップについて少し読みました。
その中で、「header」や「footer」、「section」、「article」などのタグを用いて、機械へそれぞれのかたまりが何を意味をするのかを教えると、SEO対策として有効だと記載がありました。
headerやfooterは当たり前に使っていますが、sectionやarticleは使用したことがなく、また勉強のためにいくつかwebサイトのコードを拝見しましたが、そちらでも使用されておりませんでした。

それがSEO対策として有効だというのと、そういう理由がわかって使う分には、マークアップしていく上でも構造がわかりやすくて助かるので、ぜひ利用していこうとは思うのですが、前述の通りいくつかのwebサイトでも使っていなかったことが気になります。
参考にしたwebサイトのいくつかは、web制作会社のもので、SEO対策がガッチリしていることもうたっていたので、対策していないわけはないのですが、上記タグを使用しない理由があるのでしょうか？

---

主な質問は上記の3つです。
その他、前述の書籍において、①構造化データの種類と運用、②ミドルウェア等サーバー寄りの項目については読んでいて全くのちんぷんかんぷんだったので、もし初心者に易しい書籍やサイト、または勉強法をご存知でしたら、教えていただけたら嬉しいです。

長くなりましたが、ご教授のほど何卒よろしくお願い致します。

Answer 1

①子孫セレクタによる読み込みの遅延

基本的にはその通りです。
ただし、何千箇所に渡って、そのようなセレクタが使われていた場合に何秒かほど影響がでるといった具合なので、
（ただし、UX的には、n00msの遅延でも影響があると言われている）
特に行数がそこまで多くないのなら、特に問題ないと思いますので、
分かりやすさ優先で運用するなら、それでいいと思いますよ。

②CSSのインライン化

スピードだけを考えるならば、
インライン化より、非同期での外部ファイル読み込みの方が俄然速いです。
ただし、非同期外部での読み込みは、一瞬、CSSが反映されていない時間がどうしてもできてしまうため、
ファーストビューは、インライン、それ以降の表示は非同期読み込み外部CSS、と分けてやることが、
最近ではトレンドかと思われます。
つまり、UXとの天秤にかける判断が必要になります。

インラインにする方法は大きく分けて三つあり、

• サーバーサイドを挟んで、一行化したCSSを返す
• 統合ビルド系のツールを使用して、静的HTMLの中に組み込む
• JavaScriptのフレームワークを使うか、自作のライブラリにて、DOMで挿入する

というのが代表的です。

③構造化マークアップ

有利になるのは間違いありません。

上記タグを使用しない理由があるのでしょうか？

sectionやarticleなどに関しては、現代では標準となっておりますので、
使用すべきです。
アウトラインを明確にブロック別に定義できるため、
これは、現代のHTMLコーディングにおいては、必須となります。

余談

さて、構造化に関しては、実はもう一つ意味があるので、
そちらも紹介しておきます。

スキームタグを使うという物です。
これに関しては、上記のセマンティックマークアップを、さらに意味合いを細かく定義するものです

そして、その意味での構造化は、上記タグよりは確実に、使用しているサイトはグッと少なくなります。
その理由に関しては様々、各サイトによって違いますが、
下記理由が挙げられます。

• 単純にノウハウがない
• コストがかかる（動的なサイトで、構造化タグの要素選出が難しい、ロジックが複雑になる）

一つ目に関しては、
実はけっこう深刻（？）で、日本語での記事では方法がバラバラですし、
公式のスキームタグのサイトにおいても、各要素でのマークアップのしかたに統一感があまり見られなかったりなど、
かなり難しい面があります。
ぶっちゃけプロでも、ガチで迷います。
なので、Search Consoleや、構造化テストツールとにらめっこしながら、
これだ！という構造化を自身で見つけるしかありません。

Comments

[works_noname]

ご回答ありがとうございます。

【①子孫セレクタによる読み込みの遅延】
そうなのですね、何千箇所など膨大にならない限りは、そこまで敏感になることでもないのですね。
SEO対策を学んでいく過程でUIやUXについて、さらに詳しく勉強する場面がきたら、それを念頭におきつつ意識して読んでみたいと思います。

【②CSSのインライン化】
やはりファーストビューの観点からは、インライン化は必要な場合もあるのですね。
最初からサクサク表示できるような単純で軽いページがファーストビューに採用されている場合には、あまり考えなくて良いということでしょうか。

●サーバーサイドを挟んで一行化したCSSを返す
よくわからず調べたのですが、ひとまず一行化というのは、人間が読む用の改行やスペースを排除して、一行にまとめたCSSということでしょうか？
そしてサーバーサイドを挟んで……で、いまいちわからず、サーバーサイドで検索してよくわかっていないのを痛感したので、これからもっと調べていきたいと思います。

●統合ビルド系のツールを使用して静的HTMLの中に組み込む
これは先のご回答者様のおっしゃっていた、webpackを利用してビルド時にインラインに展開する、ということでしょうか。

●JavaScriptのフレームワークを使うか、自作のライブラリにて、DOMで挿入する
HTMLの中に最初から記載するのではなく、JavaScriptによって後から挿入するということでしょうか。
フレームワークがわからず調べたら、サーバーサイドプログラミング（≠バックエンド？）とクライアントサイドプログラミング（≠フロントエンド？）が出てきて、たぶん私はクライアントサイドプログラミング？をかじったくらいなので、いまいちピンときませんでした……。すみません。
JavaScriptは変数がどうとかif分とか関数とか、ひととおり基礎を触れたくらいしかまだ勉強していないのです。
でも将来的にはサーバーサイドも勉強していくつもりなので、SEOについてひととおり読んだら、先の一行化したCSSを返すについても含めて、少しずつ勉強してみたいと思います。

【③構造化マークアップ】
そうなのですね、ではより積極的に勉強したいと思います。

【余談】
スキームタグ、興味があります。
でも「スキームタグとは」でGoogle検索をかけたら、なんだか難しくてよくわからないページがたくさん出てきました。
構造化マークアップの延長でしょうか？ 初心者におすすめのサイトはありますか？
また、スキームタグがそもそもどういったものなのかよくわからないので、もっと良い検索ワードがあったら教えていただけたら嬉しいです。

新しい内容も加えてご回答いただき、誠にありがとうございます。
内容が一部難しくて、少し理解するのに時間はかかりそうですが、とてもワクワクしています。
もしよろしければ、最後の余談の部分など、またお答えいただけたら嬉しいです。
お手数おかけしますが、よろしくお願い致します。

[miyabi_pudding]

> あまり考えなくて良いということでしょうか。

状況によります。
表示速度を最優先して、UXを犠牲にするか、多少遅くてもUXを優先するか、ですね。
ファーストビューに関してはどうしても両者は反比例します。

> webpackを利用してビルド時にインラインに展開する、ということでしょうか。

はい、その通りです。
Gulp単体や、Pythonなど、
とにかく、静的HTMLに入れ込んでしまうということです。
さすがに一個一個のファイルでやるのは現実的でないので、
webpackなどのコンパイラーを使います。

> JavaScriptによって後から挿入するということでしょうか。

その通りです。
フレームワークに関しては、
React.js、Vue.js、Angularなどが有名ですね。
自作はちょっと、きついと思うので、
比較的導入のハードルが低めの、Vue.jsがおすすめです。
（Angularは学習コスト高いので、挑戦するなら覚悟が必要）

> 構造化マークアップの延長でしょうか？

延長ではありません。
むしろ別ベクトルとも言えます。
W3Cの枠組みとは別の話なので。
構造化拡張と言った方が近いかもしれません。

> もっと良い検索ワードがあったら教えていただけたら嬉しいです。

HTML 構造化
でいろいろと出てくると思います。
ただ、記事数はそこまで多くありません。
（人によってやり方や解釈にバラ付きがあり、無責任な記事になりやすいからと思われる）
なので、調査は骨が折れるかと思いますが、興味があるなら、じっくり調査されるといいかと。

[works_noname]

ご返信ありがとうございます。
仕事で忙殺されてしまい、お返事が遅くなりました。申し訳ございません。

＞CSSのインライン化、ファーストビュー
デザインやサイトのコンセプトや客層や、あらゆる内容を考慮してケースバイケースで決めていくしかない、ということなのですね。

＞ビルド時にインライン展開
＞JavaScriptによって後から挿入
ざっくりした概要は理解できました。
しかし、GulpやPythonなどは見かけたことがある程度、また、React.js、Vue.js、Angularなどははじめて目にしました。（Pythonは何かで好きな言語ランキング1位だと聞いたことがあります）
そのあたりについては、SEOの勉強をしながら、改めて調べてみたいと思います。
おすすめのフレームワークなど教えていただけて、嬉しいです。勉強します。

＞構造化マークアップとスキームタグ
そうなのですね……別ベクトルですか。
なるほど、先におっしゃられていたように、記事数が少ないのはそういうことなのですね。
興味は非常にあるので、そちらも勉強してみたいです。
しかし最近インプットに偏っているので、実際にコーディングする時間を増やしていきたい頃でもあり……少しずつ、調べてみようと思います。
検索ワードも教えていただき、大変嬉しいです。

たびたびありがとうございます。
今は理解不足の為とんちんかんなお返事しかできませんが、勉強を重ねていく中で、皆さんのご回答を見返して理解を深めていきたいです。
ありがとうございました。

Answer 2

他の方が書かれていること以外で、私がやっている点をお答えしますね^^

①子孫セレクタによる読み込みの遅延

これは基本気にしていません。

子孫セレクタを使う際、
極端な計算が必要になるほどの階層化

.sample ~ div + ul > li:first-child > p > code + span { ～ }

なんて事も理論的に可能ですが、
ここまでやったら読み込みも遅くなりますし
自分で見ても意味不明。。。

自分で見て、パッと分かる
分かりやすくなる程度のセレクタであれば
気になる程の遅延にはならないと思います^^

idではほぼ指定はしませんが
セレクタやclassよりも気にしているのは、
無駄な重複を避ける事ですね。

例えば div.hoge p.sam に対して

p {margin: 1em 0; }
div p {margin: 0 auto 5px; }
.hoge p {margin: 15px; }
.hoge p.sam {margin: 1em 0; }
～
～
div.hoge p.sam {margin: 0 5% 15px; }

のように、何度も値を載せ替えるとか
p.sam に対する指定が複数個所に書かれているとか

p {margin: 1em 0; }
div.hoge p {margin: 15px; }
div.hoge p.sam {margin: 1em 0; }
div p {margin: 0 auto 5px !important; }

と後から !important を使っているとか

こういった無駄な肥大の方が読み込みに影響すると思います。

②CSSのインライン化

これはPageSpeed Insights でも推奨されていたりして
トレンドっぽくなっていますが。。。

LP のようにファーストビューがキッチリしているものはいいですが
2～3カラムのblogですと
ほぼほぼ載せる形になってしまいますので
ケースbyケースですね。

構造化タグ

書き換えの手間で、していないサイトが多いのでは?
と思います。

新しいサイトを作るのであれば
最初にフォーマットを作れば済みますが
構造化が広まる前に作られ
一定のボリュームがあるサイトに手を入れるとなると。。。

ものにもよりますが
かなりの手間と時間を見ないと、ですから^^;;

構造化データ

一見取っ付きにくいですが
それ程大変ではありませんし、
やっておいた方が良いと思います^^

私は

パンくず ⇒ microdata
ベージ ⇒ JSON-LD

にしてします。

JSON-LD は、jsベースなので
ページタイプごとに1個作って読ませれば済むので楽ちん。

	"@context": "https://schema.org",
	"@type": "Article",
	"headline": "【WordPress SEO対策】************* ",
	"datePublished" : "2020-02-03",
	"dateModified": "2020-02-04",
	"description": "*******************",
	"image": {
		"@type": "ImageObject",
		"url": "**********.png"
	},
	"author": {
		"@type": "Person",
		"name": "*****"
	},  
	"publisher": {
		"@type": "Organization",
		"name": "***********",
		"logo": {
			"@type": "ImageObject",
			"url": "**************.png",
			"width": 320,
			"height": 69
		}
	},
	"mainEntityOfPage": "*******************"

// ******** 部分は伏字です^^;;

こんな感じで書き出せます^^v

Comments

[works_noname]

ご回答ありがとうございます。
仕事で忙殺されてしまい、お返事が遅くなりました。申し訳ございません。

【①子孫セレクタによる読み込みの遅延】
具体例をたくさんあげていただいて、ありがとうございます。
つまり、子孫セレクタを使うかどうかよりも、より簡潔であること、誰が見ても理解しやすく、修正も容易であるような、シンプルなコーディングを目指す方が重要だということですね。
今までも気をつけてきましたが、まだまだコーディング経験が足りず、とりあえずで書き足して済ませることがあるので、シンプルに書く癖をつけたいと思います。

【②CSSのインライン化】
PageSpeed Insights……はじめて聞きました。大変勉強になります、ありがとうございます。
ファーストビューのローディングを考慮したインライン化については、デザインによってその都度判断する他ないのですね。

【③構造化マークアップ】
いちから作ることしか考えていませんでしたが、そうですよね、既にあるものを修正していくパターンも多いですよね。それもやはり、ケースバイケースですね。
構造化データについては、おっしゃるとおり正直とっつきにくいなと思っていて、仕事のためでもなければ挫折してしまいそうです。でも、もう少し勉強したら、それほど大変ではないと思えるようになるのですね。
コードまで公開していただき、大変嬉しいです。今はまだ何も理解できませんが、これから勉強していく中で、改めて見返したいと思います。ありがとうございます。

具体的な内容が多く含まれていて、大変勉強になりました。
まだ構造化については苦手意識が先行していますが、皆さんのご回答から勉強させていただきながら、頑張りたいと思います。ありがとうございます。

Answer 3

①子孫セレクタによる読み込みの遅延
これは、人間が感じることのできない領域だと思います。
これを意識することで読み込み速度が１秒早くなるわけではないので、あまり気にする必要性はないと思います。
どちらかと言うと、CSSコードは圧縮することで圧縮前と比べるとファイルサイズが小さくなり結果読み込み速度改善につながることになります。
id, classの付与はCSS設計に依ってきます。idでスタイル設定は優先度が高く!importantの乱用が増えるのでおすすめできません。classを使用してスタイル設定をするのがベターです。idはJavascriptや他の言語での参照時に使用することが多いです。

②CSSのインライン化
SEOに結び付くことを考えたことはありませんでした。
しかし、インライン化したほうが読み込み速度が改善されると思います。
開発時は、インラインに記述するのではなくwebpackを使用してビルド時にインラインに展開することが多いです。

③構造化マークアップ
アウトライン構造を意識してコーディングすることでクローラーが認識しやすい効果があります。
適当にdivやpを使用するよりは、section, h1~h5の様に本来の意味合いを踏襲して使用することにより、開発時の可視性も高めることも可能になります。

上記タグを使用しない理由があるのでしょうか？
アウトライン構造に興味がないだけだと思います。
結構現場にはすべてdivでコーディングする人は多いです。

Comments

[works_noname]

ご回答ありがとうございます。

【①子孫セレクタによる読み込みの遅延】
読み込み速度について、そうなのですね。
現状はまだ、「デザインカンプをコーディングによって思った通りに再現すること」がメインで、そのコードをSEOの観点からブラッシュアップしようとしている程度の段階なので、CSSの圧縮などは勉強不足でした。
実際にサーバーに上げる際には、そういった作業も必要なのですね。勉強します。
また、idやclassの付与についてのアドバイスをありがとうございます。今のところclassメインで使用していますが、JavaScriptを含めidの使いどころをなどを、より勉強していきたいと思います。

【②CSSのインライン化】
webpackやビルド等、まだ勉強前の内容が含まれておりますが、こういった機会に新たな知識を身に付けられるのはとても嬉しいです。
理解は遠く及んでいませんが、調べてみたら、webpackはバラバラのjsデータをひとまとめにできるもので、ビルドは実行可能ファイルをつくるもの、というような記載がありました。webpackについてはJavaScriptの勉強の課程でinport/exportを学んだので、うすぼんやり入口くらいは理解できますが、ビルドはまだまだ勉強不足です。書いたコードがそのままでは実行できない、からして？です。HTMLからひとつずつこなして、少しずつ調べて理解していきたいと思います。
話はそれましたが、CSSは開発段階ではとりあえず別々で良いのですね。最後にインライン記述する、これを覚えておきたいと思います。

【③構造化マークアップ】
やはりそうなのですね。そして使用しない理由についても、そういう人が多い、というだけなのだとわかって安心しました。明確にデメリットがないのであれば、構造化には積極的に取り組んだ方が良いですよね。

ひとつひとつに細かなご回答をありがとうございます。大変勉強になりました。
FrontEnd_Japan様のご回答でもう謎は解決できているのですが、たくさんの方々のお話を伺いたいので、もう少しだけこのまま回答を募集したいと思います。
ありがとうございました。