HTML文法をチェック出来るAnother HTML-lint 5の使い方を解説

ワードプレスというのは、
基本、HTML文法で構成されているのですが、

このHTML文法、最近ではHTML5をグーグルも
重要視していて、この文法がぐちゃぐちゃだと、
検索エンジン的には、あまりよろしくないと考えられます。

そこで、そんなHTML文法をチェックしてくれる
Another HTML-lint 5の使い方について解説したいと思います。

 
こんにちは。ハムです。

ブログ、サイトの内部構造である
HTMLですが、当然、文法がHTML5に
対応していて、正しい文法というか、

綺麗な方が、クローラーが巡回しやすい
ブログ、サイトになる訳で、

多少なりとも、SEO的にはいいと
考えられますので、是非、今回、
紹介するAnother HTML-lint 5を使って
自分のブログ、サイトのHTML構造が綺麗に
しましょう!

  

解説動画

  

(右下の設定部分で倍速で視聴する事が出来ます)

 

HTML文法のチェックのやり方について

 
まずは、下記リンクにアクセスします。

Another HTML-lint 5

 
すると、下記の画面になりますので、
①チェックしたいブログ、サイトのURLを入力
②チェックをクリックします。

html1

 

 
すると下記の画面になります。
赤枠部分がチェックしたブログのHTML文法の点数になります。

html2

 
このブログではないのですが、
マイナス90点て(汗)

この点数がプラスなら特に問題はないのですが、
マイナスの場合、ブラウザによっては型崩れしていたり
クローラーも巡回しにくい汚い構造と言えます。

ですので、HTML文法を修正し、
マイナスからプラスの点数に治していきます。

 

HTML文法の治し方について

 
先程の画面から少し下にスクロールすると
下記の画面になります。

①が-の点数で、数値が大きい程、重要な間違いになります。
②はどこが間違っているかを表したもので、line 1とか2をクリックすると、
該当箇所のHTMLを表示してくれます。

html3

 

 
左側の赤枠部分のリンクをクリックすると
どこが間違っているのか表示されまます。

左側の赤枠部分の横に何が違うのか説明文がありますが、
意味が分からん!という時は右側の赤枠部分の説明のリンクを
クリックすれば、詳しく解説したページが表示されます。

html4

 

 
左側の部分をクリックした後の画面です。
ブログのどこの記述が違うのかが分かります。

html5

 

 
上記の画像の画面を見て、
何が間違っているか分からない場合は、
下記の画像のように
①←ボタンをクリックし前画面に戻り
②説明のリンクをクリックします。

html6

 

 
すると下記の画像のような
何をどうすればいいのか説明した画面になります。

html7

 

あとは、該当箇所のHTMLを修正していく形になります。

 
上記の例でしたら、454行目のHTMLがおかしいよ
という事ですので、ワードプレスにログインし、該当する部分を
修正していきます。

下記の画像の上の赤枠部分が修正箇所になりますので、
修正し、保存をクリックします。

html8

 

 
これで、エラーが一つ消える形になります。

また、最初の画面までもどり、
チェックをクリックしてみましょう

html9

 

 
すると下記の画像のように
先程マイナス90点だったのが、マイナス89点になっています。

html10

あとは、ひたすら、これの繰り返しで、
点数を上げていきます。

 

修正する上での注意点について

 
ワードプレスのテンプレートには
独自のスタイルというのがあります。

HTML文法もプラスの点数なら問題はなく、
100点満点を取る必要は必ずしもある訳ではありません。

よく、点数が下がってしまう原因の一つとして、
ブログランキングのHTMLタグが挙げられます。

ですので、ブログにランキングタグを追加したり、
アクセス解析のHTMLタグを張り付けた時なんかに、
このAnother HTML-lint 5を利用して頂ければと思います。

 
PS:ちなみに、僕がネットビジネス始めた頃、
このHTML文法を修正するのに2日以上かかりました(汗)

なので、今すぐに全部修正出来なくても
時間をかけて、ゆっくり修正して頂ければと思います。

 

いかがでしたでしょうか?参考になれば幸いです


もしも記事を読んで気に入って頂きましたら、
下記のソーシャルボタンで共有して頂きましたら、とても嬉しいです!
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ 

プレゼント付き無料メルマガをやっています(詳細は画像をクリックです↓↓)

mougennkai

 

コメントを残す