やぁ、今アクセス数が伸びているため、なんとか記事投稿頻度を上げたいみやびプリンです。
そんなことより本題な。
とは言っても、表記の通り。
従来では、画像のalt属性はテキストとして認識されていたが、
ここ近年ではそうはいかなくなった。
例えば下記。
<h1><img src="images/ttl.svg" alt="記事のタイトル"></h1>
なんてパターン。
以前では、十分、画像文字のalt属性に指定された文字列が、h1要素のテキストとして認識されていた。
よって、Webサイトの表現とテキストによるSEOが両立することが十分可能であった。
しかし、ここ近年では、画像のalt属性は、テキストと比較して格段にページの内容とはされなくなった。
その証拠と言ってはなんだが、
当初、我がサイトは、サイトリンクが表示されるなどSEO力に自慢があったサイトだったのだが、
ある時から、どんなに各所に修正を施しても、サイトリンクが表示されない事態が何年も続いた。
そんな中、職場の後輩より、自社で運営しているサイトのSEO改善案として、
画像文字の近行に、同内容のテキストを記述するというものが挙がった。
ようは、下記のようにする。
<h1 class="scr__wrap"> <span class="scr">記事のタイトル</span> <img src="images/ttl.svg" alt="記事のタイトル" aria-hidden="true"> </h1>
.scr__wrap { position: relative; }
.scr {
border-width: 0;
display: block;
clip: rect(0, 0, 0, 0);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
ようは、画像文字のすぐそばで、テキストとして記述し、CSSでほとんど見えないようにする、ということをしているわけだ。
imgに、aria-hidden="true"を付与しているのは、入れないと、同じ内容のものが重複してスクリーンリーダーに読み上げられてしまうのを防ぐためだ。
職場で運用しているサイトが、SEO力が高まったのはもとより、
我がサイトでも実施したところ、サイトリンクが表示されるようになったり、今までのSEO施策が、よりロボットに理解されやすいものとなっていると実感している。
そう、実はこの手法、それこそ数年前の、Appleの公式サイトが実施していたのだ。
（現在は、全てWebフォントにて実装しており、上記のような手法は使われていない）
当初は、画像文字であってもalt属性で十分だしそこまでやる必要あるか？と思っていたのだが、
Appleはこのことを予見していたのか・・・、はたまたGoogleのドキュメントを研鑽し抜いていたのか・・・。
ちなみに、画像のものと同じ内容である限り、テキストをCSSで隠すことはスパムにはならない。
何年か前、Google公式より、それやっちゃうと技術の否定になるから、過度に差異がある場合を除き、ペナルティを課さないと明言がされている。
ソースはわかりませんすみません。うろ覚え。
とかく、この施策は超重要と言える。
とくに、デザイン的なものを売りにしているようなWebサイトは、とかく画像文字を使わざるをえない場合が多い。
そういった時に、ページの内容や、ヘディング要素、h1〜h6にテキストが存在しない的な認識をされないよう、
本記事の施策を施すといい。
さて、次もSEO記事でこうかな。
コメントする