コミュニケーションBLOG

文字によるコミュニケーションには、ブログをはじめ作文や感想文など様々な場面で「書く」技術が必要になってきます。難しく考えずに気楽に書いてみませんか?

画像のAltタグとTitleタグを重複させない はてなブログ

 

黒い人形が鉛筆でALTタグの編集をしている

画像の「title」と「alt」を活用した方がいいという記事を読んで、すぐに便利な機能を設置しました。とりあえず使っていたのですが、イマイチ理解できていません。

「title」と「alt」ってどうするの?という疑問にひとつの答えを出したので、ご紹介します。 

「はてブロimageTitle」というChrome拡張機能を使ってみた

psn.hatenablog.jp

まずは上記のサイトで提供されている「はてブロimageTitle」というChrome拡張機能をインストールしました。それから、セッセと画像のtitleとaltを変更していました。

パソコンに表示されたアイコン

インストールすると、PCにアイコンが表示されます。

titleとaltは重複しない方がいいらしい

net-bz.xyz 

色々な記事を読んでいると、どうもtitleは「空欄」の方がよいという意見が多くありました。titleとaltが重複しているとサイトの評価が「低」になるらしいのです。

それはSEO的に不利になりますね。それで、またいろいろ調べてみました。

www.keiblog.net

こちらのブログがヒントになって、ちょっと見えてきました。下書き保存の記事の画像タグをHTML編集の画面で確認してみると、titleとaltがありました~♪

f:id:flowcare:20161128181227g:plain

「title」「src(画像のURL)」「alt」があって、確かに「title」と「alt」が同じ記述になっています。

これをどうやって編集したらいいのか、しばし試行錯誤(笑)

「はてブロimageTitle」の設定変更

Chrome拡張機能の設定を開く

先ほどのPC画面のアイコンをクリックすると、上記の画面が出てきます。「設定する」をクリックします。

設定の変更画面

わたしは、「alt title属性の両方を編集する」を設定しました。

「title」と「alt」のタグを削除する

画像のタグ編集画面

「画像のタイトルを変えるやつ?」という表示があって、その下に画像の属性が書かれています。ここにカーソルを乗せると、右端に「✖」マークが出てきます。

バツマークをクリックする画面

この「✖」をクリックすると、「title」と「alt」の両方が空欄の「設定なし」になります。そして「変更する」をクリックします。

設定なしのの空欄にして変更するをクリック

画像の貼り替え

次に、先に貼り付けてあった画像をいったん削除します。それから変更(編集)した画像を貼り付けます。

altを日本語で書く

始めはアイキャッチ画像だけを考えていたので、記事のタイトルを書けばいいのかな?と思いましたが、それはダメでした。

「写真の具体的な説明を30字くらいで記述する」といいのだそうです。

titleとaltが空欄の状態

「はてブロimageTitle」で「title」と「alt」の両方を空欄にしました。それから「alt」に日本語を記述していきます。

altを日本語で説明する記述

これで完成!投稿または下書き保存や予約投稿して、書き換え(変更:編集)は完了です。

まとめ

  1. 「title」と「alt」の画像タグを削除する
  2. HTML編集で「alt」に日本語の説明を記述する
  3. 投稿で確定

「はてブロimageTitle」を使用した場合は、右サイドバーに表示される画面でタグを削除してから、既存の画像を削除して貼りなおします。

アイキャッチ画像が1枚だけなら変更は簡単ですが、挿入画像が多ければ多いほど作業に時間がかかりますね。単なる雰囲気だけの写真で本文と関係ない場合は、「alt」は空欄でもいいらしいので、面倒な場合は「title」と「alt」の両方を空欄にしてもいいのでしょうか。

この操作が、SEO的にどれだけ効果があるのはよくわかりません。今後の動きを見ていきたいと思います。 

flowcare.hatenablog.com

flowcare.hatenablog.com

 

りょうこのつぶやきでした。

では、ごきげんよう。

画像元:画像にaltタグを記述!SEOに効果的なalt属性の書き方! - ネットビジネスで稼ぐ方法!- | Net-Bz