こんにちは、りゅうのすけ(@k_r001)です。
この記事では、ブログのalt属性の意味と設定方法についてまとめました。
こういった方は、読むことをおすすめします。
テキストエディターを使うメリット
テキストエディターを使うメリットとしては、中のコードを編集できることにあります。
コードを編集して追加することで、よくない部分などを消して最適な設定というものができるようになります。
余計なコードが多いサイトよりも、無駄なコードを省いたサイトの方が表示速度が早いです。
今回は、テキスト入力の中でも画像のコードを最適にするための編集方法についてまとめました。
画像のコード
まずは何もしないで、画像を追加した場合について見てみましょう。
<img src="画像URL" alt="代替テキスト" title="タイトル" width="横幅" height="縦幅" class="aligncenter size-full wp-image-9094" />
<img src="画像URL" alt="代替テキスト" />
かなりスッキリします。
altに関しては、事前に代替テキストを入力しておけば、自動で出力されます。
画像のソースコードの意味
画像のコードのそれぞれの意味について解説していきます。
最初の「img」は「Image」の略称で、画像のコードという意味です。
- src=画像URL
- alt=代替テキスト
- title=タイトル
- width=画像の横幅
- height=画像の縦幅
- class＝中央に配置など設定
この中で必要なコードだけを残すと、「src=画像URL」、「alt=代替テキスト」だけになります。
ブログの画像でSEO対策
画像でSEO対策するための注意点は、2点だけです。
- ファイル名を整理する。
- alt属性を設定する。
それぞれ意識的に設定しておきましょう。
ファイル名の整理
ファイルは意味がわかるものにしておきましょう。
ファイル名の意味がわからないとGoogleのクローラーが、記事との関連性を認識することができません。
何回か使うかもしれない画像はそこまで意識しなくてもいいかもしれないです。
ですが、特定の場所でしか使わない画像はしっかり画像名までこだわっておきましょう。
画像のalt属性
alt属性は、Googleのクローラーに画像を文字として読み込ませるための設定です。
画像の読み込みが遅い場合や、リンクエラーになっている時の代替テキストとして表示されます。
<img src="画像URL" alt="代替テキスト" />
おすすめは、その記事で狙うワードを入力しましょう。
複数使うことで上位表示されやすくなります。
事前にali属性を設定する方法
テキストエディター以外でali属性を設定するためには、メディアを開きます。
- メディアでalt属性を設定したい画像を選択する。
- 代替テキストに設定したいワードを入力
- 投稿に挿入する。
これで設定完了です。
この方法でalt属性を設定するのであれば、投稿に挿入する前にalt属性を設定しておきましょう。
ギャラリーなどを作る時は、この代替テキストでalt属性を設定する必要があります。
【プラグイン無し】WordPressのフォトギャラリー作成方法
まとめ
alt属性を設定しておくことで、Googleのクローラーが画像をテキストとして読み込んでくれます。
他にも余計なコードを省くことで最適化できるので、テキストエディターを使っている方は参考にしてください。
最後まで見ていただき、ありがとうございました。
