シリウス2 ルール無視はSEOで不利に！最低限の知識は必要？

作成者が気付かない構文エラー

HTMLの記述方法にはルールがあり、基本的な最低限の知識は必要です。ソフトでホームページ作成をする場合に、ツールバーなどでの便利なエディット機能を多用すると、このルールからいつの間にか外れてしまう事もあります。これは構文エラーと呼ばれSEOに影響しますし、表示崩れで一番多い原因になっています。

 

このようなHTMLの記述ミスが検索順位に直接大打撃を与える事は無いですが、確実にマイナスであり絶対にプラスにはなりません。SEO対策は小さな施策の積み上げですが、ホームページを作成する以上「構文エラーがない事」は大前提になります。そのため作成ソフトを扱う場合でも最低限のHTMLのルールを知っておく必要があります。

 

 

HTMLのルール

HTML記述の親子関係

親要素と子要素

ブロック要素はページの構造やレイアウトに関係する要素でブロック内の行全体をまとめて、独立したスペースを形成します。この事からページ内でブロック同士は必ず改行され、垂直方向に積み上げられていきます。ブロック要素の開始タグと終了タグ内の行に対して開始タグ内に記述されたスタイルが影響を及ぼします。

ブロック要素は行全体のまとまりである事に対して、インライン要素は行の中の一部のまとまりで、特定の単語や文章に対して意味や役割を与える要素で、要するにシリウス2ではツールバーの「装飾」で表示されるHTMLと言えます。

親子関係の基本形

<div>
<p><span>〇<b>〇</b>〇</span></p>
</div>

 

記述ミスの例

記述ミス-1

 

記述ミス-2

<b>むかし、ある所におじいさんとおばあさんが住んでいました。</b>

 

ボールドの開始タグと終了タグの中に文節が存在する
<b>むかし、ある所に<span style="color:#CA3659;">おじいさんとおばあさん</span>が住んでいました。</b>

 

1-先にボールド→色指定
<span style="font-weight:bold;">むかし、むかし、ある所に<span style="color:#CA3659;">おじいさんとおばあさん</span>が住んでいました。</span>

 

2-先に色指定→個別にボールド（bタグが閉じているのでOK）
<b>むかし、むかし、ある所に</b><span style="color:#CA3659;font-weight:bold;">おじいさんとおばあさん</span><b>が住んでいました。</b>

 

記述ミス-3

むかし、むかし、ある所に<b>おじいさんとおばあさん</b>が住んでいました。

 

ボールドが重なっている
<span style="color:#4473B1;font-weight:bold;">むかし、むかし、ある所に<b>おじいさんとおばあさん</b>が住んでいました。</span>

 

最初のボールドは消しておく
<span style="color:#4473B1;font-weight:bold;">むかし、むかし、ある所におじいさんとおばあさんが住んでいました。</span>

 

記述ミス-4

1. サンプルサンプルサンプル
2. サンプルサンプルサンプル
3. サンプルサンプルサンプル
4. サンプルサンプルサンプル

 

リストの外にボールドが存在する
<ol>
<b><li>サンプルサンプルサンプル</li></b>
<b><li>サンプルサンプルサンプル</li></b>
<b><li>サンプルサンプルサンプル</li></b>
<b><li>サンプルサンプルサンプル</li></b>
</ol>

 

最初にボールドをかけてからリストする
<b>サンプルサンプルサンプル</b>
<b>サンプルサンプルサンプル</b>
<b>サンプルサンプルサンプル</b>

 

記述ミスのない装飾方法

装飾の順番を決めておく

文字装飾する場合は、ある段落のテキストの記述を一通り完了させてから作業します。テキストを打ちながらその都度装飾するのは止めた方が良いです。そして装飾の際まず最初にどの段落、文節、語句に対してエディットするのかを大まかにイメージします。ほとんどの場合「枠」などの大きい記述は最後に、小さいボールドなどは最初になります。

 

<div style="color:#000000;background-color:#EDF5F8;font-size:16px;border:solid 2px #4473B1;padding:9px;" class="usrbox">
<p>16Px<span style="color:#CA3659;font-size:20px;">20Px・赤色<b>20Px・赤色・太文字</b></span><b>16Px</b></p>
</div>

 

 

むかし、むかし、ある所におじいさんとおばあさんが住んでいました。おじいさんは山へしば刈りに、おばあさんは川へ洗濯に行きました。

 

おばあさんが川で洗濯をしていると大きな桃が流れてきました。

 

 

<div style="color:#000000;background-color:#EDF5F8;border:solid 1px #4473B1;padding:18px;" class="usrbox">
むかし、むかし、ある所に<span style="color:#4473B1;"><b>おじいさん</b></span>と<span style="color:#CA3659;"><b>おばあさん</b></span>が住んでいました。おじいさんは<b>山へしば刈り</b>に、おばあさんは<b>川へ洗濯</b>に行きました。

 

<span style="font-size:20px;">おばあさんが川で洗濯をしていると<b>大きな桃</b>が流れてきました。</span>
</div>

 

サイト生成時自動的にPタグが付与される

<div style="color:#000000;background-color:#EDF5F8;border:solid 1px #4473B1;padding:18px;" class="usrbox">
<p>むかし、むかし、ある所に<span style="color:#4473B1;"><b>おじいさん</b></span>と<span style="color:#CA3659;"><b>おばあさん</b></span>が住んでいました。おじいさんは<b>山へしば刈り</b>に、おばあさんは<b>川へ洗濯</b>に行きました。</p>
<p>&nbsp;</p>
<p><span style="font-size:20px;">おばあさんが川で洗濯をしていると<b>大きな桃</b>が流れてきました。</span></p>
</div>

 

 

 

2025/06/01 14:41:54