HTML5で文字に取り消し線を引く場合、delタグはSEO的にテキストの評価を下げる効果がある
HTML5でテキストに取り消し線を引きたい場合、del要素を使用するかCSSで指定するかの２通りしかありません。
実はこの２つは曲者で、delタグの場合囲んだテキストの検索エンジンからの評価を下げることが出来ます。(CSSで指定した場合、文字の装飾を行っているだけなのでそのような効果はありません。)
そのため、文章中で取り消し線をよく使う人でdel要素を使っている人は、知らず知らずのうちに文章全体の評価を下げている可能性があります。
両者の正しい使い分けを覚えるため、実際にコードを書いて表示される内容も確認してみました。
https://reviewlog.info/html5-mark/HTML5で取り消し線を引く場合、内容が古くなり検索エンジンの評価を下げたい&ユーザーに変更の旨を残したい場合はdel要素を使う
<meta charset="UTF-8"> <p>SMAPは<del>現役のアイドル</del>2016年で解散する</p> <p>SMAPは<span style="text-decoration:line-through;">現役のアイドル</span>2016年で解散する</p>
どちらも表示上は全く同じなのですが、上のdel要素は検索エンジンから見ると重要度の低い文字列と解釈されているので注意しましょう。
del要素はcite属性で変更を説明するURLを、datetime属性で変更日時を指定することが出来る
del要素は、ブラウザや検索エンジンに内容を変更した説明の記述されたURLや変更日時を指定することが出来ます。
<p>SMAPは<del cite="http://news.yahoo.co.jp/" datetime="2016-12-31T23:59Z">現役のアイドル</del>2016年で解散する</p>
SMAPの解散日時を検索エンジンに伝えることだって可能です。
また、ソース元のYahoo!ニュースを示すことも出来です。
覚えておいて欲しいのは、del要素の乱用はSEO的に重要度を下げるので、あまりよろしくはないことだったりします。
