装飾的な画像を管理する

装飾画像:SEOのために管理する方法

装飾画像とは何か、そしてそれがSEOにどのように影響するか疑問に思っていませんか?

装飾画像は、他の画像タイプとは異なる扱いが必要です。

良いニュースは、装飾画像を正しく処理するのは非常に簡単だということです。

装飾画像とは?

装飾画像とは、関連情報を提供しない画像のことです。

例えば、積み重ねられた本のストックフォトは、教育系ウェブサイトでよく見られる装飾画像です。

装飾画像はめったに情報価値を加えませんが、ウェブサイトのスタイルを向上させ、ページのユーザーエクスペリエンスに貢献することができます。

例えば、文学雑誌やジャーナルでは、ストック画像やカスタムイラストを使用して、ページに視覚的な魅力を加えることがあります。

ここでは、装飾画像は魅力的で、主に想像力を掻き立てることができます。

Nautilus誌の「私たちについて」のページが良い例です。それは「宇宙の驚異への旅」を約束し、夢のようなイラストが読者を引き込みます。

装飾画像の例

情報画像 vs. 装飾画像:違いは何ですか?

装飾画像と情報画像の主な違いは、後者はページのトピックに関連する情報を提供することです。

情報画像の例としては、以下のようなものがあります:

  • 抗議活動や犯罪現場などのニュースイベントの写真。
  • 記事のポイントを強調する図やグラフ。
  • 記事で議論されている場所、人物、または物体の画像。

情報画像は、ユーザーがテキストの正確性を検証するのに役立ち、場合によっては、より詳細な情報を掘り下げるのに役立ちます。

しかし、Nautilusの例で見たように、装飾画像はムードを視覚的に喚起し、期待を設定することができるため、*全く*情報を提供しないと断言するのは不正確なようです。

しかし、装飾画像は、テキストに既に存在する情報以外の情報を提供しないと言えます。

これら2種類の画像は、SEOでも異なる扱いを受けます。

その方法と理由を理解するために、代替テキストの意味を再確認しましょう。

代替テキスト(Alt Text)とは?

代替テキストとは、画像を説明するテキストのことです。

代替テキストには2つの目的があります:

  • 検索エンジンは代替テキストを読み取り、インデックス化し、画像の内容を理解するのに役立ちます。
  • 代替テキストは、スクリーンリーダーによって読み上げられます。これは、障害のある方が使用するデバイスです。

装飾画像の代替テキスト

装飾的な画像の代替テキストの処理は簡単です。空白のままにするのがベストプラクティスとされています。

フィールドが空白であることを確認する方法は次のとおりです。

  • WordPressにログインする
  • 画像がある任意のウェブページに移動します。
  • 次に、画像をクリックして、右側のサイドバーにあるWordPressの画像設定を開きます。

そこに代替テキストフィールドがあります。

WordPress 代替テキストフィールド
キャプション:このスクリーンショットでは、代替テキストフィールドを拡大して見やすくしました。

空白のままにすることは、代替テキストを追加する必要がないことを意味します。

空白のままにすることで、スクリーンリーダーは装飾的な画像をスキップします。これは、この画像を説明しても価値がないため、視覚障害のあるユーザーエクスペリエンスを向上させます。

更新可能なブライラーディスプレイ
上:点字ディスプレイ(RBD)を備えたコンピューター。

スクリーンリーダーが読み上げていると想像してください。

  • 「人々がウェブサイトを指している」
  • 「装飾的な緑色の画像」、または、
  • 「ウェブサイトの記事のイラスト」

退屈ですよね?

次に、情報画像の代替テキストの処理がどのように異なるかを見てみましょう。

情報画像の代替テキスト

例として、アビナッシュ・カウシクが作成したデジタル戦略モデルに関する記事を使用します。

カウシクは有名なマーケティングのビジョナリーです。この記事は彼の仕事に焦点を当てているため、彼の写真を掲載しました。

そして、追加した代替テキストは次のとおりです。「アビナッシュ・カウシクがカンファレンスで話している。」

WordPressのaltテキストの例

カウシクの写真はあまり情報を提供しないため、「なぜ装飾的な画像として扱わないのか?」と疑問に思うかもしれません。扱うこともできます。しかし、カウシクは記事の中心です。そして、検索エンジンにこの代替テキストをインデックスさせたいと考えています。

これにより、「アビナッシュ・カウシク」を検索しているユーザーがこの写真を見つけて記事にアクセスする可能性があります。

次に、SEOに影響を与える可能性のある2つの画像の問題を見てみましょう。

その他のSEOのヒント:画像ファイル名とサイズ

画像ファイル名とサイズを最適化することで、SEOを改善できます。

まずファイル名を見てみましょう。

画像ファイル名とファイル形式

詳しく見ていく前に、画像ファイル名が画像ファイル形式とは異なることを知っておくと役立ちます。ファイル形式は「拡張子」として表されます。これは、画像ファイル名の末尾に自動的に表示される短いテキストです。

例:Photo-name.jpg

これは、ファイル名が「photo-name」であり、jpgファイル形式であることを示しています。

もしこの画像がpng形式であれば、このようになります:Photo-name.png。

拡張子は、ファイルがどの形式であるかを示すほんのわずかな情報です。

webpやsvgなど、デジタル画像形式には多くの種類があります。拡張子は自動的に追加されるため、すべてを理解する必要はありません。

画像ファイル名の最適化方法

検索エンジンも画像ファイル名を読み取るため、明確で説明的なものにしてください。

名前の付け方が悪い画像ファイルは、次のように曖昧です:

  • 1100073658.jpg
  • Man-exercising.jpg

良い画像タイトルは具体的で、画像を説明するものであるべきです。

たとえば、新兵が米海兵隊のブートキャンプに送られる前に体力をつける方法について記事を書いているとします。

あなたの画像は、実際に新兵がプランク運動をしている様子を示しています。man-exercising.jpgの代わりに、画像をmarine-recruit-holding-plank.jpgと名付けることができます。

装飾的な画像のファイル名は、ムードやブランドイメージを喚起するために使用されることが多いため、具体性に欠けることがよくあります。たとえば、上記の装飾的なNautilus画像はwonder-vehicle.jpgと呼ばれています。

芸術作品を共有している場合、その作品のタイトルは適切な画像ファイル名です。

画像ファイル名のSEOに関する記事でさらに詳しく学ぶ。

画像ファイルサイズ

ファイルサイズが大きいとページの読み込みが遅くなる可能性があるため、画像を自動的に最適化するWordPressプラグインの使用を検討してください。

WP Rocketのようなプラグインは、インストールと使用が簡単です。

プロのヒント:画像ファイルサイズと画像の表示サイズは、2つの異なるものです。画像サイズを縮小しても、高解像度でRetina対応の画像として表示することは可能です。

ウェブページSEO:より多くの訪問者を獲得する

情報提供および装飾的な画像は、サイト訪問者のエンゲージメントを高めるのに役立ちます。また、情報提供画像用のaltテキストは、検索エンジンからのトラフィックを引き付けることができます。

しかし、SEOは画像altテキストだけではありません。

ここで、All in One SEO (AIOSEO)のようなプラグインが登場します。

初心者でも使いやすいように設計されており、SEO(コンテンツ以外)に必要なほとんどすべてを提供します。

これはWordPress.orgで数千件の5つ星レビューを持つ実績のあるプラグインです。300万人以上のユーザーがダウンロードしています。

aioseoホームページ

仕組みは次のとおりです。

より高くランク付け:誰もがコンテンツをより高くランク付けしたいと思っていますが、SEOを学ぶには時間がかかります。ここでAIOSEOが重要になります。コンテンツを分析し、SEOのために最適化するために何をすべきかを正確に示します。

AISEOの基本的なSEO推奨事項

推奨事項を実行すると、TruSEOスコアが上昇します。

検索結果でより良く表示:このプラグインにより、ウェブページをリッチスニペットとして表示する資格を簡単に取得できます。リッチスニペットは、スーパーデラックスな検索エンジンディスプレイと考えることができます。

標準的な検索スニペットは次のようになります:

標準スニペットの例

そしてこちらがリッチスニペットです。

リッチスニペットの例

コード不要:All in One SEOは、XMLサイトマップやRSSサイトマップの自動生成など、多くの技術的な機能を自動的に処理します。これらのサイトマップは検索エンジンに通知され、変更や新しいコンテンツを知らせます。

コンバージョンを計画することを忘れないでください

より多くのトラフィックを獲得するための行動を起こしながら、ウェブ訪問者にどのような行動を取ってほしいかを必ず考えてください。

OptinMonsterを使用して離脱防止ポップアップを作成しています。これらのポップアップは、ユーザーがウェブサイトから離れようとしているときに表示されます。

OptinMonsterは低コストで効果的です。

OptinMonsterポップアップの例
キャプション: これは、参照できる多くのポップアップ例の1つですOptinMonsterギャラリー.

HTMLでの代替テキストの書き方

代替テキストのHTML表現について知りたい方は、以下が役立つでしょう。

代替テキストの構文は次のとおりです。

 <img alt="your alt text goes here">

altはHTMLの画像要素のプロパティであり、引用符の間に配置されたものはすべてそのプロパティのであることに注意してください。

<img alt="baseball player sliding into homebase">

imgタグには、画像のソース(src)(URL)も含まれます。例:

<img src="/baseball-player-scoring.png/" alt="baseball player sliding into homebase">

代替テキストフィールドが空白の場合、それはnull代替テキストと呼ばれ、HTMLでは次のようになります。

<img src="/baseball-player-scoring.png/" alt="">

これは空のalt属性とも呼ばれます。

ヒント:任意のウェブページのコードを表示する方法を見つけてください。

画像に関するQ&A

一部の画像が装飾目的で使用されること、代替テキスト、またはアクセシビリティについてさらに質問がありますか?以下に一般的な質問に回答しました。

追加の質問がある場合は、コメントセクションにメモを残してください。

背景画像は装飾画像と見なされますか?

はい、CSSのbackground-imageプロパティで定義される背景画像は装飾と見なされます。この場合、ウェブサイトのCSSコードは通常、alt属性が常に空白にされるクラスを指定します。

ウェブアクセシビリティとは何ですか?

ウェブアクセシビリティとは、障害を持つ人々がウェブサイト上のコンテンツを簡単に閲覧および消費できるように設計された、技術的なプラクティスと標準のセットです。ウェブアクセシビリティコンテンツガイドライン(WCAG)はウェブ開発者のためのベストプラクティスを概説していますが、初心者は基本から始めるのが良いでしょう。

サイトをアクセシブルにすることはSEOに直接影響しませんが、アクセシビリティは優れたSEOと一致します。そのため、アクセシビリティのために最適化されたサイトは検索結果でより高くランク付けされる可能性があります。

ウェブアクセシビリティガイドラインとは何ですか?

ウェブアクセシビリティガイドライン文書は、障害を持つ人々がアクセスしやすいウェブサイトを作成するためのガイドラインを確立しました。ウェブアクセシビリティイニシアチブ(WAI)によって開発されたウェブアクセシビリティコンテンツガイドライン(WCAG)は、継続的に改善されています。

ガイドラインは、知覚可能、操作可能、理解可能、堅牢と定義される4つの原則に従っています。

ウェブアクセシビリティイニシアチブは、World Wide Web Consortium(W3)の一部です。

装飾画像の後 . . .

この投稿で、装飾画像とは何か、そしてなぜaltテキストを空白のままにするのがベストプラクティスなのかをご理解いただけたことを願っています。

次に、画像SEOと、画像がスキャン可能なコンテンツの作成にどのように役立つかについて学びましょう。

この記事がお役に立った場合は、YouTubeチャンネルを購読してください。そこには、さらに多くの役立つチュートリアルがあります。また、X(Twitter)LinkedIn、またはFacebookでフォローして、最新情報を入手することもできます。

AIOSEO を無料で試してみませんか?

AIOSEO Lite をインストールするには、WordPress ウェブサイトの URL を入力してください。

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、手数料が発生する可能性があることを意味します。当社は、読者に価値をもたらすと信じる製品のみをお勧めします。

著者アバター
シェリー・ゴセット コンテンツライター
シェリーは、アメリカ合衆国ニューハンプシャー州在住のSEOアナリストです。新しいSEOの動向について調査、実装、執筆に忙しくないときは、ハイキングやギターを弾いて過ごしています。

コメントを追加

コメントをお寄せいただきありがとうございます。すべてのコメントはプライバシーポリシーに従ってモデレーションされ、すべてのリンクはnofollowであることをご了承ください。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。