”Web デザイン” と ”SEO”、一見すると関係ないような 2つの要素ですが、Web 設計の初期段階において検討しておかないといけない要素の 1つです。
今回はブラックボックス化しつつある SEO について、 Google の公式ドキュメント『検索について』をもとに、Web デザインにおける SEO の注意点をご紹介します。
【本稿はこんな方におすすめ】
HTML や CSSの学習初期、 Web アプリケーションの学習初期には、一般的に下記左のような構成で Webページを考えると思います。しかし、今はクロールするボットに内容を具体的に伝えるため、下記右のような構成が主流です。
右側の構成は 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 内への見出しタグ設置にも注意する必要が。
Googleの”検索に関する公式ドキュメント”をみますと「サイトのリッチリザルトを有効にする」という項目があります。”リッチリザルト”、初めて耳にする方もいらっしゃるかもしれませんが、WebデザインとSEOを考える上では重要なファクターの一つ。
例えば商品やレシピを検索した時に、上図のように画像とテキストがトップに表示されることはありませんか？また、有名人や会社名などで検索すると、サイドバーに概要が表示される場合もあると思います。
こうした情報のハイライトは”構造化”によって制御されています。
【Webデザインにおける構造化の注意点】
【現在の構造化項目】
| 記事 | イベント | 商品 |
| 本 | 主張（ファクトチェック） | Q & A |
| パンくずリスト | よくある質問 | レシピ |
| カルーセル | How to | レビュー |
| コース | 画像ライセンス | 検索ボックス |
| コロナウィルス | 求人情報 | ソフトウェア |
| 評論家レビュー | 職業訓練 | 読み上げ機能 |
| データセット | ローカルビジネス | 定期購入 |
| 雇用先の企業評価 | ロゴ | 動画 |
| 給料 | 映画 |
https://developers.google.com/search/docs/data-types/article
現在は約 30種類の構造化データですが、今後増える可能性もあります。Google や Yahoo！、Microsoft などによって結成された schema.org という団体がこうした構造化を企画しました。
項目の中には ビジュアル的な Webデザインと関係の無いものもありますが、一通り目を通しておきたいですね。
AMP というと”シンプル”な印象を受けますが、 AMP の公式サイトは動きもあってかっこいいです
Google は、モバイルファーストを意識し、2016年頃から Web ページにおいて AMP を推奨。 ページの読み込みスピードを重視する SEO にとって、AMP は重要なファクター。
しかし、 AMP を使おうと思うと Webデザインにおいて多くの制約事項があり、途中で AMP 対応、もしくは AMP から HTML というのは難しいもの。
【WebデザインにおけるAMPの注意点（抜粋）】
amp.devより
CNN や USA TODAY など大手メディアは AMP を採用しているようですが、一般的にはまだまだといった様子。
今後は 5G によって通信環境も変わってくると思いますので、 AMP の普及状況も注視しておきたいですね。
AMP で読み込みスピードについて触れましたので、もう少し Webデザインから見た”スピード”を確認していきましょう。
SEO対策にとってページの読み込みスピードは重要と言われる一方、計測してみると ◎ なサイトは少ないもの。
Google Speed Check -> LIG。5年間ほぼ毎日 Web 検索をしている大島ですが、以前に比べて LIG の登場回数が減ったと思いまして、チェックさせて頂きました。
Google のスピード測定ツール「PageSpeed Insights」を使うと、多くの場合で ”適切なサイズの画像を”、”次世代フォーマットでの画像の配信を” と注意喚起されます。
Google の推奨する次世代画像フォーマット「.webp」、確かに軽量な画像ファイルになりますが、 Safari は未対応です。
そして最近活況を迎えている YouTube。 Webページ内に YouTube を埋め込むケースも増えていると思いますが、そのまま iframe をセットすると明らかにページの読み込みスピードが落ちます。
この問題については、srcdoc や JavaScript での対処となると思いますが、 複数の YouTube 埋め込みは❌などありますので Webデザイン全体で考慮する必要があるでしょう。
リッチな Web デザインには JavaScript が欠かせないものですが、中には SEO に影響するものも。例えば Facebook などで使われている”無限スクロール”機能。たくさんのコンテンツを見せたいときに有効な処理方法の一つですが、 Google ボットから見ると”有効では無い”かもしれません。
試しに無限スクロールサイトを PageSpeed Insights で実行してみると、最初の画面しかボットは読み込まず、スクロールダウンで表示される内容は.... 読み込んでくれません。このほかにも AngularJS や React、 Vue.js などで非同期通信処理を行う場合は、SEOできない？、ということも考慮しておく必要が。
特殊な処理をすれば大丈夫な記述もありますが、工数を考えると上記のようなケースの SEO 対策は厳しい場合が多いでしょう。
最後にブログや 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 | ○ |
15番目までは Google News フィードに表示された内容で、16番目以降は世界の主要なメディアサイトや SEO 対策サイトを検索した結果。 結果としては、エリアや閲覧履歴など複数のファクターがある中で ”構造化” に対応した Webサイトがニュースフィードでピックアップされている傾向。
ビジュアル的に乏しい Web サイトでも、構造化対策をしているところは Google によって情報をピックアップされている印象を受けますね。尚、構造化については”パンくずリスト”の設置が多く、他にはロゴや Sitelinks searchbox など。
Yahoo!ニュースについては、Google 上は headlines.yahoo.co.jp で URL 紹介されるのに対して、実際のエンドポイントは news.yahoo.co.jp と秘密の SEO 対策を講じている様子。 ニュースフィード 15本中、3本が Yahoo!ニュースでした。
本稿制作にあたって利用した無料ツールの数々です。SEOを検討した時には役立ちます。
＼一流デザイナーのスキルが身に付く／
SEO というと未知数な部分が多く、懐疑的に感じる方も多いかもしれませんが、 Google のドキュメントに従って対策すれば自ずと結果は出てきます。
しかし Webデザイン視点で SEO を考えた時、複雑なHTML構成にくわえて、”スピーディーな変化” 問題があります。
今年のSEO対策は万全だからと言って、来年も同じ対策で上手くいくとは限らないので、こうした変化にも柔軟に対応できるスキルが必要です。
今まで SEO についてきちんと勉強してこなかった私個人としては、Google の公式ドキュメントの存在に驚き、今までの知識がどれほど乏しかったか、後悔しています。クロールボットも 16機*も動いているなんて知りませんでした...
「あのときSEOの知識があったら、結果は違っていたかも...」 とならないために、”正しいSEO”を知っておきましょう。
