bloggerのamp対応でページ構成を検討
こんにちは Tomoです。
前回の続きで今回はページ構成を考えてみます。
前回の内容については、以下を参照してください。
Bloggerで最小限のコーディングでampテスト実施- ページ構成
- header
- nav
- main
- article
- section
- aside
- footer
- header
- ページサイズ
- まとめ
ページ構成
まずはページ構成のイメージ図を示します。
色については特に意味はありません。
ページ構成には歴史があります。
２０数年前は静的なHTMLのページが主体でメニューやヘッダ等１枚、1枚のページに埋め込んで作成していました。しかし、毎回新しいページを作成するたびに記述が必要になるため、共通のHTMLを作成しiframeを使うことでヘッダーやサイドメニューを作成するようになります。
その後PHPやJavaなど動的なHTMLを作成できるようになり、テンプレートを用いて構成を簡単に作れるようになりました。よくつかわれていたのは<div class='headar'>とdivタグのクラスやID属性でヘッダやサイドメニュー等を定義していました。
約１０数年前からHTML5が登場し、divから専用の要素（タグ）が疲れるようになります。現在では上記イメージ図のような構成が主流になります。
以降はページ構成に対し解説しますが、データ構造とbodyタグについて記載します。
データ構造については、以下の通りGoogleがガイドラインにも記載しています。
Google 検索では、ページのコンテンツを理解するよう取り組んでいます。ページに構造化データを含めて、ページの内容についての明白な判断材料を提供すると、Google でそのページをより正確に理解できるようになります。 参照先：Google検索 ガイド 構造化データの仕組みについて https://developers.google.com/search/docs/guides/intro-structured-data?hl=jaより
このようにデータ構造を考慮したページ作りをすることでSEOの向上にも繋がります。
これから説明するタグは、コンテンツ、セクション、要素等呼ばれますが、ここではコンテンツで記載します。
なお、このガイドラインにも書かれていますが、構造化データの形式には３種類あり、ここでは「microdata」を使用します。
では細かく解説していきます。最初はbodyタグです。
<body itemscope='itemscope' itemtype='http://schema.org/WebPage'>
bodyタグの構成です。itemtypeに「http://schema.org/WebPage」を指定しています。ウェブページであることを表します。
itemscopeはこの型の範囲を表しています。本来は「itemscope」のみの記述でよいのですが、bloggerは単体で記述することができないため、itemscope='itemscope'のように記載しています。amoの時と同じような記述方法になります。
header
ヘッダータグです。タイトルやナビゲーションのタグを包括することができます。
<header itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/WPHeader'>
「itemtype='https://schema.org/WPHeader'」はヘッダーであることを表します。
itempropはプロパティ値です。プライマリエンティティ（主要な内容）のコンテンツであることを記載します
nav
ナビゲーションタグです。メニューに使われます。ナビゲーションはヘッダーの外側に配置することも可能ですが今回はヘッダの中に配置しています。
<nav itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement'>
「itemtype='https://schema.org/SiteNavigationElement'」はナビゲーションコンテンツであることを表します。
main
メインタグです。ページの主要なコンテンツであること表します。
<main itemprop='mainContentOfPage' itemscope='itemscope' itemtype='http://schema.org/Blog'>
「itemtype='http://schema.org/Blog'」はメインがブログであることを表します。
itemprop='mainContentOfPage'はこのページのメインとなるコンテンツであることを示します。
「mainEntity」や「mainContentOfPage」このあたりの主要な位置づけが分かり難いです。
ページは複数のコンテンツが集まって構成されています。例えばタイトルコンテンツ、パンくずコンテンツ、プロフィールコンテンツなどです。
コンテンツの中でも重要なのが今回の構成で説明しているコンテンツで「mainEntity」となります。そのなかで最も主要な箇所が「mainContentOfPag」です。
article
アーティクルタグです。アーティクルはコンテンツのまとまりを表します。
ブログの場合は投稿とその投稿に対するコメント入力欄がある場合、全体をアーティクルで囲み、その囲みの内側アーティクルを用意してそこにコメントのフォームを入れます。
<article itemprop='blogPost' itemscope='itemscope' itemtype='https://schema.org/BlogPosting'>
「itemtype='https://schema.org/BlogPosting'」はブログの投稿を表します。
itemprop='blogPost'ブログの投稿コンテンツであることを表します。
section
セクションタグです。セクションは記事の一部や、ページの機能のセクション（まとまった部分）を表します。
<section>
sectionの使用については私もまだ理解不足です。itemtypeなどは付与はしていません。
aside
サイドバーで使用するタグです。この表現は正式には正しくないですが今回の構成上の表現とします。ページのサイドバーを表します。
<aside itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/WPSideBar'>
「itemtype='https://schema.org/WPSideBar'」はサイドバーコンテンツであることを表します。
ちなみに、日本の場合サイドバーが右側に多いのは右利きが多くマウスなど右側にあるため操作がしやすい観点から配置されやすいようです。
footer
フッタータグです。まとまった内容の下に配置しますが、ここではページフッターとして表します。
<footer itemprop='mainEntity' itemscope='itemscope' itemtype='https://schema.org/WPFooter'>
「itemtype='https://schema.org/WPFooter'」はサフッターコンテンツであることを表します。
ページサイズ
ここまではページ構成について記載しましたが、最期に補足としてページサイズについて記載します。
最近はディスクトップの画面も解像度の性能が上がりました。以前からブログを作成している方はおそらく画面サイズが狭くなって記事に圧迫感があるかもしれません。
今回私が対応したページの横幅は1280pxとしています。メインとサイドバーは900pxと380pxとしています。
なお、スマホは360pxで検討していましたが、googleのモバイルフレンドリーの評価が480pxだった為スマホは480pxをベースにしています。
まとめ
今回はページ構成について投稿しました。
amp対応では構成が重要な部分になります。今回は「microdata」形式ですが、Googleは「JSON-LD」形式を推奨しています。
次回はそれぞれの構成の内容について投稿します。
