初心者向け PC閲覧推奨
よくある間違いシリーズ (´・ω・｀)
当該記事の主旨は ブログタイトルをテキストから画像へ変更する際の注意についてです。「alt と title を混同していませんか？」
alt, title 共にhtmlで使います。正しい名称は 属性
altタグ、titleタグ、ではありませんぜ旦那 (´・ω・｀)
そしてこの2つ、よく混同されて間違った使い方をされることも多いです。
altとtitleは役割が違う
alt属性とは
画像を端的に説明するためのテキスト内容
何らかの理由で画像が表示されなかった際(ローディングエラーやアドレス消失 など)に表示される代替テキスト
SEOに大きく関わる
コンピュータのためのもの
主に適用されるhtmlタグ
img が最も多く他に input, area など
title属性とは
要素の補足説明をするためのもの
いわゆる「ツールチップ」
SEOに関わりは無い(賛否ありますが 私は「無い」と思います)
人間のためのもの
主に適用されるhtmlタグ
a が最も多く ほぼ全ての要素に使える(img含む)
各々マウスオーバーで確認。
これがalt ↓
これがtitle ↓
altの方は何も出ませんね。一方 titleの方は「ツールチップ」と呼ばれるテキスト内容が表示されます。butterfly ってやつね。画像の 可視 の補足説明をしています。
altの方はどうかと言うと、こちらもまたその「補足説明」をしていますが、人間には 不可視 何に対して説明を行っているかと言うと、コンピュータ, 検索ロボット に対してやってます。人間が見る必要はなし。そしてこの不可視の補足情報がとっても重要
検索ロボットは画像の中の文字を読み取れない
当たり前っちゃー当たり前ですが例えばこんな ↓
これは「画像」です。THE OTHER WAY ROUND って私のブログ名が書いてありますわね。でも検索ロボットはそれを読み取ることはできません。だって画像なんですからー (´・ω・｀)
書いてあるじゃん！わかるじゃん！というのは私たちが人間だからです。だからこれはダメ ↓
<img src="画像アドレス" width="画像横サイズ" height="画像縦サイズ"><img src="画像アドレス" width="画像横サイズ" height="画像縦サイズ" alt="The other way round">こうしてロボットに対して明示してあげると、「ああ、The other way round ね。」とわかるわけです。
titleだってテキストなんだから同じじゃん (;`ｰ´)o
と思うかもしれませんが、titleとはあくまでも対人間用補足説明ですからこういうことも考えられます(マウスオーバー)
「ブログバナーです。ご自由にお持ち帰りください。」これだって説明してるわけですよ。「持ってって良いよ。」という説明を。でもそれは閲覧した方へ対してのメッセージであって、ロボットにしてみりゃんなこたーどーだっていい話し (´・ω・｀)
ロボットに取って重要なのは その画像は一体なんやねん？？ ってところですから、altで以てしっかりそれを伝えるわけです。
ブログ名をバナーに変更したら必ず alt属性！
よくありますよね。ブログタイトルを画像に変更したい！という方。それ自体は何も問題ありません。問題あるぱてぃーん ↓
<h1><a href="ブログアドレス"><img src="画像アドレス" width="画像横サイズ" height="画像縦サイズ"></a></h1>
altないぢゃん (`Д´)
「見出し」というのはどれも重要なものですが、その中でも h1 は位として最高位なわけです。それが画像になっており、その画像が一体何なのかの説明が無い。これは検索ロボットに対してとっても不親切。
じゃあこうしたらどうだ ↓
<h1><a href="ブログアドレス" title="The other way round"><img src="画像アドレス" width="画像横サイズ" height="画像縦サイズ"></a></h1>いやいやアカンやん？titleは人間のためのもの。
じゃあこうだ ↓
<h1><a href="ブログアドレス" alt="The other way round"><img src="画像アドレス" width="画像横サイズ" height="画像縦サイズ"></a></h1>
のんのん (-ε-)b"
alt は img に対して付加します。だって画像の説明であって アンカーを説明するわけじゃないんだから。そもそも a に alt は使えません。
こうするのがベスト ↓
<h1><a href="ブログアドレス" title="トップページへ"><img src="画像アドレス" width="画像横サイズ" height="画像縦サイズ" alt="The other way round"></a></h1>実態はこんな ↓ (h1は省いてあります)
titleへはブログ名を記すのではなく「トップページへ」にしてあります。ブログ名は画像に書いてあるんだから二度説明する必要なし。クリックしたらトップページへ飛ぶでぇ〜、という説明の方がよほど親切(人間にとって)
(まあ、私はtitleは無くても良いと思ってますが。フツーわかるし。)
そして画像にはしっかりaltでブログ名を記載。親切(ボットにとって)
いやホント、titleとaltが共存する時は被らない方が良いと思いますよ(なんとなく、ってゆーかホントは確信を持って)
あとこれもアカン〜なぱてぃーん ↓
<h1><a href="ブログアドレス" title="トップページへ"><img src="画像アドレス" width="画像横サイズ" height="画像縦サイズ" alt="ブログバナー"></a></h1>
あるいは 「サイトロゴ」 とか 「会社ロゴ」 とか ちょっと考えすぎちゃって、「画像の説明をするんだから…？ ブログ名なんだから？ ブログ名をそのまま書くんでなく…？ 『ロゴだぜ』って伝えれば良いんか！」
のんの〜〜〜ん (-ε-)b"
ここは直接ブログ名を記載。私なら「The other way round」って書けばOKです。The other way round がブログ名である、ってのはボットはちゃんと理解しています。それはhead情報で渡されています。なので、大見出しやで！ h1やで！ その見出し内容はブログ名であるところの「The other way round」やで！と伝えます。見出し「ブログロゴ」っておかしいでしょう (´・ω・｀)
見出し「The other way round」が正しい。
おまけでFC2の仕様
altってみなさんあまり意識して書かれませんよね。FC2では記事を書く際に記事内に添付した画像については自動でaltが記載されます。どうやってるかと言うと、画像アドレスの末尾を拾ってます。
例)
画像アドレス(ファイル名) --- http://サーバー名/12345.jpg
この画像のalt --- 12345.jpg
ファイル名末尾が自動でaltになるわけです。ですから本気でSEOを考えるのならば、
① 画像添付を行ったら手動でaltを適切に書き換える
② 手動が無理ならあらかじめファイル名をしっかり考えておく
めんどくさいのは②だと思います(笑)
ファイル名ですから英数字と一部の記号の羅列しか使えません。日本語はご法度。altを書き換えるのならば日本語でもOK
例えば最初のバタフライのサンプル画像であれば、あらかじめファイル名を butterfly.jpg にしてアップロードしておくと自動でaltが「butterfly.jpg」になるわけですね。後ろの .jpg が余分だけどもね (´・ω・｀)
しかし良くできたシステムですからここは妥協。ファイル名修正でaltを任意にできますが、画像を使い回したりストックしている(いつ使うか未定)場合には却って邪魔になる場合も。ですから記事を書く際にaltを与えるのがベストだと思います。
旧投稿画面をお使いの方はちょちょいとaltの書き換えができますので、そちらを推奨。新投稿画面の方は… ②の方法で ^^;
Googleには「画像検索」という優れたツールがあります。正しくaltを書けばヒット率も高くなります。つまりSEO (o'ω')ﾉ
記事内の画像についてはalt自動付加ですが、問題はサムネイルよね (´・ω・｀)
FC2サムネイルはaltが付きません alt無しってのはダメなんです。html5では「適切なものが見当たらない場合はaltは記載しなくても良い」となっていますが、alt属性が無しでOKという意味ではなく alt="" こうして空欄にしとけ、って意味です。FC2さんここ改善お願いしたい。切実に (´・ω・｀)
まとめ
h1とロゴの組み合わせ、altとtitleの間違い。とってもよく見かけます。一度チェックされてはいかがでしょうか。
最後に「altでもツールチップ出るでしょ (･ε･)」という方は、クソ IEに騙されてた方です。
There are no comments yet.