AMP用ページに関連記事を入れる方法!直帰率を下げてPVアップ

AMP用ページに関連記事を入れる方法
(YouTube, AdSense, Play 公認エキスパート)
2017年04月09日 in SEO, Wordpress
記事内にPR・広告が含まれる場合があります

プラグインなどを使用すれば AMP に対応させることは簡単にでき、ある程度デザインなどもカスタマイズすることも可能です。カスタマイズの方法などについては下記ページでご紹介しておりますので、ご覧頂ければ幸いです。

さて AMP 用ページはシンプルになりがちなので、AMP 用ページを観覧したユーザーは記事内にあるリンクや広告を踏むか、検索結果ページへ戻ってしまうケースが多くなります。そうなるとサイト内の回遊率が低くなり、直帰率がとても高くなってしまうのです。当サイトでもプラグインを入れただけでカスタマイズをしていなかった時は、直帰率が 92% 以上と非常に高い状態でした。
AMP の直帰率

当サイトではモバイルからのアクセスの内、約 60% が AMP 用ページへのアクセスです。そのため直帰率が高い AMP 用ページを何とかしないと、PV がもったいないことになっているのです。

直帰率を下げる方法として有効なのが関連記事を入れることですね。通常のページでは関連記事を入れている方は多いのではないでしょうか。AMP 用ページでも直帰率を改善するために関連記事を入れてみましょう!

広 告

コピペでAMP用ページに関連記事を入れよう!

今回は WordPress で AMP 用ページを出力している場合で、関連記事を表示するコードをご紹介致します。

関連記事を表示させるコード

下記のコードを AMP を出力するファイルに挿入してください。WordPress のプラグイン『AMP』を使用している場合は、templates フォルダ内にある single.php の関連記事を表示させたい場所に入れます。

<div class="amp-related">
<ul>
<?php
//関連記事を5つランダムに表示する
$categories = get_the_category($post->ID);
$category_ID = array();
foreach($categories as $category):
array_push( $category_ID, $category -> cat_ID);
endforeach ;
$args = array(
'post__not_in' => array($post -> ID),
'posts_per_page'=> 5,
'category__in' => $category_ID,
'orderby' => 'rand',
);
$query = new WP_Query($args); ?>
<?php if( $query -> have_posts() ): ?>
<?php while ($query -> have_posts()) : $query -> the_post(); ?>

<li>
<?php if ( has_post_thumbnail() ): // サムネイルがある場合 ?>
<?php
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id, 'thumbnail',true);
?>
<amp-img src="<?php echo $image_url[0]; ?>" width="80" height="80" class="list-amp-img"></amp-img>

<?php else: // サムネイルがない場合 ?>
<amp-img src="<?php echo get_template_directory_uri(); ?>/images/nopic.png" width="80" height="80" class="list-amp-img" ></amp-img>
<?php endif; ?>

<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>
<?php endwhile;?>
</ul>
</div>

関連記事の数は「’posts_per_page’=> 5,」の数字を変更してください。サムネイルがない場合の代わりに表示させる画像は「/images/nopic.png」を変更してください。

CSS のコード

上記のコードを挿入したら、ご自身が CSS でデザインを変更して頂ければ問題ありません。もしそれが面倒であれば下記のコードを入れてみてください。

/** 関連記事 **/
.amp-related ul{
border-top: 0;
margin: 0 0px 10px 0px;
padding:0px;
}
.amp-related ul li{
width: 100%;
background:#fff;
border-bottom: 3px solid #e4e4e4;
height: 96px;
margin: 0px;
list-style:none;
}
.amp-related ul li a{
color: #333;
display: block;
height: 78px;
margin: 0;
padding:18px 16px 0 0;
text-decoration: none;
font-weight:normal;
}
.list-amp-img{
float: left;
height: 80px;
width: 80px;
margin:8px 12px 0px 8px;
padding:0;
}

このような感じで関連記事を表示させることが可能です。

執筆者情報
2004年から当サイト「iscle」を始めた管理者。Google 公認のプロダクトエキスパートとして、YouTube、Google AdSense、Play の公式コミュニティで活動中。スマホアプリ、Web ツールの使い方や最新情報を中心に発信しています。