少し前の記事ですが、わいひらさんの寝ログでコードチェックツールが紹介されていました。
私もSimplicityを使っているし、見た目やコードを綺麗にしたい！と思い、HTML5を勧告したW3Cが運営しているサイト「Nu Html Checker」で自分のサイトのチェックを行いました。
すると、恥ずかしい凡ミスエラーから、SEO対策に繋がる大事なエラーへの気づきなど、様々なエラーに気づくことができました。
今回は「Nu Html Checker」の使い方とエラーへの対処方法についてまとめました。
自身のサイトを一度もNu HTML Checkerでチェックしたことがないという方は、是非一度やってみてください。新たな発見に繋がるかもしれません。
Nu Html Checkerのエラー対処はSEO対策になる！？
「Nu Html Checker」の使い方の前に、Nu HTML CheckerがSEO対策につながるかどうかについてご説明します。
端的に言うと、発生したエラーに対処することがSEO対策になるか？と問われると、直接的にはならないとは思います。
ただし、エラーの内容次第ではSEO対策に繋がると思います。
私は今回のエラーでSEO対策のキモである「All in One SEO Pack」の設定を見直したり、内部ブログカードの表示方法を改善したりすることがありました。
検索順位の向上だけでなく、ユーザビリティの改善にも繋がったと思います。
そのおかげかどうかはわかりませんが、今回の対処を行なった後、アクセス数が少しだけ増えました。
繰り返しとなりますが、是非一度Nu HTML Checkerをやってみてください。
私は今回のエラー対処によってHTML5の勉強にもなりました。全く分かっていなかったのが恥ずかしいですが、そういう意味からもやっておいてよかったです。
HTML5構文チェックサイトの使い方
サイトの使い方は非常に簡単です。
「Nu Html Checker」に行き、自身のサイトのURLを入力するだけです。
OKの場合は緑色のメッセージが表示されます。
NGの場合は赤いメッセージと共に、どこでどんなエラーが起きているかが表示されます。
サイトのチェックは各ページのURLで実施する
気をつけないといけないのは、サイトのチェックは各ページのURLを入力する必要があるということです。
例えば、サイトのトップページのURL「https://ikumen-sim.net/」と入力してOKと表示されれば、「このサイトは問題ないな」という判断はできません。面倒ですが、各URLを入力して確認する必要があります。
記事が多い方は全部の記事を確認するのは難しいと思いますので、人気記事だけチェックするとか、これからアップする記事だけチェックするとかにした方が良いです。
ここからは実際に私がチェックした時に発生したエラーを見ていきたいと思います。
エラー１：「All in One SEO Pack」によるmetaタグの重複
SimplicityでSEOの設定を行い、さらにプラグイン「 All in One SEO Pack」を導入していると、1ページに複数のmetaタグ(description)が存在してしまい、以下のようなエラーメッセージが表示されます。
ERROR：A document must not include more than one meta element with its name attribute set to the value description
このエラーへの対処としては、「All in One SEO Packを削除するか」、「SimplicityのSEO設定をやめるか」のどちらかです。
簡単な対処はプラグイン「All in One SEO Pack」の削除
対処が簡単なのはプラグイン「 All in One SEO Pack」の削除です。
SimplicityのSEO設定もしっかり実施されておりますので、この対策でも問題ないと思います。実際に、SimplicityのSEOのみを使うと考えた人もいるようです。
ただし、どうしても「All in One SEO Pack」を使いたいという方は次の対処にした方が良いです。
ちなみに私は「All in One SEO Pack」を使うことにしました。あまり明確な理由はなく、何となくSEOに強いんじゃないか？という程度です。
「All in One SEO Pack」を使うなら「SimplicityのSEO設定をやめる」
SimplicityのSEO設定をやめる場合、やることは２つです。
- SimplicityのカスタマイズでSEO設定のチェックを全て外す
- Simplicityの親テーマのheader.phpの「<?php wp_head(); ?>」を「<?php //wp_enqueue_script(‘jquery’);//jQueryの読み込み?>」の直後に移動させる
SimplicityのカスタマイズでSEO設定のチェックを全て外す
管理メニュー「外観」→「カスタマイズ」→「SEO」で以下の画面を開き、全てのチェックを外してください。
header.phpの設定を見直す
Simplicityの親テーマであるheader.phpの「<?php wp_head(); ?>」を「<?php //wp_enqueue_script(‘jquery’);//jQueryの読み込み?>」の直後に移動させてください。
この対策を実行すると、metaタグのdescriptionの内容が書き換わることがわかります。これまでは「本文の冒頭の内容」が表示されておりましたが、これからは各投稿の「All in one SEO」の内容が反映されることになります。
ちゃんとdescriptionが変更されているかはSEOチェキなどのサイトで確認してください。
本エラーの対処はこちらの記事を参考にさせていただきました。ありがとうございました。
エラー２：「All in One SEO Pack」によるitemprop属性の追加
「All in One SEO Pack」はv2.2(2014年7月頃)以降、「itemprop=”description” 」という属性が追加されるようになりました。
しかし、このバージョンアップの仕様変更により以下のエラーメッセージが表示されます。
ERROR：Attribute itemprop not allowed on element meta at this point.
「Use Schema.org Markup」のチェックを外せばOK
対処は非常に簡単です。
管理者メニュー「All in One SEO」から「General Settings」(一般設定)を選択し、「General Settings」項目にある「Use Schema.org Markup」のチェックを外せば、このエラーはなくなります。
エラーの対処はこちらの記事を参考にさせていただきました。ありがとうございました。
エラ−３：なぜか勝手に</p>が追加されるエラー
開始タグの<p>がないのに、終了タグの</p>だけがあるということで、以下のエラーメッセージが表示されます。
ERROR：No p element in scope but a p end tag seen
残念ながらこれの原因はわかりませんでした。ただ、対処方法は見つかりました。
function.phpに以下のコードを追加することで、エラーは表示されなくなります。
処理内容は「</p></div>があったら、</div>」に変換するというものです。
//</div>に</p></div>が追加されてしまう
function p_end_tag_fix($content){
$the_content = str_replace( '</p></div>','</div>', $content );
return $content;
}
add_filter('the_content', 'p_end_tag_fix');
エラーの対処はこちらの記事を参考にさせていただきました。ありがとうございました。
エラー４：HTML5から廃止されたtdタグへのwidth属性の使用
HTML5からはアクセシビリティの観点から、テーブルをレイアウトに使わないように周知されました。（詳細はこちら）
そのため、table、th、tdタグなどでwidth属性を使用することが非推奨となりました。
そんな基本的なこともわかっていなかった私は、ついついtdタグにwidthを入力していたため、以下のようなエラーメッセージが表示されました。
ERROR：The width attribute on the td element is obsolete. Use CSS instead.
変更内容としてはhtmlの記載について
<td width = "100%">
を
<td style="width: 100%">
に変更しました。
こんな凡ミスをしているのは、私だけかもしれませんが。。笑
エラー５：WordPress4.5.3以降のブログカードの巨大化
WordPress4.5.3以降からWordPressの仕様が変更となり、Simplicityではなく、WordPressのブログカードが表示されるようになりました。
出展：https://wp-simplicity.com/pre_oembed_result/
このブログカードが表示されていると、以下のような2種類のエラーが表示されます。
Attribute security not allowed on element iframe at this point.
The frameborder attribute on the iframe element is obsolete. Use CSS instead
WordPressのブログカードはかなり大きく、ユーザからすると、かなり見にくいWebサイトになってしまいます。また、HTML5の構造エラーが出るとなると、WordPressの仕様とはいえ、修正した方がよいと思います。
投稿時にWordPressのブログカードを無効化する
対処としては、functions.phpに以下のソースコードを入力します。
remove_filter( 'pre_oembed_result', 'wp_filter_pre_oembed_result');
これにより、投稿時にWordPressのブログカードを無効化させることができます。
ただ、これだけでは既に投稿済みの記事は無効化できません。
投稿済み記事のWordPressのブログカードを無効化する
投稿済みの記事も無効化させる場合は、一時的に以下のソースコードをfunctions.phpに入力します。
add_filter('manage_post_posts_columns', function ($columns) {
$columns["delete_oembed_cache"] = "oEmbed Cache削除";
return $columns;
});
add_action('manage_post_posts_custom_column', function ($column_name, $post_id) {
if ("delete_oembed_cache" !== $column_name) {
return;
}
$nonce = wp_create_nonce("delete_oembed_cache");
?>
<input type="button" value="oEmbed Cache削除" data-id="<?php echo $post_id; ?>" data-nonce="<?php echo $nonce; ?>" class="delete-oembed-cache">
<?php
}, 10, 2);
add_action('admin_footer-edit.php', function () {
?>
<script>
(function ($) {
$(function () {
$(".delete-oembed-cache").click(function () {
$.ajax({
type: 'POST',
url: ajaxurl,
data: {
"action": "delete_oembed_cache",
"post_id": $(this).data("id"),
"nonce": $(this).data("nonce")
}
}).done(function (res) {
alert(res.data.message);
}).fail(function (xhr, status, error) {
alert(error);
});
return false;
});
});
})(jQuery);
</script>
<?php
});
add_action('wp_ajax_delete_oembed_cache', function () {
if (isset($_POST["nonce"]) && wp_verify_nonce($_POST["nonce"], "delete_oembed_cache")) {
$post_id = $_POST["post_id"] - 0;
$post = get_post($post_id);
if ($post) {
global $wpdb;
$result = $wpdb->query($wpdb->prepare("
DELETE FROM $wpdb->postmeta
WHERE
meta_key LIKE '_oembed_%%'
"));
if (false !== $result) {
wp_send_json_success(
array(
"message" => "succeeded"
)
);
}
}
}
wp_send_json_error(
array(
"message" => "failed"
)
);
});
上記の後、投稿一覧の画面に「oEmbed Cache削除」という列が表示されるようになります。
記事毎に「削除」ボタンを押下すればOKです。一度、削除ボタンを押下した後は上記のソースコードは削除しても問題ありません。
以下の記事を参考させていただきました。ありがとうございました。
コメント