>> リニューアルや機能停止など 当サイトのお知らせはこちら →
PR

CocoonのAMP機能は廃止になりました。(2023/2/5)

簡単!CocoonをAMP化する方法・ロゴやCSSのサイズとエラー時の対処 Cocoon・設定
この記事は約6分で読めます。
     


 

2024年2月5日にサポート終了・機能廃止

2023年12月31日にサポート終了・機能廃止。

実際には2024年2月に公開された Ver.2.7.0 で廃止になりました。

Cocoon 2.7.0公開。ads.txt編集・リファラー設定機能の追加。AMP・PWA・HTML縮小化機能の廃止
Cocoon 2.6.9からの変更点です。 作者がちょっと体調不良でトータル1ヶ月ほど入院してたためアップデートを行えず、その分溜まった変更や修正が多くなりました。 機能追加 ads.txt編集機能の追加 Cocoon設定の「SEO」タブに

 

以下、AMPについてまとめていましたが、

機能廃止となった為、どうしてもAMPを使いたい場合は、

  • プラグインを利用するか
  • テーマ変更になります

プラグイン:AMP

 


 

CocoonはAMPやPWAにも対応していて、簡単に対応できます。

PWAについては以下にまとめています。

CocoonのPWA機能は廃止になりました。(2023/2/5)
2024年2月5日にサポート終了・機能廃止 2023年12月31日にサポート終了・機能廃止。 実際には2024年2月に公開された Ver.2.7.0 で廃止になりました。 以下、PWAについてまとめていましたが、 機能廃止となった為、どうし...

 

AMPの設定方法とAMPページの確認方法、またCSS内容などによりGoogle Search Consoleなどでエラーが出る場合の対処方法についてです。

 

AMPって?

AMP化とは、簡単に言えばモバイル(スマホやタブレット)での高速化対応です。

AMP(Accelerated Mobile Pages)。

モバイル端末でウェブページを高速表示するため、GoogleとTwitterが共同開発をしているプロジェクトで、当然ですが、Googleに推奨されているシステムです。

AMPプロジェクト

 

AMP HTMLというフレームワークはオープンソースとして公開されているので、この仕様に沿ったモバイルサイトを作るとGoogle検索結果やTwitterからリンクを開く時の表示速度がアップします。

AMPの主要素

  • HTML5(AMP HTML)
  • CSS 3(Custom Styling)
  • JavaScript (AMP JS)
  • グローバル プロキシ キャッシュ (AMP Cache)

とにかく高速化に特化している為、JavaScriptの使用に制限があったりCSSで使えないコードがあったりします。

メリット

  • モバイル端末での高速化
  • Twitterからのリンク表示高速化
  • 表示速度が上がると検索順位にも影響あり
  • とりあえずGoogle推奨なので

 

デメリット

特になし

※使用できないコードがあるので、通常のサイトとまったく同じデザインにはできない可能性はあります。

 

AMP化準備

ロゴの準備

AMP用のロゴ(600✖60px以内の画像)を準備します。

サイトロゴが上記サイズ以内であれば、そのまま利用出来ますが、上記のサイズを上回るとエラーになります。

 

AMP用CSS

Cocoonでは、スキンや子テーマのCSSをそのままAMPでも利用する事が出来、見た目もほぼ変わらないページとして表示可能ですが、CSSサイズが大きすぎる場合や、AMPで認められないコード(例:「!important」)が含まれている場合は、AMP用のCSSを個別に設定する事も出来ます。

※後述します。(CSS 「サイズオーバーの場合」の項)

 

AMP設定

Cocoon設定AMPタブ

Cocoon設定

Cocoon設定・AMP

設定項目
  • AMP有効・無効
  • AMPロゴ設定
  • 画像の拡大効果
  • インラインスタイル有効・無効
  • スキンスタイル有効・無効
  • 子テーマのスタイル有効・無効
  • AMP除外カテゴリー指定

 

AMP化

AMP有効化にチェックを入れ、AMP用ロゴをセットするだけでAMP化出来ます。

CocoonのAMP化設定

  1. AMP機能を有効化する」にチェックを入れます。
  2. ロゴ用画像(600*60以内)をセットします。
  3. まとめて保存」を押します。

 

AMP用ロゴはデフォルトで以下がセットされているので、これでいいや!って場合を除き、自サイト用のロゴに変更しましょう。

場所:/cocoon-master/images/no-amp-logo.png

サイズ:206*60

AMP用ロゴデフォルト

 

AMP用CSSサイズ

「サイズ制限対応」の欄

デフォルトで以下にチェックが入っています。

  • スキンのスタイルを有効にする
  • 子テーマのスタイルを有効にする

CocoonのAMP化設定

上記チェックで、スキンや子テーマのデザインCSSがそのままAMPでも適用され、AMPページデザインが大きく変わってしまうのを避けられます。

スキンを利用していない場合は無駄なCSSを除く為、チェックを外しましょう。

 

カテゴリー単位の除外

AMP化したくないカテゴリーがあれば、チェックを入れる事で除外出来ます。

CocoonのAMP化設定

 

投稿単位の除外

記事単位にAMP化除外する場合には、編集画面の右側にある以下にチェックを入れます。(投稿・固定ページどちらも可)

AMP投稿単位の除外

 

AMPページの確認方法

AMP対応のページを表示するには、ページURLの最後に「?amp=1」を加えてブラウザで開けば確認出来ます。

ページURL?amp=1

 

AMPページテスト

AMPが有効になり、エラーがないかどうかは以下からチェックできます。

1ページごとのチェックしか出来ませんが、すべてのページのテストを行う必要はありません。1~2ページのチェックでOK。

 

AMPテスト

上記サイトで、AMP化したページアドレスを入れて「URLをテスト」ボタンを押します。

AMPテスト
分析に数秒かかります。

AMPテスト

テストが完了し、エラーがなければ以下のように表示されます。

AMPテスト

 

 

エラー時の対応

上記のテストや、Google Search Consoleなどでエラーが出た場合、エラー内容によって対応します。

※以下はGoogle Search Consoleのエラーサンプル画像です。

サーチコンソールエラー

 

サーチコンソールエラー

サイズオーバーの場合

スキンや子テーマのCSSが膨大な場合、具体的には以前は50,000バイトでしたが、最近(2020/02?)75,000バイトまで拡大されました。

75,000バイトを超える場合は対応が必要です。

 

方法1:スキンや子テーマのスタイルシートを見直す

CSSに無駄がないか、不要なものがないかを見直して修正します。サイズが75,000バイトまでに収まればOK。

 

方法2:AMP用のCSSは別で用意する

「サイズ制限対応」の欄のチェックを外し、AMP用のCSSを別に用意する。

外観→テーマエディター

テーマエディター

 

右側にファイルが並んでいますので、「amp.css」を選択します。

AMP用CSS

ここにAMP用のCSSを記述し、「ファイルを更新」ボタンを押して保存します。

 

許可されていないコードがある場合

!important などが含まれている場合はエラーとなるので、エラー対象のコードを削除します。

削除するとデザインが崩れる場合は、AMP用のCSSで対応するか、エラーが出たページをAMP除外するかで対応可。

 

以上です。

 

コメント

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