【AMP】Googleが推奨しているAMP化で競合との差別化させる方法！導入方法とマークアップについて

コーディング

昨今のサイトやブログなどはただ更新していけばよいというわけではありません。

昔はそれでもよかったと思いますが

サイト運営やブログを運営していくなかで避けては通れないのがものがあります。

その一つがGoogleが推奨しているGoogle AMPです。

まずAMPが何かというとGoogleがユーザーにとっての利便性を高めるためにスマホページの表示を高速化させる技術のことです。

まだ導入していないサイトも多くみられますがこれからGoogle AMPが一般化されていくともいわれています。

そしてGoogle自身もAMP化することでSEOにもつながりサイトの評価も上がるということを言っています。

まだ対応していないサイトやブログは早めに対応しておいたほうがいいかもしれません。

それではAMP化について紹介していきたいと思います。

Google AMPを対応するメリット

モバイルページの高速表示

ページの読み込む速度によってユーザーに与えるストレスに影響をあると言われています。

たとえば表示に時間がかかったり読み込みが途中で止まってしまったりするとユーザーの離脱にもつながってしまいます。

Google AMPによって表示速度が速くなることでユーザーからしてもメリットが多く離脱防止にもつながると思います。

Googleに評価される

Googleが推奨しているAMPなので対応することでGoogleに評価されやすくなるというメリットがあります。

サイトが評価されることで検索順位にも影響を与える可能性は高いと思います。

サイトの差別化につながる

グーグルで推奨されているAMP化ですが実際にはまだ対応しているサイトやブログなどが少ないです。

早めに対応しておくことでほかのサイトとの差別化にもつながるかもしれません。

構造タグを使ったマークアップを意識する

次はSEOを意識したマークアップについて紹介していきたいと思います。

SEO対策にそったWordpressのテーマを使っている人はHTMLを直接いじることはあまりないかもしれません。

ですが一からコーディングしたりする人には知っておいて損はない情報です。

構造化タグについて

html5には構造化タグというものがあらたに追加されています。

HTML4では構造を伝えるタグがありませんでした。

構造化タグを使うことで文書の意味を検索エンジンやクローラーなどにどんな意味があるのかを伝えることができます。

検索エンジンからしたら意味の分からない文書より構造化されているページのほうが評価されやすいといった点があり構造化マークアップが重要視されています。

代表的な構造化タグ

<main> / メインタグ

<main>タグはページ内コンテンツのメインの内容であることを表すタグになります。

この<main>タグは、1ページ内に1つのみ使用することができます。複数は使用できないです。

また<article>、<aside>、<footer>、<header>、<nav>の中には入れられないので注意しましょう。

<article> / アーティクルタグ

一つの単体で内容が完結することができるコンテンツを指します。

具体的にはブログやニュースの記事などがあります。

<article>タグはページ内で複数使用することができます。

<section> / セクションタグ

章や節などのセクションを指します。

おもにタイトルと内容を1つのまとまりにしたものです。

<section>の中には見出し(hタグ) を入れることが推奨されています。

<aside> / アサイドタグ

関連リンクなどの補足などそのコンテンツがWebページの関連している補足情報であることを意味しています。

例えばバナー広告や関連記事などがこれに当たります。

<nav> / ナブタグ

ナビゲーションのまとまりのことを指します。

主にグローバルナビゲーション、パンくず、目次に使用されます。

<header> / ヘッダータグ

ページ内の一番上部であることを意味しています。

<header>タグはページ内で複数使用することができます。

<footer> / フッタータグ

ページ内の一番下部であることを意味しています。

<footer>タグはページ内で複数使用することができます。

構造化タグを使ったテンプレート例

それでは上記で紹介した構造タグを使った構造化テンプレートを次に紹介します。

下記は、構造化を考慮してコーディングした例になります。

ブログ記事とブログ記事一覧の2種類のパターンも紹介しているので使い分けてください。

<!DOCTYPE html>
<html lang="ja-JP">
<head></head>
<body>
	<header>ヘッダー</header>
	<nav>ナビゲーション</nav>

	<main>
		<nav>パンくずリスト</nav>
		<article> //記事開始
			<header>
				<nav>目次</nav>
			</header>

			<!-- ブログ記事 -->
			<section>
				<h2>記事タイトル</h2>
				<p>ブログ記事の内容</p>
			</section>
			<!-- //ブログ記事 -->

			<!-- ブログ記事一覧 -->
			<section>
				<article>
			       		<h2>記事のタイトル</h2>
			        	<p>記事の概要</p>
				</article>
			</section>
			<!-- //ブログ記事一覧 -->

			<footer>記事フッター</footer>
		</article>
	</main>

	<aside>関連記事</aside>

	<footer>ページ内フッター</footer>
</body>
</html>

構造化データとは

構造化データとはhtmlで書かれたものに情報や意味を付け加えることです。

文字列を人が見ればだいたい意味が分かると思いますが検索エンジンがすべて理解できるとは限らないです。

そこでデータに情報や意味を付け加えることでコンピューターだったり検索エンジンが理解しやすくなります。

たとえば会社名として「〇〇〇〇」という文字列があったとします。

「〇〇〇〇」を検索エンジンが見てもこれが会社名かどうか判断できません。

そこで「〇〇〇〇」は会社名であるということを情報として付け加えることで検索エンジンが会社名だと理解できるようになります。

構造化マークアップ

Googleでは、現在ページにJSON-LD を使用することをおすすめされています。

JSON-LD

<script type="application/ld+json">
{
  "@context" : "http://schema.org",
  "@type" : "Event",
  "name" : "XXXXXXX",
  "startDate" : "2020-07-24",
  "location" : {
    "@type" : "Place",
    "name" : "XXXXXXX"
  }
}
</script>

上記はhtmlのheadタグ内にいれます。

最後に

今回は専門的な知識も紹介しましたが今後のWEBサイトやブログなどもGoogle AMPに目を向けなくてはいけないときが来ると思います。

今のうちになにかしらの対応をしておくとよいと思います。

スポンサーリンク

コメント

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