はじめに
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 などは使用不可
- アドセンスは専用記述にする必要がある
2. 当テーマ仕様
AMP 対応するプラグインもありますが、デザイン性に乏しく見た目が同じサイトばかりになりますので、当テーマ特長の 様々なデザインや色の設定ができること を可能な限り AMP ページでも反映させてデザイン的な差別化ができるようにしています。
( 1 ) 対応できるページとその URL
- 個別記事・固定ページ
- URL は末尾に [ ?amp=1 ] がつきます
( 2 ) 表示されるもの
AMP 対応ルールに従うために表示するものを制限しています。 スタイルシート 50 KB 以内・JavaScript 設定不可 をクリアするための制限ですので予めご了承ください。
- ヘッダー
- ヘッダー左側フリースペース
- メニューボタン ( グローバルメニュー )
- 記事タイトル・記事本文
- パン屑リスト・記事を読む時間・アイキャッチ画像
- SNS ボタン # 1 のみ・シェアメッセージ・SNS フリースペース
- 関連記事
- コメントフォームへの誘導リンク
- 前後記事ページナビ
- フッターメニュー
- フッター
- トツプ・ホームへのボタン
- AMP ページ専用のフリースペース
- 上記以外のもの ( サイドバーなど ) は表示されません
- 関連記事・前後記事ナビ・ブログカードのサムネイル画像は、投稿の編集ページで設定した [ アイキャッチ画像 ] のみ表示されます。記事の最初の画像は表示されません
( 3 ) 管理画面の設定が反映しないもの
- 【 表示制御 】 関連記事 ul リストデザインを変更する
- 【 表示制御 】 関連記事 レアウト変更
- 【 表示制御 】 関連記事 サムネイル画像サイズ
- 【 フリースペース 】 ヘッダー左側 以外のフリースペース
- 【 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 ページ用の別プロパティを新たに作成することが推奨されています。自分のお好みで設定してください。
■AMP ページ用の別プロパティで計測するとき
次で設定してください。
新規設定や変更後は必ず [ 保存して公開 ] をしてください。
- 管理画面 外観 ＞ カスタマイズ ＞ AMP
- 項 目 AMP 用 Google アナリティクス
- 作 業 チェック・入力する
チェックする
設定するをチェックしてください。
トラッキング ID
別プロパティのトラッキング ID を入力してください。
■通常ページと一緒に計測するとき
上記の設定は不要ですが、通常ページの Google Analytics の設定は必要です。
( 4 ) AMP 専用スクリプト
記事内に 対応しているコンポーネント の記述があるときは自動で AMP 専用スクリプトが設定されます。それ以外のものを記述するときは個別に AMP 専用スクリプトを設定してください。
参考サイト： AMPで利用できるコンポーネントの使い方
■全体の設定
次で設定してください。
新規設定や変更後は必ず [ 保存して公開 ] をしてください。
- 管理画面 外観 ＞ カスタマイズ ＞ AMP
- 項 目 AMP スクリプト
- 作 業 ソースを入力する
■記事別の設定
次で設定してください。
- 管理画面 投稿・固定ページの編集
- 項 目 AMP
- 作 業 AMP スクリプトを入力する
( 5 ) フリースペース
■全体の設定
次で設定してください。
新規設定や変更後は必ず [ 保存して公開 ] をしてください。
- 管理画面 外観 ＞ カスタマイズ ＞ AMP
- 項 目 フリースペース
- 作 業 チェック・入力する
次の 5 ヶ所に設定できます
- 記事内上部
- 記事内下部
- 記事下
- ヘッダー下
- フッター上
設定方法
チェックする
表示するをチェックしてください。
コンテンツを入力
文章・画像・広告ソースを入力してください。
■記事別の設定
次で設定してください。
- 管理画面 投稿・固定ページの編集
- 項 目 AMP
- 作 業 チェック・入力する
フリースペースを非表示
非表示にするフリースペースをチェックしてください。
広告ソース
記事内下部の場所に表示されます。文章・画像・広告ソースを入力してください。
( 6 ) CSS 追加
CSS は デフォルト時で約 7 KB ( 半角 7,000 文字 ) の余裕がありますので、ご自身で追加できます。
■全体の設定
次で設定してください。
新規設定や変更後は必ず [ 保存 ] をしてください。
- 管理画面 外観 ＞ その他オプション
- 項 目 AMP ページ用 CSS
- 作 業 CSS を入力する
■記事別の設定
次で設定してください。
- 管理画面 投稿・固定ページの編集
- 項 目 AMP
- 作 業 CSS に入力する
4. 記事の修正
( 1 ) 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 属性の記述
テキスト
WordPress のエディタボタンの多くは style 属性でエラーになります。
当テーマではエディタボタンと同様のものを 記事装飾パーツ で class 属性でご用意しています。 AMP ページでも反映させたいものは記述を変更してください。
5. AMP 用記述の作り方
( 1 ) Google AdSense
詳しくは AdSense ヘルプを参照ください。
■レスポンシブ用
事前準備
レスポンシブ広告ユニットを作成してコードから次の情報をメモしてください。
- サイト運営者 ID ( data-ad-client ) [ 例 ] ca-pub-1234567891234567
- 広告ユニット ID ( data-ad-slot ) [ 例 ] 1234567890
AMP 広告コードの作成
サイト運営者 ID・広告ユニット ID を自分のものに変更してください。
スクロールしなければ見えない位置のときの広告コード
スクロールせずに見える範囲のとき は違うコードになります。 詳しくは AdSense ヘルプを参照ください。
AMP 広告コードを配置する
記事内に直接記述または フリースペース に入力してください。 広告用の AMP 専用スクリプトは自動設定されます。
( 2 ) カエレバ：商品紹介用ブログパーツ
カエレバは商品紹介用ブログパーツを提供している無料サービスです。
カエレバ：http://kaereba.com/
ASP 提供の商品リンクは次の理由で使いづらい現状です。
- Amazon ： iframe は一部表示されない。画像のみはエラーになる
- 楽天市場 ： 画像が表示されない
カエレバを利用するときは次のようにしてください。
デザイン
デザインは amazlet風-2(cssカスタマイズ用) を利用ください。 それ以外は style 属性記述があるため追加 CSS は反映しません。
追加 CSS
通常ページ・AMP ページとも追加 CSS を入力してください。
無駄なものを省いて圧縮済みです( 約 1,854 文字 )
.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{margin-right:20px}
.kaerebalink-info,.booklink-info{flex:1}
.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:0 0 5px}}
CSS 追加方法
次で設定してください。
新規設定や変更後は必ず [ 保存 ] をしてください。
- 管理画面 外観 ＞ その他オプション
- 項 目 通常ページ用 CSS ・ AMP ページ用 CSS
- 作 業 CSS を入力する
6. AMPページの確認・エラーチェック
WordPress にログインしているときは記事上部に 2 つのリンクが表示されます。 閲覧者には表示されませんのでご安心ください。
AMP ページ確認
AMP ページのイメージを見ることができます。
PC で見ていますのでスマホで見たときとは違い、アドセンスなど一部表示されないもの・コンテンツの上下に余白が空くものがあります。実際のページはスマホで確認してください。
AMP エラーチェック
Google 提供の AMP テストサイトが開きます。
記事の修正に役立ててください。
サポートやご質問の際は
表示したいコンテンツ ( エラーになる場合も含め ) の詳細と記事ページのURLをお知らせください。その情報が無いときはサポートをお受けできません。