この記事が気に入ったらシェアしてください

SEO対策に繋がるHTML構文チェック!Nu Html Checkerのエラー対処まとめ

この記事が気に入ったらシェアしてください

HTML5のNu html checkerによるエラー対処方法まとめ

Photo credit: ekkun via VisualHunt / CC BY-NC

少し前の記事ですが、わいひらさんの寝ログでコードチェックツールが紹介されていました。

私も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を入力するだけです。

Nu Html CheckerにチェックするサイトのURLを入力

OKの場合は緑色のメッセージが表示されます。

nu_html_checkerでサイトに問題がない場合のメッセージ

NGの場合は赤いメッセージと共に、どこでどんなエラーが起きているかが表示されます。

nu_html_checkerでサイトに問題があった場合のメッセージ

サイトのチェックは各ページのURLで実施する

気をつけないといけないのは、サイトのチェックは各ページのURLを入力する必要があるということです。

例えば、サイトのトップページのURL「http://ikumen-sim.net/」と入力してOKと表示されれば、「このサイトは問題ないな」という判断はできません。面倒ですが、各URLを入力して確認する必要があります。

記事が多い方は全部の記事を確認するのは難しいと思いますので、人気記事だけチェックするとか、これからアップする記事だけチェックするとかにした方が良いです。

ここからは実際に私がチェックした時に発生したエラーを見ていきたいと思います。

エラー1:「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設定をやめる場合、やることは2つです。

  • SimplicityのカスタマイズでSEO設定のチェックを全て外す
  • Simplicityの親テーマのheader.phpの「<?php wp_head(); ?>」を「<?php //wp_enqueue_script(‘jquery’);//jQueryの読み込み?>」の直後に移動させる

SimplicityのカスタマイズでSEO設定のチェックを全て外す

管理メニュー「外観」→「カスタマイズ」→「SEO」で以下の画面を開き、全てのチェックを外してください。

simplicityのカスタマイズSEOのチェックを全て外した画面

header.phpの設定を見直す

Simplicityの親テーマであるheader.phpの「<?php wp_head(); ?>」を「<?php //wp_enqueue_script(‘jquery’);//jQueryの読み込み?>」の直後に移動させてください。

wp_headを</head>の前から移動させる

この対策を実行すると、metaタグのdescriptionの内容が書き換わることがわかります。これまでは「本文の冒頭の内容」が表示されておりましたが、これからは各投稿の「All in one SEO」の内容が反映されることになります。

ちゃんとdescriptionが変更されているかはSEOチェキなどのサイトで確認してください。

seoチェキを使ったdescriptionを確認

本エラーの対処はこちらの記事を参考にさせていただきました。ありがとうございました。

エラー2:「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」のチェックを外せば、このエラーはなくなります。

Schema.org マークアップを使用のチェックを外す

エラーの対処はこちらの記事を参考にさせていただきました。ありがとうございました。

エラ−3:なぜか勝手に</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');

エラーの対処はこちらの記事を参考にさせていただきました。ありがとうございました。

エラー4: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%">

に変更しました。

こんな凡ミスをしているのは、私だけかもしれませんが。。笑

エラー5:WordPress4.5.3以降のブログカードの巨大化

WordPress4.5.3以降からWordPressの仕様が変更となり、Simplicityではなく、WordPressのブログカードが表示されるようになりました。

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です。一度、削除ボタンを押下した後は上記のソースコードは削除しても問題ありません。

以下の記事を参考させていただきました。ありがとうございました。

(Visited 448 times, 1 visits today)
スポンサーリンク
広告
広告

この記事が気に入ったらシェアしてください

もし良かったらフォローしてください