ブログやサイトを運営している皆さま。
htmlタグで取り消し線(打ち消し線)を記述する時、どうやって書いていますか?
無料ブログやWordPressの場合、ビジュアルエディタに画像のような取り消し線を出力する箇所が存在し、それを利用していると思いますが、実際のタグが何を吐き出しているのかは確認しておいた方が良いです。
実際のタグを見た際にstrikeタグを吐き出していた場合、非推奨なので他の方法で記述するべきなのですが、いくつかある方法全て検索エンジンからの捉えられ方が異なります。
SEO的に何が良いのか判断しつつ、適切な使い方をするためにそれぞれのタグの意味と使い方を解説します。
参考:htmlで下線を引くのにuタグはNG!spanタグかCSSで「text-decoration: underline;」で指定しよう
htmlタグで取り消し線を書くのにstrikeタグは非推奨!用途に応じて以下2通り(sタグは非推奨!)のやり方で記述しよう
「delタグ」を使う時は検索エンジンからSEO的に評価を下げたい時に使う
まず一つ目がdelタグ。
WordPressのプラグインを利用している当サイトで、取り消し線を利用する際に吐き出されているタグがこちらになります。
このタグは検索エンジンに「タグ内の情報が削除された情報であること」を伝えるものです。
取り消し線を書きたいけれども、検索エンジンからの評価は消したくない場合は使うべきではありません。
検索エンジンからの評価を下げたくない時は、spanタグかCSSで「text-decoration: line-through;」と記述する
取り消し線は単なる文字の装飾ですよ!検索エンジンからは評価下げたくないよ!という場合もあります。
その際は、<span style=”text-decoration: line-through”>~</span>と記述するか、htmlでclassかidを指定してCSSにて上記を記述しましょう。
そうすることで、検索エンジンからタグで囲まれた部分の評価を落とすことなく取り消し線が書けます。
「sタグ」は検索エンジンに”打ち消し線(取り消し線)を引く(HTML4.01まで)“or”古い情報である(HTML5)“を伝えるため、基本的に”非推奨“な書き方
最後に非推奨のやり方ですが、sタグでも取り消し線が書けます。
が、HTML4.01と最新のHTML5で解釈が異なるため、書き方としては非推奨です。
無料ブログだと修正が難しいかもしれませんが、WordPressであれば「Search Regex」のようなサイト内の文字を一括で置き換えるプラグインもありますので、これを機に変更するのも良いでしょう。
僕はこの本を読んでHTML/CSSの知識を身に着けていますが、そもそもプログラミングができる人の隣で勉強する方が100&挫折しにくいのは間違いないかもしれません。