最近は Hugoのことをたくさん書いています。 Hugoでブログを書いていると、一番面倒なのが「画像」の扱いです。 スクショを撮って、WebPに変換して、適切な名前をつけて、Markdownにリンクを貼る……。
面倒すぎて正直これまでやってきていませんでした。笑
このフローを自作のシェルスクリプトで自動化したのですが、そこでふと疑問が浮かびました。 「画像ファイル名を link1.webp みたいに連番にしても、SEO的に大丈夫なのだろうか？」
今回は、その疑問を解消するために調べた「画像SEO」の核心である alt属性（代替テキスト） についてまとめます。
1. 画像SEOの結論：ファイル名より『alt属性』が命 #
Googleの画像検索エンジンは進化していますが、今でも最も頼りにしているのは画像に添えられたテキスト情報です。
よく「画像ファイル名は iphone-setting.jpg のように内容がわかる名前にすべき」と言われます。確かにそれは正しいのですが、実はそれ以上に重要なのが Markdownの ![ ] の部分、つまり alt属性（代替テキスト） です。
画像リンクは下記みたいに記事内に書きます。
alt属性（altテキスト）の役割 #
- Googleへの内容通知: ロボットに画像の内容を教える。
- アクセシビリティ: 視覚障害の方が使うスクリーンリーダーで読み上げられる。
- エラー時の代用: 通信環境が悪く画像が表示されないとき、代わりにこの文字が表示される。
つまり、ファイル名が link1.webp のような簡素なものであっても、alt属性が適切に書かれていれば、SEO上の大きなマイナスにはなりません。
AIに聞いた内容なので、誤っていたらすみませんですが。。
2. 実践：効果的な alt属性 の書き方 #
「alt属性には何を書けばいいのか？」と迷ったら、 「電話で相手に画像の内容を説明するならどう言うか」 を基準にするのがおすすめらしいです。Byジェミさん
悪い例 #
![画像1]（何のことかわからない）![スクショ]（情報の価値がない）![Python GAS Hugo ブログ 自動化 効率化]（キーワードの詰め込みすぎはスパム判定の元）
良い例 #
![VS CodeでPythonのデバッグ実行を開始した画面]![M2 MacBook Air の外観（ミッドナイトカラー）]![シェルスクリプトによるファイル名一括変換の実行結果]
ポイント： 画像がなくても、その場所で何が説明されているか理解できるテキストを目指しましょう。
3. Hugoテンプレートで意識すべきSEO項目 #
今回使用しているFront Matter（記事冒頭の設定）にも、SEOに直結する重要なポイントがいくつかあります。
description（ディスクリプション） #
検索結果のタイトルの下に表示される説明文です。
テンプレートの description をdecription に恥ずかしながらタイポしていました。全部直さないと・・・
ここを丁寧に書くと、検索結果からのクリック率（CTR）が劇的に変わるようです。
url（パーマリンク） #
url: posts/my-article/ のように、記事の内容が推測できる英語のURLを設定するのがGoogle推奨です。
後からURLを変えると検索エンジンの評価がリセットされてしまうので、記事作成時にしっかり決めるのがコツのようです。
4. 他にも知っておきたいSEOの豆知識 #
画像とテンプレート以外で、最低限これだけは守りたいポイントです。
- 見出しの階層を守る:
##(H2) の次は###(H3) を使います。いきなり####(H4) に飛ばさないようにしましょう。Googleは文書の構造を見ています。 - 内部リンクを貼る: 過去に書いた自分の記事へリンクを貼ると、Googleのクローラーがサイト内を巡回しやすくなり、サイト全体の評価が上がりやすくなります。
まとめ #
「自動化で効率を上げつつ、抑えるべきSEOのポイント（特にalt属性）はしっかり抑える」。 これが個人開発者が技術ブログを楽しく、かつ多くの人に届けるための近道だと感じました。
Hugoを使われている方は少ない気もしますが、WordPressのようなCMSでも同様に大切な設定かと思います。
皆さんも ![ ] の中身、今日から少しだけこだわってみませんか？私も横着せずに画像リンク作ってみようかと思います。
補足 Hugoでの画像リンク作成のスクリプト化 #
画像を確認して、ポチポチリンクを作って・・・ってやるのがとても面倒だったので、 スクリプト化しました。
webpファイルをHugoの記事（index.md）にリンクとして貼り出します。
上記の記事で、pngファイルをwebpに変換するスクリプトを紹介しています。 自分は、上記の変換スクリプトでwebpにしたのちに、Hugoへの画像リンクを貼り付けるスクリプトを実行しています。
内容は下記みたいに作っています。
#!/bin/bash
DEFAULT_DIR="content/posts"
# 1. 第一引数のチェック
if [ -z "$1" ]; then
echo "エラー: フォルダ名を指定してください。"
exit 1
fi
TARGET_DIR="$DEFAULT_DIR/$1"
# 2. フォルダへ移動
if [ ! -d "$TARGET_DIR" ]; then
echo "エラー: フォルダ '$TARGET_DIR' が見つかりません。"
exit 1
fi
cd "$TARGET_DIR" || exit
# 3. index.md の存在確認（なければ終了）
if [ ! -f index.md ]; then
echo "エラー: index.md が見つかりません。処理を終了します。"
exit 1
fi
echo "処理開始: $(pwd)"
# 4. 画像のリネームとリンク追記
i=1
# 追記前に空行を1つ入れる
echo "" >> index.md
# フォルダ内の webp ファイルをループ
for f in *.webp; do
# ファイルが存在しない場合はスキップ
[ -e "$f" ] || continue
# featured.webp はリネームもリンク追記もせずスキップ
if [ "$f" = "featured.webp" ]; then
continue
fi
NEW_NAME="link${i}.webp"
# ファイル名を変更（現在の名前と新しい名前が異なる場合のみ実行）
if [ "$f" != "$NEW_NAME" ]; then
mv "$f" "$NEW_NAME"
echo "Renamed: $f -> $NEW_NAME"
fi
# index.md にリンクを追記
echo "" >> index.md
echo "" >> index.md
i=$((i + 1))
done
if [ $i -eq 1 ]; then
echo "対象となるWebP画像（featured.webp以外）が見つかりませんでした。"
else
echo "✅ 完了: $((i - 1)) 個の画像を処理しました。"
fi実行は下記みたいな感じで行います。フォルダ内のwebpを画像リンクとして貼り出します。
# 実行権限を付与
chmod +x add_gazo_link.sh
# 実行はフォルダ名を引数として指定します
./add_gazo_link.sh [フォルダ名]
