シンプルライフできるかな?

ダメ人間だが、人生それなりに楽しい♪ 家の片付けが最大の目標。。。

「alt属性」って何?SEOに有効な画像テキスト情報を利用しよう

にゃん吉です。

今回のお話は「alt属性」についてです。
ワードプレス運営をされていると「alt属性」について目にされることも多いのではないでしょうか。

 

 
最近GoogleサーチコンソールからAMPの警告が来たのをキッカケに、プラグイン「Imagify Image Optimizer」で画像圧縮をして、Google推奨の1200pxの画像設定をしました。
その手順です。
 

そこで前々から気になっていた「alt属性」の対策もしてしまおうと設定をしましたので、その手順を明記しておきます。

ワードプレスとはてなブログの両方での設定方法を明記しますので、対策をされていない方はぜひしてみてください。
 
▽目次です▽
 

そもそも「alt属性」って何?

 ワードプレス運営をされているとたまに目にする「alt属性」のいう単語。
これは利用している画像に説明をつけることを言うようです。

Wikipediaではこのように明記されてます。
alt属性(英語: alt attribute)はHTMLとXHTMLで使われるHTML属性(英語版)。HTML要素が表示できないときに代わりにレンダリングされるテキスト(いわゆる代替テキスト、英語: alt text)を指定する。
ウェブページを読み上げるスクリーンリーダーがAlt属性を読み上げることで、ウェブページの内容を聞いている利用者(例えば視覚障害者など)もそのHTML要素の内容を理解できる。画像のアクセシビリティを向上するためにalt属性を指定すべきだが、alt属性には必ずしもテキストを指定する必要はなく、alt=のように何も指定しないこともできる。
引用元:「alt属性」のWikipedia

 

 
ちょっとわかりにくいので具体例をあげて簡単に説明をします。
「サーティンワンでポケモンアイス」を食べた記事を作成しました。
この記事にある写真はすべてサーティーワンのアイスを自分で食べた画像になります。
画像は記事の内容の補足であるのがわかりますので、その画像に「ポケモンアイスの画像」ということを知らせることができます。

簡単にいえば、記事内で使用している画像をきちんと説明してあげることでSEO対策に繋がるよ、という話になります。
 
 

SEO対策になるのであれば「alt属性」を利用しよう!

f:id:nukonyan131:20190906025815j:plain



どうせ画像をアップするのであれば、「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="ピカチュウアイス">」と明記するものだとばかり思ってましたけど、必要なのは説明だけでした(笑)。

画像をワードプレスにアップロードし、画像の詳細を開きます。
「添付ファイルの詳細」が表示されます。

ワードプレスのalt属性設定

①代替テキスト:画像の説明を入力。この画像の場合は「サーティーワンのピカチュウアイス」にしました。

②タイトル:これはアップロード前に画像につけた名前がそのまま反映されます。ここで変更しても画像のURLはアップロード時につけた名前になるので注意してください。気になる場合は名前を変えてアップロードし直すしかないです。
 
私が出来なかったのは、①の代替テキスト部分に「<img src="画像のURL" alt="画像の説明">」を入れてしまったからです。イケてないったらない(笑)。
ただ単に日本語で説明すればいいだけでした。

もうビックリでした。
みんな同じような説明ばかりだったので、これを解決するのに半日は無駄にしましたよ。
 
 
 

はてなブログでの「alt属性」を設定

はてなブログでの「alt属性」はこうなります。
 

はてなブログのalt属性設定


画像投稿を開き、画像を選択。
そして「貼り付け時に詳細を設定する」にチェックを入れて、「選択した写真を貼り付け」をクリック。
 

はてなブログのalt属性設定


「画像にalt属性を指定する(上級者向け)」にチェックを入れ、「記事編集画面に貼り付ける」をクリックで画像投稿します。

これでしっかり画像に「alt属性」を設定できました。
サムネイル画像に選ぶ画像は特に「alt属性」を設定をするようにしましょう。
 
 

画像の説明は短く明確に!

代替テキストの部分は、画像の説明をするのですが、あまり長くいろんな情報入れすぎるのはよくないようです。

SEOを有効にするには、上記のように短くわかりやすいのがいいようです。


重要なのは、キーワードと画像の意味を明確にすることです。
単に画像の説明だけではなく、ちゃんとキーワードを盛り込みましょう。


そのためであれば、きちんと細かく説明した方が有効な場合もありますから、適宜設定すると良いと思います。
臨機応変にですね。

 
◆◇◆ ◆◇◆

過去の画像を全部となると時間もかかるでしょうから、リライトついでにやるといいと思います。
私はするかわかりませんが(笑)。

皆さんもぜひ画像に「alt属性」を設定をしてみてください。
 
▽こちらの記事もどうぞ▽