altタグにキーワードを表示させて、SEOを改善しようと考えたことはありませんか？
画像検索での流入や、記事全体のSEOを少しでも強化したい時に思いつくテクニックのひとつですよね。
「altタグ」とは、HTMLコードの中で画像に「代替テキスト（Alternative Text）」を付け加えるタグのことを指します。このタグに入力されたテキストは、画像が表示できない時に表示される文字として使用されます。加えて、altタグは検索エンジンにも画像の内容を伝える役割を持っているため、SEO対策としても有効です。
そう考えると、まず「便利そうなプラグインを使えば簡単に設定できるかも」と思いつくのが自然な流れでしょう。実際、私もまずは無料のSEOプラグインをいくつか試してみました。しかし、いざ使おうとすると無料版ではaltタグ設定の機能が限られていたり、肝心な部分が有料プランにしか含まれていなかったり…。結果的に、「時間をかけたのに思ったほど成果が出ない」という状況に陥ってしまいました。
「これだ！」というプラグインに出会えず、「出来ないなら自分でコードを設定して自分の思ったように出来ないか」と思うようになりました。
自分ではコードの知識が無いので、チャットGPTに質問しコードを教えてもらいました。そのコードをワードプレス側に設定し自動で「カテゴリ」と「記事タイトル」がaltタグになるようにしようと思い立ちました。
その設定方法や注意点などを解説していきます。
1. SEOにaltタグは本当に有効？その基本と役割
altタグ（代替テキスト）は、画像の内容を説明するためにHTML内で使われるタグで、画像が表示されないときの補完やSEO効果を高めるために重要な役割を担っています。
このタグは、画像が表示できない場合に、ユーザーに画像の内容をテキストで伝える手段として使われるだけでなく、検索エンジンに対してもその画像がどのような内容を持つのかを知らせる役目を果たします。
特に、altタグはSEO（検索エンジン最適化）の観点からも非常に有効です。検索エンジンは画像の内容そのものを直接理解することはできません。そこで、altタグのテキスト情報を頼りに、検索エンジンが画像の内容を把握し、どのような検索キーワードに関連するのかを判断します。そのため、altタグを適切に使うことで、画像検索からの流入や、ページ全体の評価が向上する可能性があります。
1.1 altタグの役割3選！！
altタグに適切なキーワードを入れておくと、Googleなどの画像検索でユーザーがそのキーワードで検索した際に、画像が表示されやすくなります。
たとえば、「altタグ設定の仕方」の画像に「altタグ設定」といったキーワードを含めてaltタグを設定すると、画像検索で「altタグ設定の仕方」を検索したユーザーがその画像を見つけやすくなるわけです。
ユーザーがWebページを閲覧しているときに、ネットワークエラーや画像の読み込み不良が起きることがあります。このような場合、altタグに入力した内容が表示され、画像がどんなものであったかを伝えます。また、視覚障がいのあるユーザーがスクリーンリーダーでWebページを閲覧する場合にも、このaltタグが読み上げられるため、Webサイトのアクセシビリティ向上にも役立っています。
検索エンジンは、今のところ画像の中身を直接理解することができません。そのため、altタグにテキストで画像の内容を具体的に書くことで、「この画像は○○に関するものだ」と検索エンジンに伝えることができます。これにより、ページ全体の評価や画像検索での表示が向上する可能性があります。
また検索結果に画像が表示される事があると思いますが、その時にも役に立ちます。
altタグ、初めて聞いた人もいるかもしれませんが、画像の説明書みたいなものですね。無いよりはあった方が良いのでぜひ設定していきましょう😄
2. altタグをどう書くべきか？具体的な例２つと注意点
2.1 altタグのキーワード設定のコツ：自然な表現で効果的に
altタグには、画像の内容を簡潔に説明しながら、関連するキーワードを適切に入れることが重要です。あなたも、画像にaltタグをつけるときに「キーワードをたくさん入れれば入れるほどSEO効果が高まるのでは？」と考えたことがあるかもしれません。でも、実はキーワードの詰め込みすぎは逆効果になりがちです。無理にキーワードを入れると不自然な文章になり、検索エンジンに「不自然な操作をしている」と判断されてしまう可能性があるからです。
キーワードを入れるべきか迷ったときの具体例
altタグはあくまでも「この画像が何を表しているのか」をシンプルに伝えるものです。たとえば、「家で簡単にできるペットボトルを使ったトレーニング方法」という画像がある場合、以下のようなaltタグ設定が考えられます
これは画像の内容を具体的かつ自然に説明しています。このように書けば、検索エンジンにもトレーニングの具体的な内容が伝わりますし、ユーザーにもわかりやすいです。
こちらは単にキーワードを羅列しただけで、どのようなトレーニング方法かが全くわかりません。また、キーワードの羅列は検索エンジンにも不自然に見えるため、SEO効果はほとんど期待できません。
キーワードをぎゅうぎゅう詰めにしちゃうと、検索エンジンも怪しんじゃうんです。自然で分かりやすい説明が大事ですね😄
2.2 SEO向けのaltタグの記述方法：具体的にわかりやすく
altタグを記述する際は、画像の内容が一目でわかるように、具体的かつ簡潔に書くことがポイントです。画像がどんな場面や内容を描いているかがすぐにわかるようにすると、検索エンジンにとってもユーザーにとっても親切です。たとえば、あなたが旅行ブログで富士山の写真を掲載する場合、どのように記述するのが効果的か見てみましょう。
良い例と悪い例でわかる効果的なaltタグ
<img src="fujisan.jpg" alt="青空に映える雪化粧の富士山">この記述では、「青空」「雪化粧」「富士山」といったキーワードが自然に含まれており、画像の様子が具体的に説明されています。検索エンジンもこの情報をもとに「これは青空の下にそびえる雪化粧の富士山の画像だな」と理解し、富士山に関連する検索キーワードと結びつけてくれます。
<img src="fujisan.jpg" alt="美しい風景">一方で、「美しい風景」だけでは具体性がなく、どのような場所なのか、何が写っているのかが全く伝わりません。これでは検索エンジンも内容を理解しにくく、SEO効果も低下してしまいます。
より具体的に書くことで検索エンジンは検索してきた人に表示させてくれる機会が増えるますよ😄
2.3 altタグの注意点とまとめ
注意点1：キーワードは必要以上に詰め込まない
altタグはSEO対策に有効ですが、キーワードを詰め込みすぎると逆効果になることもあります。キーワードを不自然に羅列すると、検索エンジンが「不自然な操作」と判断し、ページ全体の評価が下がる可能性もあるため注意が必要です。あなたもつい、「トレーニング、エクササイズ、ダイエット」などと入れたくなるかもしれませんが、自然で分かりやすい表現を心がけるのがポイントです。
altタグの注意点2：簡潔でわかりやすく
altタグはあくまで「画像が何を伝えたいのか」を簡潔に表現するためのものです。長すぎる説明や複雑な表現は、検索エンジンにもユーザーにも伝わりにくくなります。altタグの理想的な長さは、20～80文字程度とされており、短くても内容がわかるように工夫することが大切です。
altタグは自然な表現で、内容をわかりやすく伝えることが大事
altタグに必要なのは、過剰なキーワード詰め込みではなく、シンプルでわかりやすい表現です。画像の内容を簡潔に、自然に表現することで、検索エンジンにとっても、ユーザーにとってもわかりやすいタグにしましょう。
SEOのためにキーワードを入れるのは大事ですが、不自然になってしまうと逆効果です。画像が何を伝えたいかをシンプルに書くことで、結果的にSEOにも良い影響を与えます😄
3. プラグインなしでaltタグを自動で設定する方法
altタグを毎回手動で設定するのは、時間がかかるうえ、手間が増える一方です。ここで役立つのが、altタグ設定をサポートしてくれるWordPressプラグイン。代表的なプラグインには「All in One SEO Pack」や「Yoast SEO」などがあります。
3.1 Yoast SEOを使っていたが思うような動きをせず時間だけが過ぎていく・・・。
私は「Yoast SEO」を使っていたのですが、無料では自分が思い描く機能が使えず、有料プランも嫌でした。
その他のプラグインもAIを使ってaltタグを設定してくれるのもありましたが、使用回数によって有料になるというものでした。
「それなら自分でコードを入力して思い通りに動かす事が出来ないか？」と思い設定出来ないのかと考えました。
3.2 ChatGPTに相談してコードがあるのか調べる
「適切なプラグインがないので自分でコードを組みたいと思います。やりたいことは画像にあalt」
ここで送信してしまいましたが、さすがチャットGPTですね、汲み取ってくれましたｗｗ
WordPressで画像にサイトのタイトルをAlt属性として追加したい場合、テーマの functions.php ファイルに以下のコードを追加することで実現できます。
「コード・・・」
という感じでコードを提示してくれました。
3.3 画像SEOに効果的なaltタグ設定方法
更に効果的なaltタグに入れておくSEO対策があれば教えて
と質問し色々な設定方法も教えてくれました
1. 画像のコンテキストに応じてタイトルを変更する
2. 画像ファイル名を利用する
3. カテゴリやタグを追加する
4. フォールバックとしてデフォルトのAltテキストを設定
5. 説明的なタイトル属性も設定する
それぞれのコードも教えてくれていましたが、今回の質問で「記事タイトルとカテゴリー」をaltタグに入れてほしいと思ったので再度次のように聞きました。
3.4カテゴリと投稿タイトルをAlt属性に設定するコード
ではカテゴリと投稿タイトルをALTタグにいれるコードを教えて
するとコードを返してくれましたのでそのコードを活用します。
カテゴリと投稿タイトルをAlt属性に自動で設定するコードは、WordPressの functions.php ファイルに追加することで実現できます。以下のコードを使うと、画像のAlt属性に投稿の「カテゴリ名 – 投稿タイトル」を自動的に挿入できます。
解説
- Alt属性が空かどうかを確認
- カテゴリ名の取得
- 投稿タイトルの取得
- Alt属性の設定
例、注意点
上記の内容でコードも教えてくれるし、コードの解説もしてくれるのでホントすごいですよね。
※しかしこのコードでは表示出来なかったのでまだコードは乗せていません。
3.5 アップロード済み画像へのAltタグ一括適用方法
次にアップロードしているすべての画像にaltタグを入れる方法を聞きました。
すでにアップしている画像にALTタグを入れるには投稿を更新すれば表示されますか
そうするとチャットGPTから複数の返信がありました。
はい、既存の投稿内の画像に新しいAltタグを反映させるためには、その投稿を再更新（「更新」ボタンをクリック）する必要があります。ただし、これは一つ一つ手動で更新する方法なので、たくさんの投稿がある場合には効率が良くありません。
既存の投稿にAlt属性を一括適用する方法
すでにアップロードされている画像にも自動的にAlt属性を一括適用する場合は、以下のような方法が役立ちます。
- プラグインを使用する
- Regenerate Thumbnails というプラグインは、画像の再生成を通じて属性変更を反映するのに使える場合があります。
- Auto Image Attributes from Filename with Bulk Updater のようなプラグインを使うと、一括で画像にAlt属性を設定できる場合があります。
- データベース更新スクリプトを使う
- カスタムPHPスクリプトを使って、データベースの画像情報を一括で更新する方法です。これには多少のコーディング知識が必要ですが、効率的に一括更新できます。
- 手動で一括更新する
- 管理画面で、編集画面を一度開いて「更新」ボタンをクリックすると、Alt属性が更新されます。
このような形で返信があります。ここはまだしていませんが、プラグインだとまた出来ない場合もあるのと記事数も少ないので手動で更新していこうと思います。
3.6 デバッグで試行錯誤を繰り返す
しかし、そのコードを入れる→記事を更新→ブログ表示→検証でもaltタグに何も入っておらず何度かチャットGPTへ質問しました。自分では分からない部分も教えてくれるのでホント秘書ですね。
- コードが有効かどうかを確認
- 投稿を「更新」する
- コードをデバッグ
- デバッグモードを有効にする
- エラーログの場所
- ログを確認する
- ログを確認したらデバッグを無効にする
- テーマやプラグインの影響を確認
などを提示してくれて試してみるがデバックも機能してなくて違う所に問題があるのかと思い色々試してみました。
- コードの中にpostnameとなっているから機能しないのか？
- 強制的にサイトのタイトルをAlt属性として追加すればできる？
それでも出来なくてやっぱり出来ないと質問しました。
こちらも試した結果を情報として伝えました。
「WPの編集ページにある代替えテキスト枠に入力した文字は代替テキストとして反映されましたが functions.phpに入力したコードは反応ないです」と質問しました。
すると
functions.php のコードが効かず、編集ページで設定した「代替テキスト」が優先される場合、WordPressの画像設定が原因でコードが反映されない可能性があります。WordPressは、メディアライブラリで設定された代替テキストが優先されるようになっているため、コードが機能しないのかもしれません。
以下の解決策を試してみてください。
1. functions.php のコードを the_content フィルターに適用する
wp_get_attachment_image_attributes のフィルターが反応しない場合、the_content フィルターを使って画像のAlt属性を動的に変更する方法があります。これにより、投稿内の画像タグに対して一括でAlt属性を設定できます。
function add_dynamic_alt_text($content) {
if (is_single()) {
// カテゴリと投稿タイトルを取得
$categories = get_the_category();
$category_name = '';
if (!empty($categories)) {
$category_name = $categories[0]->name;
}
$post_title = get_the_title();
$alt_text = $category_name . ' - ' . $post_title;
// 画像タグのAlt属性を変更
$content = preg_replace_callback(
'/<img[^>]+>/i',
function($matches) use ($alt_text) {
$img = $matches[0];
// すでに代替テキストがあれば削除
$img = preg_replace('/alt=".*?"/i', '', $img);
// 新しいAlt属性を追加
$img = str_replace('<img', '<img alt="' . esc_attr($alt_text) . '"', $img);
return $img;
},
$content
);
}
return $content;
}
add_filter('the_content', 'add_dynamic_alt_text');
このコードをfunctions.phpに入力するとようやく出来ました😄
4.altタグを自動で設定するコードを入力する場所と確認
- ステップ１ワードプレスのコード貼り付け場所へ行きます
4.altタグを自動で設定するコードを入力する場所と確認 サイドメニューの「外観」→「テーマファイルエディター」をクリックします
- ステップ２コードを入力する
4.altタグを自動で設定するコードを入力する場所と確認 まず編集するテーマが子テーマであることを確認してください。
親テーマと子テーマの小話なぜかというと親テーマは、分かりやすく図書館に例えると、たくさんの人が使えるように定期的にアップデートされており、そこで自分が気に入った本にメモを書き込んだ（カスタマイズ）としましょう。次にその本を見ようと図書館に行ってもアップデートで無くなっていることがあるんです。
そこで、自分専用のノート「子テーマ」を作っておくと、図書館の本を参考にしながら自分専用のノートに書くようなイメージ。書いた内容はアップデートで消えることが無いから子テーマを使う事が推奨されています。
子テーマであることを確認し「テーマのための関数」（functions.php）の一番下にコードを入力。
「ファイルを更新」を押して「ファイルの編集に成功しました。」と出れば完成です。
- ステップ３検証でaltタグが入っているか確認する
4.altタグを自動で設定するコードを入力する場所と確認 記事をブラウザで開き画像の所で右クリックし、「検証」をクリック。
- ステップ４altタグが設定できている事を確認
4.altタグを自動で設定するコードを入力する場所と確認 しっかり入っているのでこれで完成
まとめ：altタグでのSEO向上
altタグ設定は小さなことの積み重ねですが、SEOに影響を与える要素です。特に、altタグの内容を自動で入力することで、設定漏れも防げますし、ブログ全体の内容と一致するキーワードを入れられ、長期的に効果を発揮することが期待できます。
内容はどうでしたか？ちょっとしたことでもチャットGPTを使う事ですぐ解決することが多いですのでぜひ使ってみてください😄
もし参考になったと思われたらコメント頂けると嬉しいです。このブログでは実践中に起きた問題の解決方法などを記事にしています。かゆい所に手が届く記事を書いていきますので今後もよろしくお願いします。
コメント