Webデザインから見たSEO



Webデザインから見たSEO

”Web デザイン” と ”SEO検索エンジン最適化”、一見すると関係ないような 2つの要素ですが、Web 設計の初期段階において検討しておかないといけない要素の 1つです。

今回はブラックボックス化しつつある SEO について、 Google の公式ドキュメント『検索について』をもとに、Web デザインにおける SEO の注意点をご紹介します。

【本稿はこんな方におすすめ】

  • 自分の Web サイトを立ち上げようと考えている
  • Webデザイン、設計を学んでいる
  • SEOを疑っている
目次
  1. Webデザインから見たSEO
  2. SEOとHTMLタグの基本構成
  3. WebデザインとSEOとページの構造化
  4. SEOとWebデザインとAMP
  5. WebデザインとSEOとSpeed
  6. WebデザインとSEOとJavaScript
  7. GoogleニュースフィードをSEO的に調べました
  8. Webデザインを手伝ってくれるSEOツール
  9. まとめ

Webデザインから見たSEO

SEOとHTMLタグの基本構成

HTML や CSSの学習初期、 Web アプリケーションの学習初期には、一般的に下記左のような構成で Webページを考えると思います。しかし、今はクロールするボットに内容を具体的に伝えるため、下記右のような構成が主流です。

image

右側の構成は WordPress の TwentyTwenty というテンプレートの HTML 構造

【図内の HTML タグについて】

header
<header>要素は、ドキュメントまたはセクションのヘッダーを指定。
紹介コンテンツのコンテナとして使用する必要あり。
1つのドキュメントに複数の<header>要素があっても OK。
main
<main>タグは、ドキュメントのメインコンテンツを指定。
<main>要素内には、サイドバー、メニュー、著作権情報、サイトのロゴ、検索フォームなど入れることは❌。
article
<article>タグは、独立した自己完結型コンテンツ。
ブログサイトなどでは本文を記述。
footer
ドキュメントやセクションのフッター部分を定義。
1つのドキュメントに複数の<footer>を含めてOK。

このほかにも <section><aside><nav>` など HTML 構造に関するものが存在します。

注意点としては各 HTML タグを設置する階層で、 body > main > article > section と各タグの意味を尊重してあげる必要がありますね。 section > article など逆にならないようにしないといけないですし、 article や section 内への見出しタグ設置にも注意する必要が。

WebデザインとSEOとページの構造化

Googleの”検索に関する公式ドキュメント”をみますと「サイトのリッチリザルトを有効にする」という項目があります。”リッチリザルト”、初めて耳にする方もいらっしゃるかもしれませんが、WebデザインとSEOを考える上では重要なファクターの一つ。

image

例えば商品やレシピを検索した時に、上図のように画像とテキストがトップに表示されることはありませんか?また、有名人や会社名などで検索すると、サイドバーに概要が表示される場合もあると思います。

こうした情報のハイライトは”構造化”によって制御されています。

【Webデザインにおける構造化の注意点】

  • 構造化に必要な項目の確認
  • 画像サイズ
  • ”パンくずリスト”などの配置位置

【現在の構造化項目】

記事 イベント 商品
主張(ファクトチェック) Q & A
パンくずリスト よくある質問 レシピ
カルーセル How to レビュー
コース 画像ライセンス 検索ボックス
コロナウィルス 求人情報 ソフトウェア
評論家レビュー 職業訓練 読み上げ機能
データセット ローカルビジネス 定期購入
雇用先の企業評価 ロゴ 動画
給料 映画

https://developers.google.com/search/docs/data-types/article

現在は約 30種類の構造化データですが、今後増える可能性もあります。Google や Yahoo!、Microsoft などによって結成された schema.org という団体がこうした構造化を企画しました。

項目の中には ビジュアル的な Webデザインと関係の無いものもありますが、一通り目を通しておきたいですね。

SEOとWebデザインとAMP

image

AMP というと”シンプル”な印象を受けますが、 AMP の公式サイトは動きもあってかっこいいです

Google は、モバイルファーストを意識し、2016年頃から Web ページにおいて AMPAccelerated Mobile Pages を推奨。 ページの読み込みスピードを重視する SEO にとって、AMP は重要なファクター。

しかし、 AMP を使おうと思うと Webデザインにおいて多くの制約事項があり、途中で AMP 対応、もしくは AMP から HTML というのは難しいもの。

【WebデザインにおけるAMPの注意点(抜粋)】

  • CSSのファイルサイズは 50kb 未満
  • JavaScript は非同期処理のコードのみ
  • CSSアニメなどは GPU 対象分のみ
  • Webフォントの規制

amp.devより

CNN や USA TODAY など大手メディアは AMP を採用しているようですが、一般的にはまだまだといった様子。

今後は 5G によって通信環境も変わってくると思いますので、 AMP の普及状況も注視しておきたいですね。

WebデザインとSEOとSpeed

AMP で読み込みスピードについて触れましたので、もう少し Webデザインから見た”スピード”を確認していきましょう。

SEO対策にとってページの読み込みスピードは重要と言われる一方、計測してみると ◎ なサイトは少ないもの。

image

Google Speed Check -> LIG。5年間ほぼ毎日 Web 検索をしている大島ですが、以前に比べて LIG の登場回数が減ったと思いまして、チェックさせて頂きました。

Google のスピード測定ツール「PageSpeed Insights」を使うと、多くの場合で ”適切なサイズの画像を”、”次世代フォーマットでの画像の配信を” と注意喚起されます。

Google の推奨する次世代画像フォーマット「.webp」、確かに軽量な画像ファイルになりますが、 Safari は未対応です。

そして最近活況を迎えている YouTube。 Webページ内に YouTube を埋め込むケースも増えていると思いますが、そのまま iframe をセットすると明らかにページの読み込みスピードが落ちます。

この問題については、srcdoc や JavaScript での対処となると思いますが、 複数の YouTube 埋め込みは❌などありますので Webデザイン全体で考慮する必要があるでしょう。

参考:【Webデザイナー&ユーチューバー必見】Webページのiframe作法3選

WebデザインとSEOとJavaScript

リッチな Web デザインには JavaScript が欠かせないものですが、中には SEO に影響するものも。例えば Facebook などで使われている”無限スクロールinfinite scrolling”機能。たくさんのコンテンツを見せたいときに有効な処理方法の一つですが、 Google ボットから見ると”有効では無い”かもしれません。

image

上図リンク

試しに無限スクロールサイトを PageSpeed Insights で実行してみると、最初の画面しかボットは読み込まず、スクロールダウンで表示される内容は.... 読み込んでくれません。このほかにも AngularJS や React、 Vue.js などで非同期通信処理を行う場合は、SEOできない?、ということも考慮しておく必要が。

特殊な処理をすれば大丈夫な記述もありますが、工数を考えると上記のようなケースの SEO 対策は厳しい場合が多いでしょう。

GoogleニュースフィードをSEO的に調べました

image

最後にブログや YouTube がバズればサイト運営者としては面白いわけですが、その”バズル”ポイントとして、Twitter の他に ”Goolgeニュース”があると思います。

今回ご紹介した 「Webデザインと SEO」 の要素を踏まえて、今私のスマホに表示されるニュースを SEO 的に確認してみました。

No. URL 構造化 Speed
(mobile)
AMP
1

https://headlines.yahoo.co.jp/articles/bd1420633320b0269f89e2bb0cb729d20e878c56

49
2

https://note.com/seokun/n/na116b7e5c47c

28
3

https://applech2.com/archives/20200521-mac-app-store-issue.html

17
4 http://photoshopvip.net/122401

28
5

https://www.atmarkit.co.jp/ait/articles/2005/22/news052.html

15
6

https://coliss.com/articles/build-websites/operation/css/fluid-responsive-font-size-calculator.html

13
7

https://techblog.zozo.com/entry/btob-project-management

30
8

https://www.atmarkit.co.jp/ait/articles/2005/21/news027.html

14
9

https://coinpost.jp/?p=151918

28
10

https://headlines.yahoo.co.jp/pickup/6360425

68
11

https://www.kyoto-np.co.jp/articles/-/253665

32
12

https://www.ladyeve.net/archives/066233

28
13

https://headlines.yahoo.co.jp/hl?a=20200522-00000003-binsider-int

51
14

https://www.gizmodo.jp/2020/05/edge-side-bar-search.html

21
15

https://hobby.dengeki.com/news/999337/

20
16

https://www.channelnewsasia.com/news/asia/malaysia-covid-19-muhyiddin-quarantine-14-days-coronavirus-12760206

1
17

https://www.nytimes.com/2020/05/22/us/coronavirus-live-updates.html

20
18

https://www.bloomberg.com/news/articles/2020-05-22/cornered-china-dares-trump-to-hit-back-with-hong-kong-power-grab

25
19

https://manablog.org/blog-life-start/

37
20

https://amp.dev/

88

構造化検証サイトSpeed Test AMP

15番目までは Google News フィードに表示された内容で、16番目以降は世界の主要なメディアサイトや SEO 対策サイトを検索した結果。 結果としては、エリアや閲覧履歴など複数のファクターがある中で ”構造化” に対応した Webサイトがニュースフィードでピックアップされている傾向。

ビジュアル的に乏しい Web サイトでも、構造化対策をしているところは Google によって情報をピックアップされている印象を受けますね。尚、構造化については”パンくずリスト”の設置が多く、他にはロゴや Sitelinks searchbox など。

  • 構造化対策率 75%
  • スピード評価平均  30点 

Yahoo!ニュースについては、Google 上は headlines.yahoo.co.jp で URL 紹介されるのに対して、実際のエンドポイントは news.yahoo.co.jp と秘密の SEO 対策を講じている様子。 ニュースフィード 15本中、3本が Yahoo!ニュースでした。

Webデザインを手伝ってくれるSEOツール

本稿制作にあたって利用した無料ツールの数々です。SEOを検討した時には役立ちます。

一流デザイナーのスキルが身に付く

CodeCampの無料体験はこちら

まとめ

SEO というと未知数な部分が多く、懐疑的に感じる方も多いかもしれませんが、 Google のドキュメントに従って対策すれば自ずと結果は出てきます。

しかし Webデザイン視点で SEO を考えた時、複雑なHTML構成にくわえて、”スピーディーな変化” 問題があります。

今年のSEO対策は万全だからと言って、来年も同じ対策で上手くいくとは限らないので、こうした変化にも柔軟に対応できるスキルが必要です。

今まで SEO についてきちんと勉強してこなかった私個人としては、Google の公式ドキュメントの存在に驚き、今までの知識がどれほど乏しかったか、後悔しています。クロールボットも 16機*も動いているなんて知りませんでした...

「あのときSEOの知識があったら、結果は違っていたかも...」 とならないために、”正しいSEO”を知っておきましょう。

関連記事

オシママサラ
この記事を書いた人
オシママサラ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp