Google様には逆らえないので、推奨するとおり、AMP対応のページを準備しました。
実際には、Wordpressの有料テーマ【THE THOR】というのを使用しているので、ちょっとした設定をするだけで、AMPのページを生成できるようになっているようです。
しかし、GoogleSearchConsole（通称サチコ）からAMPエラーの表示があり、調べてみると大量のエラーが発生という流れです。
アフィリエイトリンクは手作業
過去にも、アマゾンや楽天のアフィリエイトリンクをページに貼った事で、エラーが出たことがあり対応しました。
AMPページにしたら、アマゾンアフィリエイトで「タグの属性で指定されたレイアウトが無効」になる対処方法
いちいち手編集でやらなければならない
ので、本当にメンドクサイです。
現時点も直してないアフィリエイトリンクが大量に存在します。
convert.phpを修正すれば簡単？
他のWordpressテーマではやってないのでわかりませんが、THE THORでは、
covert.phpにコード追加でエラーが消えた！
追加したコードは、自分のエラーだけを対応した事ですが消えたので良しとしました。
管理パネルから、
外観 ＞ テーマの編集 ＞ THE THOR ＞ inc ＞ amp ＞ convert.php
と進んで、convert.phpに下記のコードを追加しました。
ちなみに、THE THORは、子テーマと親テーマがありますが、親テーマの方に、convert.phpがあります。
このconvert.phpというのが、AMPページを生成するコードになっているポイントのようですね。
//「marginheight」はタグ「amp-iframe」で使用できません対策
$pattern = '/marginwidth="0"/i';
$append = '';
$the_content = preg_replace($pattern, $append, $the_content);
$pattern = '/marginheight="0"/i';
$append = '';
$the_content = preg_replace($pattern, $append, $the_content);
$pattern = '/security="restricted"/i';
$append = '';
$the_content = preg_replace($pattern, $append, $the_content);
//border属性を除去する
$the_content = preg_replace('/ +border=["][^"]*?["]/i', '', $the_content);
$the_content = preg_replace('/ +border=[\'][^\']*?[\']/i', '', $the_content);
//画像タグをAMP用に置換
$the_content = preg_replace('/<img (.*?)>/i', '<amp-img layout="responsive" $1></amp-img>', $the_content);
$the_content = preg_replace('/<img (.*?) \/>/i', '<amp-img layout="responsive" $1></amp-img>', $the_content);
//画像タグをAMP用に置換
$the_content = preg_replace('/<img (.*?)>/i', '<amp-img layout="responsive" $1></amp-img>', $the_content);
$the_content = preg_replace('/<img (.*?) \/>/i', '<amp-img layout="responsive" $1></amp-img>', $the_content);
そして、現時点のconvert.phpの全コードが下記のようになります。
<?php
////////////////////////////////////////////////////////
//AMP専用投稿コンテンツをAMPページ用にコンバート
////////////////////////////////////////////////////////
function convert_content_amp($the_content){
// 通常ページではコンテンツを置換しない
if (isset($_GET["type"]) && $_GET['type'] == 'AMP' && is_single() && get_option('fit_ampFunction_switch') == 'on' && get_post_meta(get_the_ID(), 'amp_hide', true) != '1') {
// Twitterをamp-twitterに置換する
$pattern = '/<blockquote class="twitter-tweet".*?>.+?<a href="https:\/\/twitter\.com\/.*?\/status\/(.*?)">.+?<\/blockquote>/is';
$append = '<p><amp-twitter width=486 height=657 layout="responsive" data-tweetid="$1"></amp-twitter></p>';
$the_content = preg_replace($pattern, $append, $the_content);
// Instagramをamp-instagramに置換する
$pattern = '/<blockquote class="instagram-media".+?"https:\/\/www\.instagram\.com\/p\/(.+?)\/".+?<\/blockquote>/is';
$append = '<amp-instagram layout="responsive" data-shortcode="$1" width="400" height="400" ></amp-instagram>';
$the_content = preg_replace($pattern, $append, $the_content);
// YouTubeをamp-youtubeに置換する
$pattern = '/<iframe[^>]+?src="https:\/\/www\.youtube\.com\/embed\/(.+?)(\?feature=oembed)?".*?><\/iframe>/is';
$append = '<amp-youtube layout="responsive" data-videoid="$1" width="480" height="270"></amp-youtube>';
$the_content = preg_replace($pattern, $append, $the_content);
// iframeをamp-iframeに置換する
$pattern = '/<iframe/i';
$append = '<amp-iframe layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups"';
$the_content = preg_replace($pattern, $append, $the_content);
$pattern = '/<\/iframe>/i';
$append = '</amp-iframe>';
$the_content = preg_replace($pattern, $append, $the_content);
//C2A0文字コード（半角スペース）を通常の半角スペースに置換
$the_content = str_replace('\xc2\xa0', ' ', $the_content);
//style属性を取り除く
$the_content = preg_replace('/ +style=["][^"]*?["]/i', '', $the_content);
$the_content = preg_replace('/ +style=[\'][^\']*?[\']/i', '', $the_content);
//onclick属性を取り除く
$the_content = preg_replace('/ +onclick=["][^"]*?["]/i', '', $the_content);
$the_content = preg_replace('/ +onclick=[\'][^\']*?[\']/i', '', $the_content);
//fontタグを取り除く
$the_content = preg_replace('/<font[^>]+?>/i', '', $the_content);
$the_content = preg_replace('/<\/font>/i', '', $the_content);
//imgタグにwidthとheightを追加 ここから先を追記
$img_pattern = '/<img [^>]*?src="(https?:\/\/[^"]+?)"[^>]*?>/iu';
preg_match_all($img_pattern, $the_content, $rep_imgs);
foreach ( $rep_imgs[0] as $i => $rep_img ) {
if ( false !== strpos( $rep_img, 'width=' ) && false !== strpos( $rep_img, 'height=' ) ) {
continue;
}
$rep_img_url = $rep_imgs[1][$i]; // 画像url
$rep_img_size = @getimagesize( $rep_img_url ); // 画像サイズを取得
if ( false === $rep_img_size ) {
continue;
}
$replaced_img = str_replace( '<img ', '<img ' . $rep_img_size[3] . ' ', $rep_imgs[0][$i] );
$the_content = str_replace( $rep_img, $replaced_img, $the_content );
}
//「marginheight」はタグ「amp-iframe」で使用できません対策
$pattern = '/marginwidth="0"/i';
$append = '';
$the_content = preg_replace($pattern, $append, $the_content);
$pattern = '/marginheight="0"/i';
$append = '';
$the_content = preg_replace($pattern, $append, $the_content);
$pattern = '/security="restricted"/i';
$append = '';
$the_content = preg_replace($pattern, $append, $the_content);
//border属性を除去する
$the_content = preg_replace('/ +border=["][^"]*?["]/i', '', $the_content);
$the_content = preg_replace('/ +border=[\'][^\']*?[\']/i', '', $the_content);
//画像タグをAMP用に置換
$the_content = preg_replace('/<img (.*?)>/i', '<amp-img layout="responsive" $1></amp-img>', $the_content);
$the_content = preg_replace('/<img (.*?) \/>/i', '<amp-img layout="responsive" $1></amp-img>', $the_content);
//画像タグをAMP用に置換
$the_content = preg_replace('/<img (.*?)>/i', '<amp-img layout="responsive" $1></amp-img>', $the_content);
$the_content = preg_replace('/<img (.*?) \/>/i', '<amp-img layout="responsive" $1></amp-img>', $the_content);
//スクリプトを除去する
$pattern = '/<script.+?<\/script>/is';
$append = '';
$the_content = preg_replace($pattern, $append, $the_content);
return $the_content;
}else {
return $the_content;
}
}
add_filter('the_content','convert_content_amp', 999999999);
アフィリエイトリンク無ければ有効
現時点で、アフィリエイトのリンクが無いページであれば
有効なAMPページです
となるようです。
画像なども、更新したり、画像高さや幅の設定などをやらなくても大丈夫になりました。
アフィリエイトがある場合は、こつこつと手作業で修正するしかないようなので、対象のページを更新することがあれば修正するし、それ以外は放置ですね。
ちなみに、楽天アフィリエイトでは、AMP対応のコードなどが生成できるようですが、自分が試すと、画像が出なかったり、デザインを崩すような入り方をしたので使えませんでした。
※楽天アフィリエイトのAMP対応コードは、AMPページに直接埋め込むコードであり、今回のようなテーマから自動生成したAMPページでは使えないかもしれません。
もっと簡単にアフィリエイトリンクが貼れるようなAMP対応になってほしいものです。
天下のGoogle様が推奨しているAMPですから、検索順位を下げられてしまうのも困るのでやるしかないですね。