AMP 対応 ( ベータ版 )

はじめに

AMP 対応の初期段階では【エラーが出るのは当然のこと】とお考えください。

AMP 対応には多くの制限があり少しでもルールから外れるとエラーになります。
エラーになっても検索時にマークが表示されないだけで SEO 的なマイナスは無いと一般的には言われています。

また、AMP 対応することで次のようなことが想定されます。

style 属性記述が反映しないためデザインが変わる箇所が出てくる
コンテンツ ( iframe など ) によっては一部が切れて表示されるものが出てくる
記述によっては [ AMP ページでの表示を諦めるコンテンツ ] が出てくる

完全自動でエラー無しの AMP 対応はほぼ不可能です。
広告など HTML ソースの内容が理解できるスキルとご自身での記事修正作業が必要です。
AMP や HTML がよく分からないユーザー様は無理して設定しないことをお勧めします。

サポートやご質問の際は

表示したいコンテンツ ( エラーになる場合も含め ) の詳細と記事ページのURLをお知らせください。その情報が無いときはサポートをお受けできません。

1. AMPとは

AMP( Accelerated Mobile Pages )とは、Google と Twitter で共同開発されているモバイル端末でウェブページを高速表示するためのプロジェクトのことです。

AMP 対応するには多くの制限があり、その一部には、次の制限があります。

HTML は利用できるタグの制限がある
JavaScript は設定不可 ( AMP 専用スクリプトのみ設定可能 )
CSS ( スタイルシート) は 50 KB 以内
style 属性や !important などは使用不可
アドセンスは専用記述にする必要がある

AMP の詳細は次のサイト様を参考にしてください。

AMPページのGoogle検索ガイドライン

AMPとは？今から導入するための基礎知識と手順書マニュアル

2. 当テーマ仕様

AMP 対応するプラグインもありますが、デザイン性に乏しく見た目が同じサイトばかりになりますので、当テーマ特長の 様々なデザインや色の設定ができること を可能な限り AMP ページでも反映させてデザイン的な差別化ができるようにしています。

( 1 ) 対応できるページとその URL

個別記事・固定ページ
URL は末尾に [　?amp=1　] がつきます

( 2 ) 表示されるもの

AMP 対応ルールに従うために表示するものを制限しています。
スタイルシート 50 KB 以内・JavaScript 設定不可 をクリアするための制限ですので予めご了承ください。

ヘッダー
ヘッダー左側フリースペース
メニューボタン ( グローバルメニュー )
記事タイトル・記事本文
パン屑リスト・記事を読む時間・アイキャッチ画像
SNS ボタン # 1 のみ・シェアメッセージ・SNS フリースペース
関連記事
コメントフォームへの誘導リンク
前後記事ナビ
フッターメニュー
フッター
トツプ・ホームへのボタン
AMP ページ専用のフリースペース
CTA コンテンツ

上記以外のもの ( サイドバーなど ) は表示されません
関連記事・前後記事ナビ・ブログカードのサムネイル画像は記事の最初の画像も表示されます

( 3 ) 管理画面の設定が反映しないもの

【フリースペース】ヘッダー左側以外のフリースペース
【 SNS・OGP 】ボタンプラン# 2 ～ 7　どれを選択してもプラン # 1 で表示

( 4 ) 対応しているコンポーネント

次のコンポーネントの記述を AMP 用に自動的に置換します。
コンポーネントを記述するために必要な AMP 専用スクリプトも自動設定します。

YouTube
Twitter ツイート埋め込みコード
Instagram 埋め込みコード
Facebook 埋め込み投稿( <div class="fb-post" で始まるコード )
Facebook 埋め込み動画( <div class="fb-video" で始まるコード )
Vine
Google Analytics
iframe ( width 属性 / height 属性の記述が無いソースは不可 )

iframe は width 属性 / height 属性の記述があってもコンテンツの一部が切れて表示される場合があります。

3. AMP設定方法

AMP 対応には AMP と 構造化データマークアップ の有効化が必須です。

( 1 ) AMPの有効化

■全体の設定

次で設定してください。
新規設定や変更後は必ず [ 保存して公開 ] をしてください。

外観＞カスタマイズ＞ AMP
AMP を有効化
チェックする

■記事別の設定

記事別に AMP を有効化しない を設定できます。

投稿・固定ページの編集
AMP
AMP を有効化しないをチェックする

( 2 ) 構造化データマークアップの有効化

次を参照して有効化してください。

→　構造化データマークアップ設定

( 3 ) Google Analytics

通常ページと AMP ページを分けて別々に計測するために AMP ページ用の別プロパティを新たに作成することが推奨されています。自分のお好みで設定してください。

参考サイト： Google アナリティクスプロパティの追加/設定/削除

■AMP ページ用の別プロパティで計測するとき

次で設定してください。

新規設定や変更後は必ず [ 保存して公開 ] をしてください。

外観＞カスタマイズ＞ AMP
Google Analytics
チェック・入力する

チェックする

設定するをチェックしてください。

トラッキング ID

別プロパティのトラッキング ID を入力してください。

■通常ページと一緒に計測するとき

上記の設定は不要ですが、通常ページの Google Analytics の設定は必要です。

→　 Google Analytics 設定方法

( 4 ) AMP 専用スクリプト

記事内に対応しているコンポーネントの記述があるときは自動で AMP 専用スクリプトが設定されます。それ以外のものを記述するときは個別に AMP 専用スクリプトを設定してください。

参考サイト： AMPで利用できるコンポーネントの使い方

■全体の設定

次で設定してください。
新規設定や変更後は必ず [ 保存して公開 ] をしてください。

外観＞カスタマイズ＞ AMP
スクリプト
チェック・入力する

チェックする

設定するをチェックしてください。

ソースを入力

ソースを入力してください。

■記事別の設定

次で設定してください。

投稿・固定ページの編集
AMP
AMP スクリプトを入力する

( 5 ) フリースペース

■全体の設定

次で設定してください。
新規設定や変更後は必ず [ 保存して公開 ] をしてください。

外観＞カスタマイズ＞ AMP
フリースペース
チェック・入力する

次の 5 ヶ所に設定できます

記事内上部
記事内下部
記事下
ヘッダー下
フッター上

設定方法

チェックする

設定するフリースペースをチェックしてください。

コンテンツを入力

文章・画像・広告ソースを入力してください。

■記事別の設定

次で設定してください。

投稿・固定ページの編集
AMP
チェック・入力する

フリースペースを非表示

非表示にするフリースペースをチェックしてください。

広告ソース

記事内下部の場所に表示されます。文章・画像・広告ソースを入力してください。

目次フリースペース

次を参照ください　→　目次コンテンツ

( 6 ) CSS 追加

CSS は デフォルト時で約 5 KB ( 半角 5,000 文字 ) の余裕がありますので、ご自身で追加できます。

■全体の設定

次で設定してください。
新規設定や変更後は必ず [ 保存 ] をしてください。

外観＞その他オプション
AMP ページ用 CSS
CSS を入力する

カスタマイズが多いときは [ 子テーマ ] の利用をお勧めします

子テーマの [ theme_amp_style_child.php ] に CSS を入力してください

→ 子テーマの詳細説明

■記事別の設定

次で設定してください。

投稿・固定ページの編集
AMP
CSS に入力する

4. 記事の修正

( 1 ) AMP ページでコンテンツの [ 表示・非表示 ] を区分する

コンテンツの 表示・非表示 を区分する ショートコード を設定しています。
次を入力 ( 半角英数 ) してください。

AMP ページで表示

[amp]
コンテンツ内容
[/amp]

[amp]

コンテンツ内容

[/amp]

AMP ページで非表示

[!amp]
コンテンツ内容
[/!amp]

[!amp]

コンテンツ内容

[/!amp]

ボタン登録もしています。

新エディタ：クラシックブロック：ビジュアル [ スタイル 2 ＞表示制御 ] から選択
旧エディタ：ビジュアル [ スタイル 2 ＞表示制御 ] から選択
旧エディタ：テキスト　 [ AMP 表示 ] [ AMP 非表示 ]

( 2 ) AMP ページで非表示にするコンテンツ

次のようなコンテンツは AMP ページで非表示にすることをお勧めします。

WordPress 本体機能の Embed

URL を記述するだけでブログカード形式で表示する WordPress 本体機能です。
この記述があると Embed の iframe が読み込み状態のままになります。

Embedの説明サイト： oEmbed - WordPress Codex 日本語版

JavaScript の広告

例えばインフォトップには JavaScript の広告があります。
AMP ページでは JavaScript が無効で単なるリンクになり報酬が発生しなくなります。

width 属性 / height 属性の記述が無い iframe・画像・広告ソース

width 属性 / height 属性の記述は必須のため無いとエラーになります。

( 3 ) style 属性の修正

style 属性 の記述はエラーになるため当テーマの機能で自動削除されて反映しません。
反映させたいものは CSS を組んで class 属性 で書く必要があります。

[ 例 ] style 属性の記述

<div style="text-align: center">テキスト</div>

1	<div style="text-align: center">テキスト</div>

WordPress のエディタボタンの多くは style 属性でエラーになります。
当テーマではエディタボタンと同様のものを記事装飾パーツで class 属性でご用意しています。
AMP ページでも反映させたいものは記述を変更してください。

5. AMP 用記述の作り方

( 1 ) Google AdSense

詳しくは AdSense ヘルプを参照ください。

→　AMP 対応広告ユニットの作成方法

■レスポンシブ用

事前準備

レスポンシブ広告ユニットを作成してコードから次の情報をメモしてください。

サイト運営者 ID ( data-ad-client )　[ 例 ] ca-pub-1234567891234567
広告ユニット ID ( data-ad-slot )　　[ 例 ] 1234567890

AMP 広告コードの作成

サイト運営者 ID・広告ユニット ID を自分のものに変更してください。

スクロールしなければ見えない位置のときの広告コード

<div class="none-meta center">スポンサーリンク</div>
<amp-ad
layout="responsive"
width=300
height=250
type="adsense"
data-ad-client="ca-pub-000000000000"
data-ad-slot="000000000">
</amp-ad>

<div class="none-meta center">スポンサーリンク</div>

<amp-ad

layout="responsive"

width=300

height=250

type="adsense"

data-ad-client="ca-pub-000000000000"

data-ad-slot="000000000">

</amp-ad>

スクロールせずに見える範囲のとき は違うコードになります。
詳しくは AdSense ヘルプを参照ください。

→　AMP 対応広告ユニットの作成方法

AMP 広告コードを配置する

記事内に直接記述またはフリースペースに入力してください。
広告用の AMP 専用スクリプトは自動設定されます。

( 2 ) カエレバ：商品紹介用ブログパーツ

カエレバは商品紹介用ブログパーツを提供している無料サービスです。

カエレバ：http://kaereba.com/

ASP 提供の商品リンクは次の理由で使いづらい現状です。

Amazon ： iframe は一部表示されない。画像のみはエラーになる
楽天市場：画像が表示されない

カエレバを利用するときは次のようにしてください。

デザイン

デザインは amazlet風-2(cssカスタマイズ用) を利用ください。
それ以外は style 属性記述があるため追加 CSS は反映しません。

追加 CSS

通常ページ・AMP ページとも追加 CSS を入力してください。

2019/12/23 更新
無駄なものを省いて圧縮済みです( 約 1,874 文字 )

.cstmreba{margin:5px 0;padding:20px;border:1px solid #d9d9d9;border-radius:6px;word-break:break-all;font-size:14px}
.kaerebalink-box,.booklink-box{display:flex}
.kaerebalink-image,.booklink-image{min-width:100px;margin-right:20px}
.kaerebalink-info,.booklink-info{width:100%}
.kaerebalink-name,.booklink-name{font-weight:700}
.kaerebalink-powered-date,.kaerebalink-detail,.booklink-powered-date,.booklink-detail{margin:10px 0;font-weight:400;font-size:8px}
.kaerebalink-link1,.booklink-link2{display:flex;flex-wrap:wrap;margin:0 -2px}
[class^="shoplink"]{width:calc(100%/3 - 4px);margin:2px}
[class^="shoplink"] a{display:block;padding:10px;border-radius:4px;text-decoration:none;text-align:center}
[class^="shoplink"] a:hover{color:#fff}
.shoplinkrakuten a{border:solid 1px #bf0000;color:#bf0000}.shoplinkrakuten a:hover{background:#bf0000}
.shoplinkamazon a{border:solid 1px #146eb4;color:#146eb4}.shoplinkamazon a:hover{background:#146eb4}
.shoplinkyahoo a{border:solid 1px #ff0033;color:#ff0033}.shoplinkyahoo a:hover{background:#ff0033}
.shoplinkseven a{border:solid 1px #009a44;color:#009a44}.shoplinkseven a:hover{background:#009a44}
.shoplinkwowma a{border:solid 1px #eb5505;color:#eb5505}.shoplinkwowma a:hover{background:#eb5505}
.shoplinkkakakucom a{border:solid 1px #051d93;color:#051d93}.shoplinkkakakucom a:hover{background:#051d93}
.shoplinkrakukobo a{border:solid 1px #bf0000;color:#bf0000}.shoplinkrakukobo a:hover{background:#bf0000}
.shoplinkkindle a{border:solid 1px #ff9900;color:#ff9900}.shoplinkkindle a:hover{background:#ff9900}
.shoplinkebj a{border:solid 1px #f8485e;color:#f8485e}.shoplinkebj a:hover{background:#f8485e}
.shoplinktoshokan a{border:solid 1px #2cb6e9;color:#2cb6e9}.shoplinktoshokan a:hover{background:#2cb6e9}
@media screen and (max-width:666px){.kaerebalink-link1,.booklink-link2{display:block;margin:0}[class^="shoplink"]{width:auto;margin:5px 0 0}}

.cstmreba{margin:5px 0;padding:20px;border:1px solid #d9d9d9;border-radius:6px;word-break:break-all;font-size:14px}

.kaerebalink-box,.booklink-box{display:flex}

.kaerebalink-image,.booklink-image{min-width:100px;margin-right:20px}

.kaerebalink-info,.booklink-info{width:100%}

.kaerebalink-name,.booklink-name{font-weight:700}

.kaerebalink-powered-date,.kaerebalink-detail,.booklink-powered-date,.booklink-detail{margin:10px 0;font-weight:400;font-size:8px}

.kaerebalink-link1,.booklink-link2{display:flex;flex-wrap:wrap;margin:0 -2px}

[class^="shoplink"]{width:calc(100%/3 - 4px);margin:2px}

[class^="shoplink"] a{display:block;padding:10px;border-radius:4px;text-decoration:none;text-align:center}

[class^="shoplink"] a:hover{color:#fff}

.shoplinkrakuten a{border:solid 1px #bf0000;color:#bf0000}.shoplinkrakuten a:hover{background:#bf0000}

.shoplinkamazon a{border:solid 1px #146eb4;color:#146eb4}.shoplinkamazon a:hover{background:#146eb4}

.shoplinkyahoo a{border:solid 1px #ff0033;color:#ff0033}.shoplinkyahoo a:hover{background:#ff0033}

.shoplinkseven a{border:solid 1px #009a44;color:#009a44}.shoplinkseven a:hover{background:#009a44}

.shoplinkwowma a{border:solid 1px #eb5505;color:#eb5505}.shoplinkwowma a:hover{background:#eb5505}

.shoplinkkakakucom a{border:solid 1px #051d93;color:#051d93}.shoplinkkakakucom a:hover{background:#051d93}

.shoplinkrakukobo a{border:solid 1px #bf0000;color:#bf0000}.shoplinkrakukobo a:hover{background:#bf0000}

.shoplinkkindle a{border:solid 1px #ff9900;color:#ff9900}.shoplinkkindle a:hover{background:#ff9900}

.shoplinkebj a{border:solid 1px #f8485e;color:#f8485e}.shoplinkebj a:hover{background:#f8485e}

.shoplinktoshokan a{border:solid 1px #2cb6e9;color:#2cb6e9}.shoplinktoshokan a:hover{background:#2cb6e9}

@media screen and (max-width:666px){.kaerebalink-link1,.booklink-link2{display:block;margin:0}[class^="shoplink"]{width:auto;margin:5px 0 0}}

CSS 追加方法

次で設定してください。

新規設定や変更後は必ず [ 保存 ] をしてください。

外観＞その他オプション
通常ページ用 CSS ・ AMP ページ用 CSS
CSS を入力する

6. AMPページの確認・エラーチェック

WordPress にログインしているときは、サイト左側中央に、それぞれのボタンが表示されます。
閲覧者には表示されませんのでご安心ください。

AMP ページ確認

AMP ページのイメージを見ることができます。

PC で見ていますのでスマホで見たときとは違い、アドセンスなど一部表示されないもの・コンテンツの上下に余白が空くものがあります。実際のページはスマホで確認してください。

AMP エラーチェック

Google 提供の AMP テストサイトが開きます。

記事の修正に役立ててください。

サポートやご質問の際は

内部SEO対策