ふと思い立って【ぷちSEO】なるシリーズを書いてみることにしました。
みんな大好きSEO（＝検索エンジン最適化）。
でもちゃんとやろうとすると結構大変。
SEOのプロがいてビジネスが成り立っている程度には、専門的な知識や相応の労力が必要になってくる領域です。
でも、SEOの基本的な考え方はとてもシンプル。
一昔前は小手先のテクニックが横行したりもしましたが、今は検索アルゴリズムの進化により、純粋にユーザーの役に立つ高品質なコンテンツが検索上位に表示されるようになりました。
できることからコツコツと改良を加えていくことも、立派なSEO対策になるんですね。
そこで、本記事では初心者さん向けに、誰でもできるちょっとしたSEO対策をご紹介していきます。
コンテンツの質やコードの質をちょっぴりアップさせる、ワンポイントアドバイス的な感じです。
ごく小さな改良なので、実行したらすぐに劇的な効果が上がる！なんてことはありませんが、サイトやページの品質は確実に向上します。
塵も積もれば山となる精神で、少しずつレベルを上げていきましょう。
なお、コンテンツの設計やライティングから抜本的に見直す！というような本格的な対策ではないため、劇的な効果を求めている方はその道のプロをお訪ねください。
一応シリーズ化する予定ですが、不定期連載のため、まったり気長に構えていただけると幸いです。
画像に代替テキストを入れる
というわけで、第一回目は「画像に代替テキストを入れる」ことについて。
サイトの見た目に関わってこないことからしばしば軽視されがちな部分ですが、だからこそここを押さえておくと、コードの品質がぐっとアップしますよ。
まずは、imgタグの書き方からおさらいしましょう。
<img src="画像のパス" alt="代替テキスト" width="横幅" height="縦幅" />
おおよそこの辺が必須の属性といえるでしょう。
widthとheightはSEOには関係なく、ユーザーエクスペリエンス（要するに使いやすさ）的にほぼ必須の属性となっています。
今回話題にしたいのは↓この部分。
alt="代替テキスト"
alt属性には、画像の内容を表す簡潔な説明を記述します。
たとえばこの画像なら「砂時計とグラフ」、
この画像なら「手のひらの中の白いハート」といった具合です。
代替テキストは、なんらかの理由で画像が読み込まれなかった場合に画像の代わりに表示されたり、目の不自由な方向けの音声読み上げソフトで読まれたりします。
また、Googleなどの検索エンジンもこの文言を読み取っています。
ロボットは人間と同じように画像自体を閲覧することはできないため、代替テキストを参考にするというわけですね。
つまり、代替テキストをきちんと記述すれば、ユーザビリティの向上と検索エンジンの最適化、いっぺんにふたつの良い効果を得られます。
この一手間を惜しまず、質の良いコンテンツやコードを作っていきましょう！
ただし、リストの行頭アイコンなど、コンテンツとして意味を持たない装飾の類には代替テキストを記述する必要はありません。
空文字、もしくはalt属性自体を記述しないという形で対応しましょう。
せっかくなのでさらに改良してみよう
ついでにもう二つほど、ポイントをご紹介しておきます。
一つ目はsrc属性について。
画像のファイル名も、機械的な意味不明な文字列ではなく、「iced-milk-tea.jpg」のようなきちんとした名前にするとよりよい効果が見込めます。
（お恥ずかしながら、うちのブログはあんまり厳密にやってなかったりしますが… キャー！）
二つ目はtitle属性について。
これは上で書いた必須の属性の中には入っていませんでしたよね。
それは、特段必要がなければ書かなくてよいとされているからです。
title属性に記述したテキストは、PCで閲覧した際、画像の上にカーソルをのせるとツールチップとして表示されます。
それがちょっとダサいというか… そもそも代替テキストがあれば事足りるよね、という話だったりします。
しかも、alt属性とtitle属性に同じテキストを記述すると、キーワードの意図的な反復とみなされ、ページの評価が落ちる原因にもなるそうです。
そこまでして書く必要があるだろうか…
ということで、title属性は基本的には書かなくてOKと考えるとよいでしょう。
＊＊＊
以上、第一回【ぷちSEO】のコーナーでした。
塵も積もれば山となるの精神で、今後もページやサイトをよりよく育てていきましょう！
