2020年2月17日スポンサーリンク・alt属性って何?・代替テキストって何?・画像のSEO対策が知りたい!こんな疑問にお答えします。ぽむこんにちは!ぽむ(@kurashigoo_pom)です。今回の記事では、alt属性の定義や意味・設定方法を、画像付きで分かりやすくご紹介していきます。alt属性は軽視されがちですが、とても重要な項目です。設定をすることでSEO効果も期待できます。この記事を読んで理解を深め、質の高いブログ・サイト作りに役立ててくださいね。簡単に言えば「画像の代わりとなるテキスト情報」のことです。「代替テキスト」とも呼ばれます。英語のalternative(代わりの手段)に由来しているよ。このalt属性は、HTMLの中で記述することにより機能し、このように表記されます。alt=”◯◯”〇〇の部分に、任意のテキストが入ります。和訳すると「代わりのテキストは◯◯だよ」です。alt属性は<img>と表記される画像タグの中に存在します。後々きちんと設定できているかをチェックする時に役に立ちます。うさちゃん<img>は画像のことだったんだ!ぽむうん!WordPressのテキストモードをのぞいたり、GoogleChromeでF12キーを押して検証してみたりすると勉強になるよ。「定義はなんとなくわかったけど、何の意味があるの?」「画像の代わりってどういうこと?」と思った方も多いはず。alt属性は、以下のような役割を果たします。順にご説明していきますね。何かしらの不具合で画像が表示できない時に代わりとして役立ちます。「画像に何が写っているか」がわかることで、読者の混乱を防げますよね。読み上げ機能の補助テキストまた、読み上げ機能を使って音声で情報を得たい場合にも役立ちます。何もしていない場合、画像は「画像」と読み上げられますが、alt属性を記述することで、指定の文字通りに読まれるようになるため、音声でも理解のしやすいサイト作りが可能になります。うさちゃんバリアフリーの面でも、配慮のあるサイトになるね!クローラーの理解の促進クローラーというのは、サイトを巡回する検索エンジンのロボットのことです。このロボットは、文字・文脈を理解する力は持っていますが、「画像に写ったものが何か」を正確に把握する力は持っていません。alt属性を使えば、ロボットに何が写っているのかを教えることができます。ロボットが「このサイトは内容に即した画像を使用している」と判断できれば、ユーザーに配慮したサイトとして扱われ、評価も上がりやすい状態になります。画像をリンクとして使う場合においても、alt属性を書くことで、リンク先のページについてロボットが理解できるようになります。様々なユーザーを想定した配慮のあるサイト作りを行える上にSEO効果も期待できるのです。うさちゃんやらなきゃソンだね!今ご紹介した役割は、Googleも公式に提示しています。時間がある際には、目を通してみましょう。属性は、画像ファイルのコンテンツを説明するために使用されます。この属性は、次のような理由から重要です。とって代替テキストは、画像の題材についての有用な情報です。この情報を使用して、ユーザーのクエリに最適な画像を判断します。リーダーを使用する、接続速度が遅いなどの理由から、ウェブページの画像を見ることができないユーザーも多くいます。代替テキストはこのようなユーザーに重要な情報を提供できます。ヘルプ※ちなみにSEOの観点でいうと、「パーマリンクの設定」も非常に大切です。こちらの記事も参考にしてみてくださいね。続いて、alt属性の設定方法についてお話しします。WordPressでは「メディアライブラリ」から設定が可能です。添付ファイルの詳細→「代替テキスト」欄に入力まずはサイドの欄から「メディア」を選択し、「メディアライブラリ」を開きます。「新規追加」を選択し画像をアップロードします。アップロード済みの画像であれば、一覧よりその画像を選択します。すると、「添付ファイルの詳細」という画面が表示されます。alt属性として表示させたいテキストを、右側の「代替テキスト」欄に入力します。WordPressにおいては、「代替テキスト」に入力した文字がそのままalt属性として記述されます。くまくんめっちゃカンタンやん!複数の記事で共用している画像に対して、記事ごとに異なるテキストを入れたい場合は以下のステップで設定します。更新サイドの欄から「投稿」を選択し、alt属性を入れたい画像が貼ってある記事を選択します。以下のような「画像詳細」という画面が表示されます。画面左上の「代替テキスト」の項目にテキストを入力します。更新を押して完了です。この手順を踏むと、”この記事限定”のalt属性を設定することができます。テキストエディタに直接入力する際には「alt=””」の部分に入力しましょう。冒頭でご説明した、HTMLの文法を覚えておくと画像の部分をパッと見つけられますね。設定できたかチェックする際にも役立ちます。WordPress以外のテキストエディタを使う場合も同様です。alt属性を書く時のポイント設定方法をご理解いただけたところで、alt属性の理想的な書き方をおさえていただきたいと思います。alt属性を書く際に意識すべき点はズバリこれ。どんな画像かを想像できる簡潔でわかりやすく説明している例をあげます。以下の画像にalt属性を書くとします。どんなものが良いと思いますか?くまくんこのハムスターの名前は多分「コロッケ」だから、「コロッケ」が良いかな!ぽむ...?!結論からいうと、このように書くのがベストです。誰がみても「何がどんな状態であるのか」がわかるように書くのが最適です。くまくんたしかに「コロッケ」だと他の人が分からないね...。逸れますが、こういった高画質のフリー素材は、Unsplashというサイトで見つけることができます。興味がある方は、こちらの記事も覗いてみてくださいね。先ほどの画像を例としてalt属性のNGな書き方もみていきましょう。具体的には、以下3つに当てはまる記述はよくないものとされています。関係のないワードを入れている検索キーワードを詰め込みすぎている説明不足すぎる関係のないキーワードを入れているalt=”草原を駆けるウサギ”画像に写っているものと、関係のない文言を入れるのはやめましょう。読者の方やクローラーを混乱させてしまいます。検索キーワードを詰め込みすぎているalt=”ペット,飼育,ハムスター,ゴールデンハムスター,ジャンガリアンハムスター,人間,黒い服,手,左手”このように、検索に引っかかりそうなキーワードを大量に詰め込むのもNGです。実際にGoogleは、キーワードに関して次のように言及しています。検索結果でのサイトのランキングを操作する目的で、ウェブページにキーワードや数字を詰め込むことです。このようなキーワードは多くの場合、リストやグループの中に、または他の部分から切り離されて独立して(自然な文章としてではなく)出現します。ページにキーワードや数字を詰め込むと、ユーザーの利便性が低下し、サイトのランキングに悪影響が及ぶ可能性もあります。文脈に合ったキーワードを適切に使用した、情報に富んだ有用なコンテンツを作成することに焦点を合わせてサイトを運営してください。Supportキーワードを詰め込みたい気持ちはとてもよく分かりますが、このようにスパムと判断されてしまう可能性もあるので、注意しましょう。説明不足すぎるalt=”ハムスター”完全にNGというわけではないですが、これだけだともう少し説明が欲しいところです。わたしの場合は、抽象的な画像で表現が難しい場合などには、H2の見出しを引用しています。デザイン・装飾の目的で入れる画像に関しては、記載の必要なしです。このように空白にしておきましょう。alt=””NG例もご覧いただくことで、適切なalt属性のイメージをご理解いただけたと思います。再度確認しますが、alt属性は簡潔で端的に内容を表すものがベストです。記事に画像を挿入する際には、是非参考にしてみてください。alt属性を書いて画像を最適化しようご説明してきた通り、alt属性(代替テキスト)は、あなたのサイトを訪れる読者・ブログやサイトを運営するあなた自身、どちらにとっても重要な意味を持つ要素です。「知らなかった!」という方や「面倒だからやっていなかった...」という方は、これを機会に設定をしてみて下さいね。alt属性をきちんと記述して、どんなユーザーにとっても利用しやすいブログ・サイトを目指していきましょう。頭がいい人?だけが入れるメンサの会員であり、TV出演もした事があるというぽむさん!※メンサって都市伝説好きな人からすると結構有名ですよね。ブログのライティング力がずば抜けて高く、人に説明する、紹介する力が飛び抜けています。☞ぽむさんのTwitter☞くらしぐはこちら特にブログ初心者向けの記事は、誰でも理解できるレベルで丁寧に書かれています。☞200回見たalt属性の記事はこちら他の人の記事では理解できなかったけど、ぽむさんの記事を読めば理解できるという人が多いのも確かです。コメントをキャンセルメールアドレスが公開されることはありません。付いている欄は必須項目です次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。【パーマリンク】WordPressの設定・決め方までバッチリ解説!【JPEG・PNG】特徴や違いを解説!最適な形式で画像を保存しよう『くらしぐ』管理人ぽむ『くらしぐ』では、あなたのくらしがGOODになる情報をお届けします。