にゃん吉です。
今回のお話は「alt属性」についてです。
ワードプレス運営をされていると「alt属性」について目にされることも多いのではないでしょうか。
最近GoogleサーチコンソールからAMPの警告が来たのをキッカケに、プラグイン「Imagify Image Optimizer」で画像圧縮をして、Google推奨の1200pxの画像設定をしました。
その手順です。
その手順です。
そこで前々から気になっていた「alt属性」の対策もしてしまおうと設定をしましたので、その手順を明記しておきます。
ワードプレスとはてなブログの両方での設定方法を明記しますので、対策をされていない方はぜひしてみてください。
▽目次です▽
- そもそも「alt属性」って何？
- SEO対策になるのであれば「alt属性」を利用しよう！
- 「alt属性」を設定しようにも上手くいかなかった。。。
- ワードプレスでの「alt属性」を設定
- はてなブログでの「alt属性」を設定
- 画像の説明は短く明確に！
そもそも「alt属性」って何？
ワードプレス運営をされているとたまに目にする「alt属性」のいう単語。
これは利用している画像に説明をつけることを言うようです。
Wikipediaではこのように明記されてます。
▽
alt属性（英語: alt attribute）はHTMLとXHTMLで使われるHTML属性（英語版）。HTML要素が表示できないときに代わりにレンダリングされるテキスト（いわゆる代替テキスト、英語: alt text）を指定する。ウェブページを読み上げるスクリーンリーダーがAlt属性を読み上げることで、ウェブページの内容を聞いている利用者（例えば視覚障害者など）もそのHTML要素の内容を理解できる。画像のアクセシビリティを向上するためにalt属性を指定すべきだが、alt属性には必ずしもテキストを指定する必要はなく、alt=のように何も指定しないこともできる。引用元：「alt属性」のWikipedia
ちょっとわかりにくいので具体例をあげて簡単に説明をします。
▽
▽
「サーティンワンでポケモンアイス」を食べた記事を作成しました。
この記事にある写真はすべてサーティーワンのアイスを自分で食べた画像になります。
画像は記事の内容の補足であるのがわかりますので、その画像に「ポケモンアイスの画像」ということを知らせることができます。
この記事にある写真はすべてサーティーワンのアイスを自分で食べた画像になります。
画像は記事の内容の補足であるのがわかりますので、その画像に「ポケモンアイスの画像」ということを知らせることができます。
簡単にいえば、記事内で使用している画像をきちんと説明してあげることでSEO対策に繋がるよ、という話になります。
SEO対策になるのであれば「alt属性」を利用しよう！
どうせ画像をアップするのであれば、「alt属性」を使用することでSEO対策になります、
ただし、あくまでも気休め程度なので、「alt属性」を利用したからといって、劇的にSEO的に有利になるというわけではありません。
ここは勘違いしないで欲しいです。
ただ何もしないよりはした方がいいよ、程度ですけど、ベターザンナッシング！（Better than Noting！）
要は「しないよりはマシ」ってことです。
「alt属性」を設定しようにも上手くいかなかった。。。
「alt属性」の設定の仕方をネットで検索をしましたけど、全然うまくいきませんでした。
どのサイトを見ても、「<img src="画像のURL" alt="画像の説明">」と入力すれば大丈夫と書かれているのですが、これが全然ダメなのです。
たとえば、上記の例でいえば、「<img src="画像のURL（画像に指定されたパーマリンク）" alt="ピカチュウアイス">」と明記してもはじかれてしまいます。
なにこれ。。。
ということで途方にくれてましたけど、ようやくわかりました！
ワードプレスでの「alt属性」を設定
どのサイトをみても、「<img src="画像のURL" alt="画像の説明">」とあるので、「<img src="画像のURL（画像に指定されたパーマリンク）" alt="ピカチュウアイス">」と明記するものだとばかり思ってましたけど、必要なのは説明だけでした（笑）。
画像をワードプレスにアップロードし、画像の詳細を開きます。
「添付ファイルの詳細」が表示されます。
▽
①代替テキスト：画像の説明を入力。この画像の場合は「サーティーワンのピカチュウアイス」にしました。
②タイトル：これはアップロード前に画像につけた名前がそのまま反映されます。ここで変更しても画像のURLはアップロード時につけた名前になるので注意してください。気になる場合は名前を変えてアップロードし直すしかないです。
私が出来なかったのは、①の代替テキスト部分に「<img src="画像のURL" alt="画像の説明">」を入れてしまったからです。イケてないったらない（笑）。
ただ単に日本語で説明すればいいだけでした。
ただ単に日本語で説明すればいいだけでした。
もうビックリでした。
みんな同じような説明ばかりだったので、これを解決するのに半日は無駄にしましたよ。
はてなブログでの「alt属性」を設定
はてなブログでの「alt属性」はこうなります。
▽
▽
画像投稿を開き、画像を選択。
そして「貼り付け時に詳細を設定する」にチェックを入れて、「選択した写真を貼り付け」をクリック。
▽
「画像にalt属性を指定する（上級者向け）」にチェックを入れ、「記事編集画面に貼り付ける」をクリックで画像投稿します。
これでしっかり画像に「alt属性」を設定できました。
サムネイル画像に選ぶ画像は特に「alt属性」を設定をするようにしましょう。
画像の説明は短く明確に！
代替テキストの部分は、画像の説明をするのですが、あまり長くいろんな情報入れすぎるのはよくないようです。
SEOを有効にするには、上記のように短くわかりやすいのがいいようです。
重要なのは、キーワードと画像の意味を明確にすることです。
単に画像の説明だけではなく、ちゃんとキーワードを盛り込みましょう。
そのためであれば、きちんと細かく説明した方が有効な場合もありますから、適宜設定すると良いと思います。
臨機応変にですね。
◆◇◆ ◆◇◆
過去の画像を全部となると時間もかかるでしょうから、リライトついでにやるといいと思います。
私はするかわかりませんが（笑）。
皆さんもぜひ画像に「alt属性」を設定をしてみてください。
▽こちらの記事もどうぞ▽
