2021年最新のSEO対策とモバイルファーストなどについて

2021.04.09

2021最新HTML5まとめ

サイトをモバイルに最適化する

2021年3月からは全てのサイトがモバイルファーストインデックス(MFI)になる。それに合わせて、ページスピードを改善することも重要で、Googleでは、３秒以内に表示完了するのが推奨されている。GoogleのPageSpeed Insightsで分析し、ページスピードの改善するなどの対策をおこなう。

サイト表示の高速化にDNS-Prefetch,Preconnect,Prefetch,Prerender,Preloadを試す。

Resource Hintsとは

外部サイトの静的なJSやCSSがページで使用される場合に、ページ表示と同時にアナリティクスなどの外部サイトの情報を事前に取得しておくこと。～の間に記載する。

headで事前に読込しておくことで、ページのレンダリング時（ページの遷移時）にダウンロードされない。DNS-PrefetchとPreconnectもDNSルックアップやConnectingなど、headで指定した外部読込み時間は0msとなる。

    Resource Hintsでのrelの概要
  • DNS-Prefetch　…　DNSルックアップで名前解決を事前に行う（通信有）
  • Preconnect　…　DNSルックアップと同時に事前接続をしておく（通信有）
  • Prefetch　…　JSやCSSを先読みして取得（Preloadというのもある）（通信無しのCSSや画像）
  • Prerender　…　次に表示しそうなページを事前にレンダリングしておく

preconnect 、dns-prefetchの両方を記載する意味

preconnectだけでdns-prefetchの処理も出来ているが、headに両方を記載する理由は、複数のブラウザに対応することが可能にするため。

ブラウザ対応を参照：dns-prefetch対応状況、 　preconnect

dns-prefetchは、DNSルックアップが省略される。外部サイトからリソースを取得する際は、DNSルックアップというドメイン名からIPアドレスを調べる作業が発生しているが、これを省略。

preconnectは、DNSルックアップに加えて、connect(TCPハンドシェイク、TLSネゴシエーション等)まで事前に処理

prefetchは、予めリソースをダウンロードしてキャッシュに格納する。こちらは、通信の確立を行なわず、画像やCSSのようなリソースを取得する場合に利用する。

他社サイトを事前ロードするprerender

prerenderは、prefetchと違い、指定リンク先のページをダウンロード、DOM構築、JavaScriptの実行などまで行います。 イメージとしては、不可視のタブでページを先に開いているような感覚です。このときCSSの適用やJavaScriptの実行も行われる。ページ以降前でも、遷移後の動作になる。そのため、タイム指定のアニメーションなどがすでに終了してしまうため、「Page Visibility API 」などで対策する必要がある。 ※Google Analyticsはprerenderでは反応しないことがあるので注意が必要。

ページ以降前にサイトデータを取得する「prerender」は、検索サイトなどでサイト情報取得内容を表示する際などに利用されている。

prefetchのブラウザの対応状況:caniuse.com

PHP


<!–- 　例　DNS プリフェッチの設定 -–>
<link rel=”dns-prefetch” href=”//apis.google.com”>/
<link rel=”dns-prefetch” href=”//platform.twitter.com”>/
<link rel=”dns-prefetch” href=”//connect.facebook.net”>/
<link rel=”dns-prefetch” href=”//www.facebook.com”>/
<link rel=”dns-prefetch” href=”//www.google-analytics.com”>

<!–- 例　外部のCDNも記載する！ -–>
<link rel='preconnect dns-prefetch' href=”marketingplatform.google.com/about/tag-manager/”>
<link rel=”dns-prefetch” href=”//adservice.google.ca”>
<link rel=”dns-prefetch” href=”//www.google.com”>
<link rel=”dns-prefetch” href=”//cse.google.com”>
<link rel=”dns-prefetch” href=”//www.googletagmanager.com”>
<link rel='preconnect dns-prefetch' href=”www.google.com/analytics/analytics/”>
<link rel='preconnect dns-prefetch' href=”developers.google.com/speed/libraries/”>
<link rel='preconnect dns-prefetch' href=”developers.google.com/apis-explorer/#p”>
<link rel='preconnect dns-prefetch' href=”www.bootstrapcdn.com/”>
<link rel='preconnect dns-prefetch' href=”marketingplatform.google.com/about/tag-manager/”>
<link rel='preconnect dns-prefetch' href=”fontawesome.com/”>
<link rel='preconnect dns-prefetch' href=”www.doubleclickbygoogle.com/”>
<link rel='preconnect dns-prefetch' href=”https://twitter.com/”>
<link rel='preconnect dns-prefetch' href=”https://youtube.com/”>

Resource Hintsによるページ表示を確認したい場合は、GTmetrixのWarerfallやChromeのNetworkタブで確認可能。

参考https://gtmetrix.com/

HTML5 ping 属性

PHP


<a href="<target_url  >" ping="<logging_url>" target="_blank" rel="noreferrer" ></a>

HTML5 では＜a＞ タグに ping という属性が定義されており、 リンクが押された際にリンク先とは別にログ用の URL にリクエストを投げる。ユーザがリンクをクリックした際に リンク先へページ移動すると同時に に「POST リクエスト」が飛ぶ (MIME type に text/ping)。

preloadで画像や、よく使うCSSをheadで事前に読込

大きいサイズの画像やCSSやjsなどをbody要素以下でレンダリングされる前にheadで事前に読込しておく。

参考https://web.dev/

PHP


<link rel="preload" as="script" href="script.js" >
<link rel="preload" as="style" href="style.css" >
<link rel="preload" as="image" href="img.png" >
<link rel="preload" as="video" href="vid.webm" type="video/webm" >
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin >

HTML5 img画像　loading=lazy　と width=”” height=”” 設定

HTMLに width=”” height=”” を記載して、CSSにattrCSS関数による画像サイズコントロールを行う。

このattrCSS関数は、HTMLのimgタグにwidthとheightが設定されている事、CSSのimg設定にmax-width: 100％、height: autoが設定されている事が条件になる。

PHP


img {
	width: 100%;/*又はmax-width:100%;*/
	height: auto;
	aspect-ratio: attr(width) / attr(height);
}

Googleリッチリザルト、構造化データ

構造化データで記述することで、検索結果にリッチリザルトが表示されるようにする。

Googleリッチリザルトのテスト

PHP


//例
<script type="application/ld+json">
{
	"@context": "https://xxxxx.com/",
	"@type": "Recipe",
	"name": "Party Coffee Cake",
	"author": {
	"@type": "Person",
	"name": "Mary Stone"
	},
	"datePublished": "2018-03-10",
	"description": "This coffee cake is awesome and perfect for parties.",
	"prepTime": "PT20M"
}
</script>

テーブルにタイトルがあるなら＜caption＞

テーブルにタイトルがあるなら「caption]タグでタイトルをつける。

metaタグの最適なものを設置する。

Googleがサポートしているmetaタグについて

参考：https://developers.google.com/

SEO対策だけじゃない、音声検索のVSO対策

ボイスサーチ（音声検索）最適化

2020年には音声検索は全スマートフォンユーザーの50%以上に使われている。スマホのマイクによる音声検索が増加しているので最適化する。音声検索が結果として表示するのは、オーガニック検索結果の1ページ目のサイトが多く、さらに検索結果として「強調スニペット（Featured Snippets：フィーチャードスニペット）」と呼ばれる内容が表示されることが多い。内容が充実しているページでは、1ページが最大3,000以上のクエリで強調スニペット表示されている事例もある。

パラグラフ型 ｐタグの45～97語のテキストが強調スニペットとして表示されることが多いというもの
リスト型 箇条書き形式の強調スニペットで、ulタグやolタグでマークアップした箇所が引用されることが多いというもの
テーブル型 表組み形式の強調スニペットで、tableタグでマークアップした表の全部、または一部が引用されるというもの

Adobe Analyticsの調査によると、音声アシストスマートスピーカーでの最も一般的な音声検索は、多い順に、音楽（70％）、天気予報（64％）、面白い質問（53％）、オンライン検索（47％）、ニュース（46％）、方向（34％）

参考：Adobe Analyticsの調査

Googleはランクブレインが

Googleはランクブレインとは、「滞在時間、クリック率（CTR）」による評価のこと。が３番目に重要なランキングファクター（順位を決める要素）だと正式に証言。ランクブレインとは、2015年からGoogleの検索エンジンに搭載されたアルゴリズム。

Googleの検索エンジンが自動生成する強調スニペット（フィーチャドスニペット）がユーザーの求めているものを表記しているので、サイトへクリックする必要が薄れてきている。

どんな検索ワードで流入しているかの確認は、SEOの被リンク分析・競合調査ツール「 Ahrefs(エイチレフス)」で調べることが可能。

参考：「 Ahrefs(エイチレフス)」https://ahrefs.jp/

Ahrefs(エイチレフス)で検索１０位以内の流入を調べたいときは以下のような設定を行う。

『ドメインを入力』して検索
ページ左部欄の『オーガニックキーワード』をクリック
『順位1~10位』に設定
『SERP機能』をクリック
『Featured snippet』を含めるにチェック
『適用』をクリックして表示する

「Content is King(全てはコンテンツの質)」。Googleで推奨されているHTML５記載に合わせて、E-A-Tとはなにかを理解する。

参考：Googleがあげる10のまとめ：google.com

Your Money or Your Life

YMYLとは、“Your Money or Your Life”の略語。人々の幸福や健康、経済的安定、安全などに影響を与える可能性があるページ、いわゆるお金と健康に関わる分野は重視されている。

E-A-Tで特に重要なYMYLに該当するページの種類
YMYLのページの種類 詳細
ショッピングページまたは金融取引ページ ユーザーが購入、送金、支払いを行えるウェブページ
オンラインの請求書など（オンラインストアやオンラインバンキングページなど）。
財務情報ページ 投資、税金、退職に関するアドバイスや情報を提供するウェブページ
計画、家の購入、大学の支払い、保険の購入など。
医療情報ページ 健康、薬物、特定の病気や状態、メンタルヘルス、栄養など関するアドバイスや情報を提供するウェブページ
法的情報ページ 法律上のアドバイスや離婚、子供などのトピックに関する情報を提供するウェブページ
監護権、遺言の作成、市民になるなど。
市民に情報を提供するために重要なニュース記事または公開/公式情報ページ 地方/州/国の政府のプロセス、政策、人、および法律に関する情報が含まれます。
その他 子どもの養子縁組、自動車の安全性に関する情報など。

GoogleのGeneral Guidelines「検索品質評価ガイドライン」

GoogleのGeneral Guidelinesでは、WEBサイトのオンライン上のレビューによってユーザー側の評価とみなされる。General GuidelinesではYelpやBBB（Better Business Bureau）、Amazon、Google Shoppingで評判調査をするようにRater（外部評価者）に指示してる。

E-A-Tを高めるための対策方法一覧表
E-A-Tカテゴリー E-A-Tを高める対策方法
専門性
（Expertise）		 テーマ・ジャンルに特化したWEBサイトにする
専門知識の量と質を高める
専門家に取材やインタビューする
専門家に監修・コメントをしてもらう
一次情報（経験に基づいた情報、体験談）を伝える
権威性
（Authoritativeness）		 著者名・運営会社名などの情報を開示する
WEBサイトを評価してもらいドメインパワーの強いサイトから質の高い被リンクを獲得する
SNSなどを積極的に活用してサイテーションを獲得する
信頼性
（Trustworthiness）		 会社情報やコンテンツの公開日・更新日など情報を詳しく開示する
古い情報を放置せず定期的にコンテンツの内容を最新の情報に更新する
ニュースサイトやメディアの場合、編集ポリシーを公開する
専門性の高いサイトや公的機関など信頼できるページから情報を引用・参照する
Googleマイビジネスを登録・運用し口コミを管理する
whois情報を公開する
その他 サイトURLをSSL化（http→https）する
適切な構造化データマークアップを設置する

更新日：

Googleデータマックアップについて

サイトコンテンツのE-A-Tを高める

E-A-Tとは、Expertise（専門性）,Authoritativeness（権威性）,Trustworthiness（信頼性）の頭文字で、、Googleがコンテンツを評価する際に非常に重要視している基準。以下の内容を明確にする。

検索品質評価ガイドライン： General Guidelines (Google’s Search Quality Rating Guidelines)※英語PDF

専門性（Expertise）とは

専門性とは、WEBサイトのテーマやジャンルが特定の分野や領域において専門性をもっているかという部分で、1つのWEBサイトで「投資に関するコンテンツ」と「SEOに関するコンテンツ」の両方を取り扱っている場合は、Googleは「投資」と「SEO」の両方を評価対象となり、専門性の評価が分散される。様々な内容に広く浅く手を出すよりも、特定のジャンルにおいて深く価値のある情報を提供する方が、Googleからは専門性が高いWEBサイトだと評価されやすくなるというのが専門性という面。

権威性（Authoritativeness）とは

権威性にはコンテンツ作成者の資格や肩書き、経験など

サイトの信頼性とは

他の方の記事や引用元を記載した上で、引用した情報は引用タグ（blockquoteタグ）で囲むようにする。

古い情報を放置せず定期的にコンテンツの内容を最新の情報に更新する。たとえば下記のような内容も記載すると信頼がえられるといわれている。。

会社情報やコンテンツの公開日・更新日など情報を詳しく開示する。
古い情報を放置せず定期的にコンテンツの内容を最新の情報に更新する
ニュースサイトやメディアの場合、編集ポリシーを公開する
専門性の高いサイトや公的機関など信頼できるページから情報を引用・参照する
Googleマイビジネスを登録・運用し口コミを管理する
whois情報を公開する

コンテンツの場合は
公開日・更新日
会社の住所
電話番号
メールアドレス
お問い合わせ先
運営会社HPのアドレス
サービス名など

数あるWEBサイトのテーマ・ジャンルの中でも、特にニュースサイトやメディアの場合は編集ポリシーを公開するようにする。 編集ポリシーとは、WEBサイト・WEBメディアをどのような理念で運営しているか（コンテンツの方向性など）を明示すること。

タイトルとURLをコピーしました