HOME
Tech
AMPの検証済みURLのエラー対応
カテゴリー
Tech

AMPの検証済みURLのエラー対応

最近、WordpressをAMP化しました。AMP化は専用のプラグインを入れるだけで対応出来たのですが、色々とエラーが出てしまいました。このブログでは、エラー対応等を記載しています。

  • AMP化
    • プラグイン
  • エラー対応
    • 送信ボタンのエラー
    • 必須の構造化データ要素のエラー
    • パンくずリストの自作
    • AMP自動広告
  • その他
    • TwentyTwentyの折り畳みメニューを非表示
    • pagespeed insightにWebPフォーマットを推奨されたが

AMP化

プラグイン

AMP化自体は専用のプラグインを使用したため、すぐに出来ました。AMPという名前のプラグインで、googleも開発に携わっているそうです。下のリンクはプラグインの公式サイトです。

AMP

エラー対応

送信ボタンのエラー

ボタンを押したときにリダイレクトするような処理をしていると、下記のエラーが出てきます。

サーバーのレスポンスが ok でも、送信が処理されていない場合があります。 このフォーム処理機能の開発者に連絡して、このメッセージを改善してください。

AMPのヘルプページにjsonで判定すればいいと書いていましたが、あまりよく分かりませんでした。(私のような初心者は直接的にこうしろ、と書かれていないと訳がわからないのです)。

結局書いてあることを何日かかけて理解し、functionsにコードを書き足すことでエラーなしでリダイレクトするようになりました。functionsは子テーマのfunctionsです。

<?php
function jsoncheck(){
if ( wp_is_json_request() ) {
if ( $success ) {
$message = __( 'ok!', 'my-textdomain' ); } else { $message = __( 'ng!', 'my-textdomain' );
}
wp_send_json( compact( 'message' ), $success ? 200 : 400 );
}
}
add_action('template_redirect','jsoncheck');?>
?>

必須の構造化データ要素のエラー

サーチコンソールで必須の構造化データ要素のエラーとかいうのが出ました。

エラーの内容が全く分からなかったので検索を掛けたところ、構造化データテストツールを使えば詳細が分かると。結果、publisher name, publisher logoのurlが指定されていないというものでした。色々なサイトを見ると別に気にしなくていいというコメントもありましたが、やはりエラーとなっていると気になります。

下のやり方はhttps://amp-wp.org/に書いてあるのを一部変更したものです。googleのAMPプラグインを使っていない方は、勿論amp_post_template_metadataが使えないと思います。

<php?
add_filter( 'amp_post_template_metadata', 'xyz',10,2);
function xyz( $metadata, $post ) {
$metadata['publisher']['name'] = 'なまえを入れてください';
$metadata['publisher']['logo'] = array(
'@type' => 'ImageObject',
'url' => 'ロゴ画像のurlを入れてください',
);
return $metadata;
}
?>

パンくずリストの自作

English page is here

パンくずリストを作成しようとプラグインを試したのですが、何故かうまくいきません。AMPのエラーが起きてしまいます。そこで、ウィンドミル様のページを参考に自作しました。

ウィンドミル様のコードページ

下記は変更点です。

  • data-vocabulary.orgの参照をschema.orgに変更
    • AMPの構造化データでshema.orgを参照するようエラーがあったため
  • 上記に伴い構造化データの記述を変更
  • 現在のページが表示されるように変更

下のコードを子テーマのfunctionsに書いて下さい。

<?php
function breadcrumb(){
global $post;
    $str ='';
    if(!is_home()&&!is_admin()){
		$str.= '<div itemscope itemtype="http://schema.org/BreadcrumbList">';
		$str.= '<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" >';
		$str.= '<meta itemprop="position" content="1">';
     	$str.= '<a itemprop="item" href="'. home_url() .'"><span itemprop="name">HOME</span></a> &gt;&#160;</div>';	
        if(is_page()){
            if($post -> post_parent != 0 ){
                $ancestors = array_reverse(get_post_ancestors( $post->ID ));
                foreach($ancestors as $ancestor){
				$str.= '<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" >';
				$str.= '<meta itemprop="position" content="2">';
      			$str.= '<a href="'. get_permalink($ancestor).'" itemprop="item"><span itemprop="name">'. get_the_title($ancestor) .'</span></a> &gt;&#160;</div>';
                }
            }	
        } elseif(is_single()){
            $categories = get_the_category($post->ID);
            $cat = $categories[0];
            if($cat -> parent != 0){
                $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
                foreach($ancestors as $ancestor){
					$str.= '<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" >';
					$str.= '<meta itemprop="position" content="2">';
      				$str.= '<a href="'. get_category_link($ancestor).'" itemprop="item"><span itemprop="name">'. get_cat_name($ancestor). '</span></a>→</div>';
                }
            }
			$str.= '<div itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" >';
			$str.= '<meta itemprop="position" content="2">';
      		$str.= '<a href="'. get_category_link($cat -> term_id). '" itemprop="item"><span itemprop="name">'. $cat-> cat_name . '</span></a> &gt;&#160;</div>';		
        }
        $str.='<div>'. wp_title('', false) .'</div>';
    }
    echo $str;
}
?>

さらに、下のコードをパンくずリストを表示させたいページに書いて下さい。AdInserterというプラグインを使っている場合、blockに書き写せばよいです。

<?php breadcrumb(); ?>

AMP自動広告

AMP自動広告というものを使用したところ、広告が表示されませんでした。No ad placements found for publisher IDというエラーが出てきています。調べたところ、多くの人が解決出来ていない問題のようです。

仕方ないので、adsenseで通常の広告を作成して設置しています。とりあえず記事の上と下に。本当は自動広告の方が面倒でなくていいのですが、止むを得ません。調べた中でadsense側のエラー、というものも見つけました。もしそうであるなら早く解決してほしいところです。

その他

TwentyTwentyの折り畳みメニューを非表示

私はwordpressのTwenty Twentyというテーマを使っています。公式が出している事が決め手です。

使いやすいのですが、モバイル端末で見たときの折り畳みメニューが好きではありません。折り畳みメニューはSEOでよくないとgoogleにも書いています。そこで、これを非表示にしました。

追加CSSに下のコードを入れると非表示にすることが出来ます。上から順に、

  • モバイルの折り畳みメニュー
  • モバイルの折り畳みメニューのテキスト(メニューと書いているテキストです)
.toggle-icon{display:none}
.toggle-text{display:none}

pagespeed insightにWebPフォーマットを推奨されたが

AMPを導入した目的はサイトを軽くすることです。ところがgoogle Search Consoleのpagespeed insightで速度を見たところ、モバイルではスコアが60、70でした。

原因は色々あったのですが、その1つが画像の容量です。気にせずjpegでuploadしていましたが、多くて300kBのものがありました。このサイズでも重いようです。

pagespeed insightのおすすめ対応は、画像の次世代フォーマットへの変更です。次世代フォーマットにはJPEG2000, JPG XR, WebPがあります。

  • JPEG2000→iPhone系? Safariで見れる。
  • JPG XR→Microsoft系? edgeやIEで見れる。
  • WebP→google系?Chromの他edgeでも見れる。

軽さはWebPが一番軽いとのことですが、やはりどれでも見れるjpegから変えたくない。調べた結果、単純な圧縮が可能だと知りました。ここで使用したのがsquooshというgoogleのウェブアプリです。ただドラックするだけで変更できます。勿論WebPにも変更出来るようです。

SQUOOSH PAGE