WordPressブログSEO対策必須のコツ!alt属性の画像を設定する方法。Googleに評価してもらうために。

WordPress-alt属性

ただのそこにある画像にするか、ちゃんと情報が含まれた有益な画像にするのかは、あなた次第。

いつも俺的デザインログを読んで頂き、ありがとうざいます。どもども、PEITAデザインブロガー@PEITA)です。

このブログは、UlyssesというMac,iPhone,iPadアプり(MacOSアプリ、iOSアプリ)を使って執筆しています。

俺的デザインログという個人ウェブサイトを運営して約1年(2017年10月時点)、色々なブログのノウハウや運営術、SEO対策や検索流入に対しての知識など、少しずつではありますが理解してきました。

それはまさに、小舟(俺的デザインログ)を作って、ウェブという大海原にたったひとつのコンパス(恩師の教え)を持って漕ぎ出し、近隣の島々(運営に関する知識や技術)に漂着しながら、その島に実るノウハウ果実を美味いものから不味いものまで、とりあえず片っ端に食べ、そしてまた小舟(俺的デザインログ)を大海原へ漕ぎ出し、ウェブという世界地図を自らの海路で作っていくセルフブランディングの冒険の日々です。

【関連記事】【セルフブランディング=自分メディア】で仕事をしていきたい方!個人ブログで集客力を高めて、好きなことで生きていくための情報発信をしよう!

そんな冒険を繰り広げる中で、色々な気づきや問題が出てくるわけです。

”ウェブサイト(ブログ)に記事を投稿する”時に、色々とSEO対策のためや、Googleの”サイト評価を向上させる=読者にとっても有益な情報”にするため、サイトのPVアクセスアップを図るために、良質な記事(コンテンツ)を投稿する前には、色々な設定やノウハウがありますが、俺みたいな初心者ブロガーならではの見落としがちなこととして、記事内(投稿ページ)に挿入する”画像”にalt属性を設定していないことも、そのひとつかと思います。

そこで今回は、初心者ブロガーのブログ運営術のひとつである ”alt属性” について、その”設定方法や書き方””その必要性”についてご紹介させて頂きます。

ちなみに、この記事は【WordPress|ワードプレス】に関しての設定方法についての記述となりますので、WixやJimdo(Jimdoについて詳しくはこちら)などでは、設定方法は異なりますので、予めご注意下さい。

【参考サイト】 モバイル向けページの画像にはalt属性を必ず設定すること。MFIへの切り替えで検索順位に悪影響が出る可能性あり

ブログ運営

SEO対策必須!alt属性とは?

alt属性(オルト属性)とは、HTMLのimg要素の中に記述される画像の代替となるテキスト情報です。例えばテキストブラウザや音声読み上げブラウザでは、画像ではなくalt属性に記載された内容がテキストとして表示、または読み上げられることになります。従って、そうした「画像が閲覧できない環境下でその情報が正しく理解される」ような代替テキスト情報がalt属性には記述されなければなりません。引用元|SEOHACKS

すなわち、記事内(コンテンツ内)の画像に対して、人間ならば視覚的な部分で見ることができますが、Google(検索エンジンやブラウザ側)は、それを視覚的に認識することはできません。

視覚的に認識できないので、画像を記事内に挿入した場合、「その画像が何についてのものなのか?」という情報をGoogle(検索エンジンやブラウザ側)に情報として提供しておく必要があるんです。

画像に情報が必要なの?

ネット検索で何か調べ物などをする際に、その検索にヒットした記事の文章や画像を、自然に私たちは視覚的に認識していますよね。しかし、Google(検索エンジンやブラウザ側)は、画像を視覚的に認識することができません。

では、なぜ画像に情報が必要なのか?を、かんたん解説していきますね。下記の写真をご覧下さい。何についての写真(※以下、画像)なのか分かりますか?

子供

上記の画像を、あなたならどう認識しますか?

「外で子供が、シャボン玉して遊んでいる」

例えば、このように認識することができるかと思います。しかし、Google(検索エンジンやブラウザ側)は、視覚的にこの画像を認識できませんので、以下のように認識しています。

まず、WordPressの編集画面から、人間の目で見ると、以下のようになります。

alt属性

そして、WordPressの編集画面から、Google(検索エンジンやブラウザ側)からは、以下のように見えています。

alt属性

文章と画像を一致させる

つまり、画像を挿入して文章を構成すると、人の目から見ると、以下のような形で説明がつきます。

alt属性

Google(検索エンジンやブラウザ側)からは、こう見えています。

alt属性HTML

なので、Google(検索エンジンやブラウザ側)に、その状況を情報としてよりわかりやすく説明するために、画像に情報=alt属性を設定しておかなければなりません。

【alt=“●”】部分(●部分)が空白になっている場合は設定されていない、何かテキストが入力されていれば設定されているということになります。

alt属性HTML②

見ての通り、alt属性の設定がされていませんので、alt属性のHTMLコード部分は空白になっています。

alt属性がきちんと設定されていると、以下のように表示されているはずです。

alt属性HTML③

つまり、”良質なコンテンツを制作し、SEO対策やサイトのPVアクセスアップを図るためには、画像にalt属性を設定しておく必要がある!”ということです。

そのalt属性の設定方法は、あとできちんと解説致しますので、その前にそもそものalt属性の必要性についてをまずは解説します。

alt属性が必要な理由

alt 属性に関してモバイルファーストインデックス チームから特によく聞くのは、alt 属性を画像に設定していないサイトがたくさんあるということだ。

alt 属性がないと、コンテンツの内容を私たちが理解する際に大きな損失になる。

とりわけ画像検索では、画像をより適切に理解するために alt 属性はかなり利用される。

モバイル ファース トインデックスに切り替わったとして、画像があるのに alt 属性が何もなかったとしたらコンテキスト(コンテンツの中身がどういう状況なのか)を大幅に失ってしまう。

したがって、モバイル ファースト インデックスに備えてサイトをチェックするなら、画像に alt 属性が設定されていること、そしてもちろん画像がきちんと埋め込まれていることも必ず確認しておくことを推奨する。

そうすれば、私たちは通常どおり画像を入手でき、画像検索でも通常どおり表示することができる。

と、Google の”SEO”の神様の John Mueller(ジョン・ミューラー)さん(詳しくはこちら)が言われておりますようです(笑)

alt属性がないとヤバい?

  • Googleが記事の内容を100%認識できない
  • 画像検索での順位も下がる
  • ウェブ検索にも影響(検索順位)
  • アクセシビリティにも影響

などなどの問題が出てくるので、サイトの記事が検索上位に表示されないことなんかになることも考えられるので、サイトやブログ運営での死活問題に発展する恐れもあります。つまり、良質なコンテンツを制作する上で、文章も去ることながら、その画像の情報=alt属性の設定をしておくことは、とっても重要なことと言えます。

それでは、alt属性の設定方法をかんたん解説していきますね。

alt属性の設定方法

投稿前に設定する方法

メディアライブラリ内(画像ライブラリ)でalt属性設定することができます。

メディアライブラリの表示方法を説明するとー

記事(コンテンツ)内に画像を挿入する際に、以下のWordPressの編集画面から”メディアを追加”をクリックして表示する方法 ー

alt属性設定方法

もしくはダッシュボードより”メディア→ライブラリ”を選択し表示 する方法ー

alt属性設定方法②

いずれかの方法で、メディア(画像)のライブラリページを表示させます。

メディアライブラリを表示させると ー

alt属性設定方法③

このような画面になります。

そして、必要な画像をクリックすると、以下の画像の右下部分に”代替テキスト”という項目があることがお分かり頂けますでしょうか?

alt属性設定方法④

alt属性の書き方

記事(コンテンツ)の内容に沿った画像がきちんと掲載され、情報として表示されていることを、視覚的ではなく、Google(検索エンジンやブラウザ側)にテキストとして理解してもらう必要があるので、その”代替テキスト”の項目に”記事についての意図した情報のテキスト”を入力することになります。

つまり、”代替テキスト=alt属性”ということです。

先ほど紹介した画像で説明すると、記事では”子どもと遊ぶ”という内容が文章で書かれていますので、その上で”代替テキスト=alt属性”を書くなら、こうなります。

alt属性書き方

子どもと遊んでいる記事ですので、画像の情報としては”子ども”などについての代替テキストを設定しておくと、Google(検索エンジンやブラウザ側)は、その記事の内容を「子どもと遊んでいる」という情報だと理解した上で、画像についても「子ども」(代替テキスト)についての画像だと理解してくれます。すると、記事(コンテンツ)の文章と画像が、ちゃんとマッチングされた良質なコンテンツだとGoogle(検索エンジンやブラウザ側)がより理解してくれることになると考えられます。

投稿後に設定する方法

すでに投稿されている記事(コンテンツ)に、あとから”alt属性”を設定する方法をご紹介します。

ビジュアルエディタテキストエディタ2つの設定方法があります。これは、投稿前の編集中の記事(コンテンツ)の際にも同じことが言えますので、投稿前投稿後と、設定方法は同じようなものです。

ビジュアルエディタとテキストエディタの切り替えはここです。

alt属性書き方②

ビジュアルエディタで設定

ビジュアルエディタ画面で、下記の画像のような赤枠部分”えんぴつのマーク”をクリックします。

alt属性書き方④

すると、このような画面になります。

alt属性書き方⑤

上記の画面を表示させたら、赤枠部分”代替テキスト=alt属性”になりますので、その項目に”記事についての意図した情報のテキスト”を入力すればOKです。

テキストエディタで設定

alt属性書き方⑥

テキストエディタ画面で、画像のHTMLコードの赤枠部分に、”記事についての意図した情報のテキスト”を直接入力すればOKです。

alt属性の確認方法

alt属性がきちんと設定されているかどうかの確認方法としては、画像の設定されているHTMLコードの【alt=“ ”】部分を、テキストエディタ画面から確認し、その【alt=“●”】部分(●部分)が空白になっている場合は設定されていない、何かテキストが入力されていれば設定されているということになります。

つまりー

alt属性確認方法

こうなっているか?

alt属性確認方法②

こうなっているか?で、alt属性が設定されているかどうか確認することができます。

関連するワード必須

何度も言いますが、”記事についての意図した情報のテキスト”、すなわち記事の内容に関連するワードで入力されていることが重要です。

例えば、先きほどのこの文章に ー

関連ワード

であるのにも関わらずー

関連ワード②

こんなことになっているのは、非常に勿体ないです。

必要がある場合とない場合

Alt属性が絶対に必要か?と聞かれると、そうでない場合ももちろんありますので、記事内(コンテンツ)すべての画像にalt属性を設定する必要はありません

記事の文章に全く関係はないけれど、視覚的に表現する必要がある”装飾用”の画像などについては、その記事(コンテンツ)の内容に関して、直接的な意味を持たない画像ですので、 alt 属性を設定は不要です。つまり、適切な文章に適切な画像を挿入する場合に、その画像にalt属性を設定するとして、それ以外の画像に関しては、【alt=“●”】部分(●部分)はブランク(空白)にしておいて差し支えありません。

まとめ

alt属性はーその画像が何を表しているのかと示すもの、つまり「これは●●の画像です」とGoogleに情報を伝えるための仕組みです。

良質な記事(コンテンツ)を書くためには、画像にalt属性を設定した方が、SEO対策にもなり、Googleの”サイト評価を向上させる=読者にとっても有益な情報”になり、サイトのPVアクセスアップにつながるということが言えます。しかし、記事内(コンテンツ)に挿入されている画像すべてにalt属性を設定する必要はなく、適切な文章に適切な画像を挿入する場合のみ alt属性を設定する必要がある ということですね。

いかがでしたでしょうか?

とにかく、ウェブサイトやブログを運営するにあたって、alt属性については、初歩的な知識として理解しておく必要があることがわかって頂けたかと思います。

しかし、今後はGoogleのサイト評価のポリシーや検索順位のシステムに変更がある場合も考えられますし、評価は機械ではなく、ちゃんと人(Googleで働く人)が見ているとも言われているし、GoogleHomeやAmazonECHOなど、次世代の検索システムなどもどんどん進化していますので、良質な記事(コンテンツ)を制作する場合に、画像以外にもあらゆる評価に値する基準が生まれたり変わったりするしていくことと思いますが、”検索”=”見込み客”を獲得する上で、Googleの評価する基準に対して、ある程度それらをクリアしておく必要がありますので、alt属性の設定については、できる限り対応しておくことが望ましいと思います。

もちろん、モバイルファーストインデックスへの対策にもなりますし、PCページでのインデックスの対策にもなります。なので、alt属性の設定しておくことで、より運営するサイトが、 ”検索上位表示=検索流入増加=PVアクセスアップ=収益性アップ” というチャートを辿りやすくなると思います。

 

最後まで読んで頂きありがとうございました。では、またお会いしましょう。

|合わせて読みたい記事

|ブログ運営におすすめサービス

  • あなたのWebに簡単に検索機能を追加する検索システム「サプラス
  • ブログを管理する、無料のオンラインポートフォリオ「ポートフォリオボックス
  • 2万人を超えるユーザーが選んだSEO対策のテンプレート「賢威
  • 誰でも簡単にで切る!ホームページ集客ツール「ferret One
  • もっと読みやすく、分かりやすく。文章の完成度を高めるライティングツール「文賢
ブログ運営

この記事が気に入ったら
いいね!しよう

Twitter で

このブログのテーマはこちら

この俺的デザインログで使用しいているWordpressのテーマは、「OPENCAGE」 モバイルファースト思想でつくられたブロガー専用のWordPressテーマ「STORK」です。 ウィジェットやカスタマイザーを利用して簡単にオリジナルデザインのブログを 構築することができます。

スポンサードリンク

PEITAに仕事依頼はこちら

お問い合わせバナー

WordPress-alt属性

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

どもどもPEITAです。ここは俺の好きなモノゴトを集めたブログサイトです。俺の詳細については、プロフィールページにてご確認下さい。ここで、あなたの好きなモノゴトとの出会いがありますように。