HOME > コラム > SEO対策 > GoogleとTwitterが連携して策定しているプロジェクト、AMP(Accelerated Mobile Pages) HTML

GoogleとTwitterが連携して策定しているプロジェクト、AMP(Accelerated Mobile Pages) HTML

コラム

この記事・・・一度記事を書いてから、公開しようか全消ししようか迷いました。
昨年末から出てきたお話で、2016年2月中旬過ぎくらいから加速的に出てきたお話・・・AMP(Accelerated Mobile Pages) HTML!!!
何といいますか、、、ガラケーサイトをつくった時のような戸惑いを感じていると言いますか、実用性のあり方や利便性などなかなか実感しづらい領域のお話なのかなと。
そしてAMP HTMLそのものはまだまだ発展するでしょうが、今の段階ではまだ仕様の変更がバリバリ出てきそうなそんな予感が隠しきれず、対応するにはまだ早いので、この記事自体の完成度が低くなるかな?と思った次第でした。
あと理解不足もあり・・・ということで、この記事では今まで触れたことがないことに触れる時のポイントを紹介できればと思っています(笑)
HTMLやCSSやPHPなど、これから初挑戦の人は何から手をつけていいか分からないと思います。
この記事では、そのあたりのポイントにも触れたいと思いますので、参考になればと思う次第です。
「ちょっとは役に立ったかな?」や「ちょっと面白いな(笑)」みたいなことを感じられましたら、シェアして頂けますと幸いです。

SEO対策に投稿したコラム記事

GoogleとTwitterが連携して策定しているプロジェクト、AMP(Accelerated Mobile Pages) HTML

Accelerated Mobile Pages Projectイメージ
初めに・・・

この記事を書いているのは、2016年2月27日(土)~28日(日)です。
(配布テンプレートも同時に書きました。)
この時、AMP HTML本家のページのリファレンスとGit Hubを見ながら作業をしてました。

(よくあることと言えばそれまでですが)本家のフレームワークを使っても、バリデーションチェック(記述内容のエラーチェック)では、エラーが出ました。
ということで、バリデーションツールに従った記述にしているため、本家サイトに書かれている内容とは若干異なる部分があります。
そんな時はGit Hubと併せてご確認下さい。

文末にバリデーションツールの紹介もしていますので、その時々に併せてチェックして記述内容のエラーをご確認下さい。
現時点ではバリデーションツールでエラーが出ない記述でテンプレートを配布しています。
弊社でも常々情報をチェックしていまして重大なエラーや仕様の変更などなどがあった場合は随時アップデートする予定でいていますが、100%の対応を取ることが出来るか分かりかねます。

ということで、ご容赦下さいますよう、宜しくお願い致します。

AMP(Accelerated Mobile Pages) HTMLとは?
AMPの概要

AMPとは、Accelerated Mobile Pagesの略でして、GoogleとTwitterが連携してモバイル(主にスマホ)端末でのページ表示を高速化するためのプロジェクト名です。
そして、そのためにHTMLルールを策定しているというところです。

GoogleとTwitterが連携しているというのは、GoogleとTwitterが策定しているAMP HTMLルールに従ったページを公開することで、AMP HTMLルールに従ったページをGoogleとTwitterのサーバーがキャッシュしてくれ、彼らのサーバーでページを表示してくれるという流れです。
AMPルールに従ってるページがあるサイトは、Googleの検索結果ページ、Twitterのタイムライン上でリンクが張られたりすると、上手くキャッシュしてもらえるようです。

AMP(Accelerated Mobile Pages)表示のサンプル

デモについては以下のURLでして、スマホ端末でアクセスして頂くと確認することが出来ます。

Accelerated Mobile Pages Project 本家サイト

本家サイトに色々なハウトゥー的なことが書かれており、辞書的なことはGit Hubにアップされているという、そんな感じです。

ダウンロードと組み込みサンプル
サンプルAMPファイルのダウンロード

ということで、早速テンプレートに組み込んでみましたので、ダウンロードしてお使い下さい。

phptemp_amp_160227.zip
組み込み済みサンプル

通常版とAMP版です。

元々のファイル名の拡張子前に”_amp”をつけています。

元になるWEBサイトテンプレート(PHP)について

当サイト内の「SEOの基礎知識」の中のコンテンツです。

組み込み手順
組み込み手順について

組み込み手順は省くことに致しました。
単純にページを増やし、ソースを書き換えるだけですので、組み込み手順と言うよりは導入に際してのポイントや記述ルールを書いていこうと思います。

ルール
前提的なルール
  • JavaScriptは必要最低限のモノを除いて利用出来ない。
    必要最低限のコンポーネント(ルール)はフレームを用意してるのでそのフレームを使ってね。
  • CSSは外部から読み込めない。
    全部インラインで1枚の表示させるファイルに書き込んでね。
  • imgやembedやiframeなどは、htmlタグとはちょっと違うタグを用意したので、それを使ってね。
  • モバイル用でなお且つGoogleやTwitterのサーバーを利用して表示するので、PCからの閲覧は基本的に無視してもOK!
  • 元のデータになるページにはメタタグで”rel="amphtml"”を使ってamphtmlページを指定して、amphtmlページでは”rel="canonical"”で元データのページを指定してね。

凡そ、こんな感じで記述ルールがあるようです。
ですので、サンプルファイルではそれらを守った感じにしました。

PCからの閲覧を無視してもいいのかどうかは分かりませんが、基本的にモバイルに対して色々考慮している感じですので、それ以上でもなければそれ以下でもないというところです。

まずは本家に記述されているフレーム記述から
<!doctype html>
<html amp lang="ja">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
	"@context": "http://schema.org",
	"@type": "NewsArticle",
	"headline": "Open-source framework for publishing content",
	"datePublished": "2015-10-07T12:02:41Z",
	"image": [ "logo.jpg" ]
}
</script>
<style amp-boilerplate>
body {
	-webkit-animation: -amp-start 8s steps(1,end) 0s 1 normal both;
	-moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;
	-ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;
	animation: -amp-start 8s steps(1,end) 0s 1 normal both;
}
@-webkit-keyframes -amp-start { from { visibility: hidden } to { visibility: visible }}
@-moz-keyframes -amp-start { from { visibility: hidden } to { visibility: visible }}
@-ms-keyframes -amp-start { from { visibility: hidden } to { visibility: visible }}
@-o-keyframes -amp-start { from { visibility: hidden } to { visibility: visible }}
@keyframes -amp-start { from { visibility: hidden } to { visibility: visible }}
</style>
<noscript>
<style amp-boilerplate>
body {
	-webkit-animation: none;
	-moz-animation: none;
	-ms-animation: none;
	animation: none;
}
</style>
</noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>

上記の記述について、若干の補正をしました。
languageはenからjaに修正しています。

imgタグやiframeはこちらの用意したタグを使ってねという件
<!-- 通常記述 -->
<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>

<!-- レスポンシブ記述 -->
<amp-img src="responsive.jpg" width="527" height="193" layout="responsive"></amp-img>

<!-- Fix固定記述 -->
<amp-img id="img1" src="fixed.jpg" width="264" height="96"></amp-img>

<!-- 表示しない -->
<amp-img id="img2" src="hidden.jpg" width="527" height="193" layout="nodisplay"></amp-img>

幾通りか記述がありますので、その時々に併せて使ってください。
あと、サイズは縦も横もかならず指定して下さい。

iframeについては、今回は利用していないので参考ページをご確認下さい。
すぐに使えるような感じです。

CSS記述の件
<style amp-custom>
body {
	background-color: white;
}
amp-img {
	background-color: gray;
	border: 1px solid black;
}
</style>

<amp-img
	media="(min-width: 650px)"
	src="wide.jpg"
	width="466"
	height="355"
	layout="responsive"
>
</amp-img>

<amp-img
	media="(max-width: 649px)"
	src="narrow.jpg"
	width="527"
	height="193"
	layout="responsive"
>
</amp-img>

<amp-img
	src="wide.jpg"
	srcset="wide.jpg" 640w, "narrow.jpg" 320w
>
</amp-img>

<amp-img
	src="wide.jpg"
	srcset="wide.jpg" 640w, "narrow.jpg" 320w
	sizes="(min-width: 650px) 50vw, 100vw"
>
</amp-img>

今回、テンプレートに組み込んだ内容で本家サイトで解説されてたのは、こんな感じでしょうか。
あとは、Git Hubでも見ながら細かい内容を見て発展・拡張して頂ければと思います。

因みにですが、本家サイトの内容を使いやすい状態に書き換えています。
単純なHTMLに近い状態を目指した感じですので、あとは全部調整次第という感じです。

メタタグでそれぞれのページを指定してねという件

元ページとamphtmlページはそれぞれのページのメタタグでそれぞれのページを明示しなければいけません。

<link rel="amphtml" href="/column/seo/160227/01/index_amp.php" />
<link rel="canonical" href="/column/seo/160227/01/" />
書き終わったらデバッガーでチェックをしましょう

Google chromeで記述内容の確認が出来ます。
Google chromeを立ち上げ、「F12」でデベロッパーツールを立ち上げ、ページのURLの末尾に「#development=1」を入れてページを開いてください。

一通り作業をして思ったことや感じたことや考えたこと

作業をしてた時に色々考えたことをメモ代わりに書いておこうと思います。

  • imgタグは廃止されていて使えないので、CSSの記述からもimgタグに関する装飾を削除しました。
    その代わりimgタグに変わり、amp-imgタグを使っています。
    その中にサイズの大きい画像を使う時は”layout="responsive"”を入れ、レスポンシブにする必要のない画像(フッターのバナー画像のようなサイズの画像)には何も入れていません。
  • AMP HTMLはヘッドライン的な意味合いの強いページなのかな?と思いました。
    海外の大手メディアが導入してたり、海外SEOブログ様が導入しているようですが、主要部分のみを表示しているという仕様です。
    今回テンプレートでAMPを組みましたが、全ページ回遊することを前提としています。
    お問い合わせフォームなど動的なページはありませんので、AMP版はAMP版ページをリンクしていますし、表示も通常版とは大きく異なりません。
    このあたりの仕様や設計理念的なことは分かりませんでしたので、今後の展開次第では修正することになるかもしれません。
  • 細かい導入手順を書き出すと、かなりのボリュームになりそうでしたので、手順は省かせて頂きました。
    詳細についてはサンプルページを見ながら中に入っているファイルなどをご確認下さい。
  • インターフェイス表示に関するファイル全てを新しく作成したので、運用の負担は結構大きくなりそうな感じがします。
    単純にページを増やしているということもありますが、今後の展開がまだ可視化されたわけではないので不安が残るところです。
    しかし、各種AMP導入済みページのように主要部分のみを表示するという理念があるのならば、そこまで苦労はしなさそうな感じはしています。
    何にせよ、この先の展開が楽しみな感じです。
  • Googleの検索エンジン上で、AMP HTMLが優先的に表示されるというのは、聊か問題を感じてたりします(笑)
    (先述のとおりですが、)インターフェイス上で主要部分のみの表示を旨としているならば、”見たい情報”をスマホで探しきるというのは不可能でしょう(笑)
    何せ、表示部分が簡潔すぎてUIに対する考慮はあってないようなモノです。
    極端な話かもしれませんが、それならばAMP HTMLじゃなく、単純なhtmlでページを組んでしまうだけでAMPの必要性がなくなってしまうことになるからです。
    日本のGoogleでどこまで対応されるのかは分からないのであまり大きなことは言えませんが、そんなことを思いました。
    ただ、通常ページとAMPの組み合わせで速報が出来るというのであればだいぶと意味は変わります。
    AMPの中には”dateModified”なるモノもあるようです。
    データの新旧の見分けはついてしまうと思います。
    単純にAMPページを入口的な扱いにするならばまだ分かるんですが、それだと普通の静的なコーポレートサイトへの導入のメリットなど考えてしまいます。
    打算ばかり考えても仕方ありませんが、そんなことを考えてしまいました。
  • 細かい仕様はこれからまだまだ発展、拡張しそうな予感がバリバリします。
その他、補足

WEBサイトテンプレート(PHP)の修正にあたって、以下の点に配慮しています。

  • 今回、サンプルにしたWEBサイトテンプレート(PHP)は「 phptemp_160202.zip 」です。
まとめ

今回のAMP HTMLの内容は初心者の方には難しい内容になってしまったかもしれません。
細かいことが多く、このページには収まりきらないくらいのことがあったような気がします。
全ての仕様を書き出すことが目的ではないので、重要だと思った部分だけを簡潔に書き出してみた感じです。

最近の新しいマークアップはだいぶとHTML5がベースとなっているような感じがします。
当サイトで配布しているテンプレートはxhtml 1.0 strictで記述しています。
マークアップの内容がSEOに直接的な影響を持っているとはなかなか思えないということで、特に着手してない感じですが、技術のベースがHTML5になるというのであれば色々考えなきゃいけないかな?と思えます。

しかし、AMP HTMLは検索エンジンからの誘導を考えるとなかなか外せない感じがしますので、当サイトのコラム記事ページではAMP HTMLを導入しようか考えています。
どこを残してどこの部分を削除しなければいけないのかをきっちり見極める必要がありそうなのでまだ設計段階ですが、気持ちは導入で固まっています(笑)

ということで、これからも何かしら展開があった時は情報をアップデートしていきたいと思う今日この頃です。

執筆 : 清水 隼斗

GoogleとTwitterが連携して策定しているプロジェクト、AMP(Accelerated Mobile Pages) HTMLのAMPページ

編集後追記

簡単WEBサイトテンプレート(PHP)をアップデートしました。
以下のページから、アップデートファイルをアップしているページにアクセスしてください。

Facebookコメント

他のカテゴリ記事は下記からお選び下さい。
SEO対策に関する記事を投稿するカテゴリです。とにかく、SEO対策のことのみを記事にしようと思います。弊社の本業です(笑)
インターネットやWEBに関する総合情報に関する記事を投稿するカテゴリです。技術的なことでも出来るだけ分かりやすくしていこうと思います。
社内での出来事やランチのことなど、小さなことから大きなことまでを投稿するカテゴリです。少人数なのでネタは限られてますが面白可笑しくいきます!
その他、上記に当てはまらないことは全てこのカテゴリに投稿します。弊社の歴史・・・というわけではありませんが、後になって懐かしむことが出来る記事を投稿します。
株式会社SEMラボラトリー
TEL : 06-4394-8427
MAIL : info@oosaka-web.jp
PAGE TOP