そのhtml、ホントに要りますか?

投稿 2018年11月25日
0
webのあれこれ
HTMLトラブル対処初心者向けSEO

毎回同じことを何度も書いて恐縮ですが、「ブログを楽しく更新したいだけ。SEOとかhtml構文とか言われてもちょっと…。」
という方は特に何もしなくて良いと思います。「何もしない」というのは 記事内でhtmlを極力使わない という意味です。使うとしてもせいぜいFC2ブログエディターのツールぐらいでしょうか。

で、ズバリ言うとですね、FC2ブログというのはhtml使い放題な環境下にあるわけなんですが、無理してhtmlを使わなくて良い というススメです(笑)
ものすごく根本的なところを突きますので反感もあるかと思いますが、まぁお時間があればお付き合いください。

記事内でhtmlを使う理由

個人的な理由はそれこそ千差万別あるとは思いますが、本来の目的は「テキストに意味を与える」ことです。
コンピュータは人間の言語を理解できません。ここで言う「コンピュータ」とはブラウザ、クローラーなどのことですが、例えば「音楽と平和について」と書いたところでコンピュータは「ほぅ。音楽と平和に関連性があるのかな?音楽のジャンルは何のことかな?」とかそんなことは考えない。考えられるはずもありません。
コンピュータ的には「何かが書いてある」ことしかわからないんですね。当たり前ですが。
その書いてある「何か」が何の役割を果たすのか。例えば <h1>音楽と平和について</h1> とマークアップされていればそれが「見出し」であると理解します。
見出しの中身はわからないですよ。人間の言葉ですからわかりはしませんが、そのテキストが「見出し」であるということは理解するわけですね。
そして「見出し」があれば後続の文章はその見出しに見合う内容が記されるであろう、というところまで理解するはずです。その内容は不明だとしても。

ですから 構造 ですよね。ページ全体にいろんな文字が書いてあり、その特定部位について「見出し」「ナビゲーション」「段落」など、htmlで意味を与えることで構造が明確になってくるわけです。
構造がコンピュータにとってわかりやすいものであるならば、人間にとってももわかりやすくなるはずだ、と。

htmlというのはそのために使います。ですから htmlは装飾目的や見た目の操作に使うものではない ということです。
例えばよく利用される ul要素ol要素 など。ul要素は「順不同リスト」、ol要素は「順序に意味のあるリスト」という定義ですが、大事なのは「リストである」という点であって、ul要素を使う理由が「テキストの前にマーカーが付くから」だとしたら使う意義があまり無いわけなんです。
ただマーカーを付けたいというだけならばul, ol要素でマークアップする必要はどこにもありません。
・あいうえお
・かきくけこ

と、こんな風にテキストの前にミドルドット(・)を打てば良いだけの話です。見た目にはul要素と何ら変わりありません。

敢えてhtmlタグを利用する、というのは例えばアフィリエイトをしていてアクセス数を大事にしている、だとか、常に検索順の上位を目指しているだとか、そういう方が使えば良いのであって、自身がそれらに該当しないのであれば無理に使う必要はどこにもありません。寧ろ使わない方が良い。
何故ならhtmlというのは正しいルールで書かないと、優位になるどころか逆に大失態を招くことがあるからです。

例に出したul要素で言うと、そのul要素が正しくマークアップされていなければ、コンピュータ的には「なにこれ?は?おかしいだろ。続きの構造がわけわかんなくなっちゃうじゃねーかよ。」となりますが、単にドットとテキストであれば何も悪影響はありません。
そして悲しいお報せですが、Googleのクローラーは 構造が意味不明すぎると解釈を辞める・破棄してしまう ことがあります(後述)

で、たぶんコンピュータにとって一番困るのは「どこまで続いているのかわからない」パターンだと思うんですね。
例えば

<h1>音楽と平和について
歴史的事実を見ても音楽と平和には深い関わりがあります。音楽とは人の心を繋ぐツールです。

上記は見出しの終了タグが抜け落ちているという構文エラーですが、こうなるとコンピュータはどこまでが見出しなのか理解できません。あるいは書いてある文章全てが見出しと解釈することになります。
コンピュータは「音楽と平和について歴史的事実を見ても音楽と平和には深い関わりがあります。音楽とは人の心を繋ぐツールです。」を見出しだと思ってしまいますよね。サンプル以上にどんなに文章が長くともそう解釈するすることになるでしょう。

<h1>音楽と平和について</h1>
歴史的事実を見ても音楽と平和には深い関わりがあります。音楽とは人の心を繋ぐツールです。

こうして正しくマークアップされていれば「音楽と平和について」が見出し、続く文章はその見出しに見合う内容が記されている、と正しく伝わります。

構文エラーの指摘というのは「崩れてますよ」「サイドメニューが下に落ちてますよ」と、とかく「見た目」の修正に捉えられがちですが、見た目が崩れていなくとも内部的に最も大事な「構造や意味」が壊れてしまうことこそが本来は最も重要視されるべき点です。
そして見た目に関係しない構文エラーを無視できるのであれば、それはもう元々htmlを使う必要が無いとも言えます。

使うなら正しく使う、使わないなら使わない。
初心者の自覚が有る方は「使わない」という方針でも全然良いと思いますよ。その方が安全です。
と、ここまでが そのhtml、ホントに必要? という再考を促す章。

装飾目的ならば迷わずdiv要素を選択

とはいえ記事内で何らかの「装飾」をしたい場合だってありますよね。装飾はCSSの仕事ですが、CSSを施すには対象となるhtml要素が必ず必要です。そのhtml側をどう書くか、については常に <div> を使うことをおすすめします。
div要素というのはhtml要素の中でも「特に意味を持たない」という希少なものです。故に万能とも言えます。
意味を持ちませんので開始タグと終了タグさえしっかり書いておけばコンピュータにはほぼ無視(という言い方は乱暴か)されるというか、重要視されませんので装飾目的にはうってつけ。

例えばよく用いられる「見出装飾」など。どこかのサイトさんからhtmlとCSSのソースを拾ってきて使う場合などがありますよね。
もしその時にあなたが「見出しの位がわからない… ( ̄∀ ̄;)」となったならば、無理に <hx> を使わずに <div> に変えたらよろしいよ? (´・ェ・`)
「装飾」を目的にする方というのは、「ここをこうしたいなぁ」という一部分に集中して考えている場合が多いんです。ですがhtmlは全体を見て構成しなければいけません。見出しひとつとっても序列があるわけですから、「そういうの無理ー わからーん ( ̄∀ ̄;)」という場合は無理はしない。その方が良い。

明確な定義を持つhtml要素をうろ覚えや雰囲気だけで無理に使うことは何かしらのミス・構文エラーなどが生じた場合に 大事故 になる可能性を常にはらんでいる、という点をお忘れなく。

勘違いされていそうなhtml要素の代表「p」と「ul」

p要素

pタグ とは…
文章を囲うもの
一定のまとまった文章つまり「段落」を囲うもの

開始タグ<p> と終了タグ </p> の用途を「文章を囲う」ために利用すると思っている方が多いようです。
(囲まれたテキスト群全体を指して「p要素」と言います)
それを間違いだと断罪はしませんが、単に文章を囲うためにpタグがあるのではなく、例えば長い長い文章があったとき、ある一定のまとまりに分けることが可能な場合が多いですよね。

最近めっきり寒くなりました。寒冷前線も近づいているようなのでみなさん体調には注意しましょうね。我が家でもストーブの準備を始めましたよ。

さて、先回のお話の続きです.......

「最近めっきり」から「始めましたよ」となり、「さて」で話題の転換が入りますのでこれは分けることが出来る文章です。
「最近めっきり」から「始めましたよ」が1つのp要素、「さて」以降がまた1つのp要素、とマークアップするのが適切です。

ul要素

ulタグ とは…
マーカーを出すために囲う
順不同のリストを囲い、副次的にマーカーが表示される

マーカー表示は目的ではなく結果です。「マーカーを意図的に非表示にするがそれでもul要素としてマークアップする」のは「順不同リスト」の定義が必要だからです。リストであることをコンピュータに知らせたいからマーカーなしでもulでマークアップするんですね。ですからマーカーは目的ではない。

この「マーカーつけるためにul」は結構該当者がいらっしゃるんじゃないでしょうか。全く同じ内容だとしてもマーカーが要るときはul、マーカーが要らない場合はプレーンテキストで書いてる、という方。

ulやol要素はGoogleクローラーに重要視されているはずです。特にページ内リンクが含まれている場合ですね。具体的に言うと TOC(table of content, 見出し目次)などは検索結果でも重要な役割を持っています。
Googleにとって重要なものであり意図的に拾い上げようと努力しているものなのですから、htmlは正しく書かなければいけませんね。
でも「Googleとかどうでもいいかな (´・ェ・`)」という方はulもolも使わなくて良いんですよ。

クローラーが解釈を諦めてしまうhtml構文エラー

headの強制終了 などがこれにあたります。
Googleは結構諦めますよ(笑) 例えば時間のかかりすぎるJSなどはレンダリングを中断する、とか。

そしてhead内の構文エラーが発生した場合、エラー発生地点以降の内容を破棄する というのはよく知られていますが、どうもheadの内容をほぼ全て破棄しているようです。
head内はSEOの根幹・ページ構成の根幹を担う重要な記述がてんこ盛りなんですが、それらを破棄してしまう、と。

head情報に何かを追加する際は細心の注意を

head element (へっど えれめんと) 日本ではしばしば ヘッダ情報 という呼称が使われます。 htmlの中のこの部位はページを構成する基本的な文書の種類ですとか、htmlをきちんとhtmlとして正しく伝えるための情報を記しますのでとても重要です。 一般的にヘッダ情報内の要素は「目に見えるもの」「可視化されるもの」ではありませんので、人間のためというよりもむしろコンピュータのためのものとも言えるかと思います。 が...

初心者の自覚がある方はheadは触らないようにしてくださいね。
一般的なブログサービスで記事内でhtmlが自由に使えるところは結構ありますが、FC2のようにheadまでも自由にカスタマイズできるというのは日本国内でもかなり珍しいのではないかと思います。htmlのバージョンですら操作できてしまいます。
FC2以外の大手ブログサービスでは自由度を下げる代わりに事故発生率は抑えてあります。FC2ブログはほぼ完全フリーダム状態ですから大事故の可能性は常にありますよ。
他サービスではほぼhtml5で統一されていると思うんですが、FC2だといまだにhtml4やxhtmlテンプレートが使われていたりだとか。ここは自由度と引き換えの弊害のように思います。

よく見かけるp要素とul要素のミス

発生率激高。p要素とul要素の使用に心当たりのある方チェックされることをおすすめします。

ul要素内改行

<ul>
  <li>あいうえお</li>
  <li>かきくけこ</li>
  <li>さしすせそ</li>
</ul>

上記が本来あるべき形のul要素です。ですが この書き方をして良いのは記事編集ページで改行の扱いを「HTMLタグのみ」に設定している場合のみ です。
FC2ブログでは記事を書く際に「改行の扱い」というのを2種から選べますよね。ひとつが「自動」もうひとつが「HTMLタグのみ」です。

改行「自動」というのは例えhtmlソースであっても Enter/ Return キーが押された時点で <br> タグが不可視状態で追加されてしまいます。
改行「自動」で上記サンプルコードを書いた場合には以下のようなソースになります。

<ul><br>
  <li>あいうえお</li><br>
  <li>かきくけこ</li><br>
  <li>さしすせそ</li><br>
</ul>

<ul> の直後(直下)にはすぐに <li> が来る、というのが絶対ルールで、それ以外のいかなる要素も入れることはできません。ところが改行を「自動」に設定してしまうと上記のように改行タグが追加されることになります。
改行「自動」の場合には

<ul><li>あいうえお</li><li>かきくけこ</li><li>さしすせそ</li></ul>

こうして横に繋げて書かないとダメですよ。いかなるhtmlソースであっても絶対に途中でenterキーを押してはいけません。
特にul, olは親ulの直後に子のli、と厳格なルールがあるのですから常に意識するようにしてください。
<p><div> の直後はまぁ… <br> が入ってもエラーにはなりませんが「ヘンなhtml」にはなります。
これのときはやっちゃダメ、これのときはやっても良い、なんて選別していると覚える手間が増えるだけですから、改行「自動」の場合にはいかなるhtml内容であってもソースの途中でenterを押さない、と決めておくほうが良いですね。
当然ですが、どこかのサイトさんからコードを拾ってきたときでも同じです。
コード途中で改行されていたら取り除いて横に繋げて記してください。

ul, olなどのリストはクローラーが重視しているはず、と書きましたが、構造が壊れていたら拾ってもらえません。気をつけましょう。

FC2ブログで謎の空白行ができるのはソースの途中改行が原因です

FC2ブログの 旧投稿画面 をお使いの方向け記事です。 旧投稿画面には 改行の扱い を2種から選択できるようになってます。ひとつは「自動」もうひとつは「HTMLタグのみ」です。 htmlタグのみ設定を利用するのは恐らくhtml中級〜上級者でしょうから良いとして、初心者の方の大半は「自動」に指定してあるのではないかと思います。 記事内で何かしらのhtmlを用いる際、自動指定の場合にはソースコードの書き方に気をつけま...

あと蛇足ですがこういうのも多いですよ ↓

<ul>
  <div>タイトル</div>
  <li>あいうえお</li>
  <li>かきくけこ</li>
  <li>さしすせそ</li>
</ul>

ul の直後は必ず li です。上記サンプルはdiv要素がでしゃばってますが、pでもspanでもなんでも同じ。一律「入れちゃダメ」になります。どうしてもタイトルなどを付けたい場合には

<div>タイトル</div>
<ul>
  <li>あいうえお</li>
  <li>かきくけこ</li>
  <li>さしすせそ</li>
</ul>

こうして外に出してul要素から分離するようにします。ul要素の中には入れない、ということですね。

p要素内に入れ子不可の要素

<p>
あいうえおかきくけこ<br>
さしすせそたちつてと<br>
<span>abcdefg</span></br>
なにぬねのはひふへほ
</p>

上記はOKです。以下は構文エラー。

<p>
あいうえおかきくけこ<br>
さしすせそたちつてと
<div>abcdefg</div>
なにぬねのはひふへほ
</p>

p要素の中にdiv要素が含まれていますが、p要素の中にdisplay値blockの要素を入れることはできません
ちょっと説明が難しいのではしょりますと、p要素というのは実は使い方がとても難しく、入れ子出来る要素が非常に限られています。

  • 入れ子できる --- span, a, img, iframe, strong, svg, br, input など
  • 入れ子できない --- div, p, table, ul, ol, h など

入れ子できるのは古い言い方をすると「インライン要素」入れ子できないのは古い言い方をすると「ブロックレベル要素」です。
今風の言い方をすれば入れられるのは「display値がinline, inline-block(一部)のもの」入れられないのは「display値block」のもの。この表現も本来は正しくはなく、入れられるのは「フレージングコンテンツ」のみ、となるのですがますますワケワカメなことになると思いますのでここでは避けたいと思います(笑)
簡単かつ強引に言うと、文字と横に並べられるものと並ばないものとあるじゃないですか。画像や動画はテキストの横に並びますが、表は並んでくれないですよね。並ばないものはdisplay値がblockです。
p要素内に入れ子できるのは「横に並ぶもの」だけ、ということです。

画像をp要素にするかfigure要素にするか

画像のマークアップ についてです。 マークアップ = htmlなどによる文書構造の意味付け・定義付け 「日記を書いています」「日々の出来事を楽しく更新しています」という方は無理する必要はありません(と個人的に思う) 無理したら楽しいことが楽しくなくなる (´・ω・`) 例えば「記事内でTOC(table of content, 見出し目次)を利用している」だとか、「検索順位を意識している」といった方はhtmlタグを使いこなしている...

pタグを「文章を囲うため」だと思って使用していると、p要素の中にdivなどを入れてしまうことがありますね。
テキストを書いていて途中で装飾ボックスを使うのにdiv、みたいな感じで。

pタグというのは ブラウザの強制補完 が働く要素でもあります。これはul要素の子要素であるli要素なんかもそうなんですが、ここではスルーしてp要素の補完を説明します。
サンプルのエラーhtmlを再度。

<p>
あいうえおかきくけこ<br>
さしすせそたちつてと
<div>abcdefg</div>
なにぬねのはひふへほ
</p>

記事内にhtmlがこう書かれていればみなさんが目にするのもこの状態です。ですが ブラウザはこのように見ていません。以下の形に変更してしまいます。

<p>
あいうえおかきくけこ<br>
さしすせそたちつてと
</p>
<div>abcdefg</div>
なにぬねのはひふへほ
<p></p>

緑がブラウザによる強制補完です。これが正しい形だから勝手に直してしまう(笑)
なにぬねのはひふへほ
のテキストがp要素から完全に外されているのも見て取れるかと思います。予期していたp要素の終了は「なにぬねのはひふへほ」の直後ですが、それよりも前で終了タグが追加されて閉じていますよね。p要素の中にdiv要素を入れることはできませんので正しい解釈としては「p要素はdiv要素が始まる前に終了している」と判断され、終了タグが追加されています。
終了タグの自動追加で浮いてしまった最終のp要素終了タグは、直前に開始タグを追加することで「空っぽ」の状態で存在することになります。これは終了タグがはぐれて(stray end tag)しまわないための穴埋め的処置です。穴埋めしないとレイアウト大崩れです。
p要素もli要素も 終了タグを省略できる 要素で、終了タグを省略できる要素というのはこういう処置が行われることになってます。
以下は図解です。

p要素でマークアップした「つもり」(幻想)
現実

こうなってしまってはわざわざp要素にした意味が全く無いわけで。ぶっ壊れて意味不明な構造になるくらいならプレーンテキストにしたほうがなんぼかマシな気がします。

まとめ

単純ミスの場合は「ここ間違ってますよ。」「わぁホントだ。ありがとう。」で済むんですが、単純ミス・打ち間違いではなくそもそも理解して使っていない場合に私が言いたいのは 無理に使わんでもいい ということです。
だってブログサービス全般で見てもhtmlをしっかり使って書いてる人ってそんなに居ないですよ。システムが許さない場合もありますし、htmlを常に気にして書いてる人って少ない気がします。
それよりも誤字や脱字や誤情報を少なくする、だとかそういう方面に気を使う方がよほど有益ではないかなぁ、と思います。

p要素なんかでも、長文の中で何故か1箇所だけp要素になってる、とかだともうほとんど意義が無いですよね。p要素を使うなら記事内容全体でやらないと。
とにかく無理はしないほうが寧ろベターだと思います。

SEOに気を使いたい、という場合には 使いどころ・ルールをしっかり覚える というのが絶対条件で、なんとなくそれっぽく使えば良いというわけにはいきません。htmlというのはそういう性質です。
なので「htmlわけわからん!ムキー!」となるならば、使わずに文章構成などに時間を使った方が良いと私は思うのです。

htmlと見た目を切り離して考えられない人の方が多いようなので、エラー修正は見た目を修正するために行うのではないですよ(もちろんレイアウトが崩れることもありますが)、という点を今回は強調しておこうと思います(笑)
「レイアウト・見た目が崩れていなければ放置でも良いや」と考える人がとても多いのが現実ですが、そういうことではありません。
そして「htmlとかしんどい… (;ωq`)」という場合には思い切って使うのを辞めるという選択もアリだと個人的には思っています。
テンプレートの構造については製作者がそのあたりちゃんと考えて作っているはずですから、ユーザーは人間向けの文章を頑張る、というのが一番ではないでしょうか。

というわけで、エラーの修正云々の前に「htmlを使うか使わないか」の方針からもう一度考えたらどうよ?という記事でございました。

YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)

0 COMMENTS

There are no comments yet.

LEAVE A REPLY

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い
必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)