AMPページに「抜粋」と「続きを読む」ボタンの表示する方法。

AMPページだけ本文がまったく表示されない記事を発見し、対処方法をいくつか考えた結果、「本文が空の時だけ、抜粋と続きを読むボタンを表示する」ことにしたんですが、通常時でも同じことをしたい方がいるかもしれないので、カスタマイズ方法をご紹介します。

カスタマイズの概要

今回のカスタマイズの概要は下記の通り。

  • AMPページの時だけ、抜粋(先頭の120文字)と続きを読むボタンを表示
  • 続きを読むボタンをタッチすると、通常のモバイルページに移動する
  • ナビ、広告、シェアボタン、関連記事…など、本文以外の部分はすべて表示

要は、ニュースサイトのようにするカスタマイズです。

検索→導入ページ→全文が表示されているページ…というサイトをよく見かけると思いますが、それと同じです。

カスタマイズ後の画面

コード

HTMLコードとCSSがこちら。

HTMLコード

the_content();
wp_link_pages();

の部分 に下記のコードを上書き(コピペ)します。

//--本文が空の時の処理--//
$content = apply_filters( 'the_content', get_the_content() );
$content = str_replace( ']]>', ']]>', $content );
$excerpt = get_post(get_the_ID())->post_content;
$excerpt = esc_html(strip_tags(str_replace(array("\r\n", "\r", "\n"), '', $excerpt)));
$excerpt = mb_strimwidth($excerpt, 0, 240, "...", "utf-8");
 echo '<p>'.$excerpt.'</p>
 <div class="to-mobile-page"><a href="'.get_the_permalink().'">続きを読む</a></div>';
//--終わり--//

CSS

<style amp-custom>内でデザインを指定します。サンプルCSSはこちら。

.to-mobile-page {
 width: 90%;
 max-width: 480px;
 clear: both;
 position: relative;
 margin: 2rem auto;
 padding: 2% 2% 2% 8%;
 background: #ff9c23;
 border-radius: 2px;
 font-size: 18px;
 line-height: 1.6;
 text-align: center;
}
.to-mobile-page:after {
 color: #fff;
 font-size: 30px;
 position: absolute;
 top: 50%;
 left: 5%;
 margin-top: -25px;
 font-family: "FontAwesome";
 content: "\f105";
}
.to-mobile-page a {
 display: block;
 color: #fff;
}

カスタマイズのメリットとデメリット

このカスタマイズをするメリットとデメリットも考えてみましょう。

メリット

  • 本文以外の部分の視認性が高くなる(恩恵を受けるのは主に広告)
  • PV数が増える

など、ページ分割するメリットと基本的に同じですが、このカスタマイズの最も大きなメリットは、「本文を気軽に修正できる」ことです。

ご存知の通り、AMPページは通常ページと違い、「キャッシュ」されたページが表示されるので、修正をしてもすぐには反映されません。

大規模サイトであれば、キャッシュされるスピードが早いので特に問題ないかもしれませんが、小規模なサイトは修正反映までに時間がかかります。

でも、AMPページに抜粋だけ表示して、本文を通常のモバイルページで読んでもらえれば、そういった悩みはなくなります。

デメリット

一方のデメリットも、「行動が一回増えて煩わしい」など、ページ分割のそれと同じですが、1番のデメリットは、「ページの読み込み速度が爆速になるAMPの意味がなくなる」ことでしょうか。

通常は読み込み速度が遅いページでもAMPなら瞬時に表示されるのに、その良さが一切なくなるので、AMPプロジェクトの趣旨に反していることは言うまでもありません。

また、AMPが現時点でランキングシグナルに使われないことは周知の事実ですが、検索順位への影響はやはり気になります。

個人的には、rel="canonical"で指定されているURLが通常のモバイルページだから影響はないと考えているんですが。。

検索順位への評価対象がモバイルページだけであれば、今回のカスタマイズはかなり使えることになりますね。

以上、ご参考までに!(`・ω・´)ゞ

キャリアアップ ブラックな求人広告を見分けてホワイト企業に応募する方法。

キャリアアップ 給料が安い?残業が多い?仕事を辞めたい20代の転職ハック。

キャリアアップ 初めての就職・転職が不安な方におすすめの転職エージェント

この記事が良かったらいいね!最新情報が届きます!

この記事を書いた人 :

WEBメディア「MORIAWASE」の運営者。求人広告会社の元施設長で、趣味は音楽制作(DTM)。育児に奮闘中です!