画像のタイトル属性を理解する

公開: 2020-10-23

あなたのウェブサイトの画像を最適化することは簡単な仕事ではありません。長いページの読み込み時間を防ぐためにファイルサイズを管理できるようにする必要があるだけでなく、見落としがちな検索エンジン最適化（SEO）を改善する多くの機会も提供します。たとえば、画像のタイトル属性と、それがサイトの視覚要素で果たす役割に気付いていない場合があります。

この投稿では、画像のタイトル属性に光を当て、それがalt属性とどのように異なるかについて説明し、SEO戦略にとってそれが何を意味するかについて説明します。また、サイトの訪問者からサイトを非表示にする方法についても説明します。

さっそく飛び込みましょう！

私たちのYoutubeチャンネルを購読する

画像タイトル属性の概要

まず最初に：画像のタイトル属性は画像のファイル名と同じではありません。むしろ、写真やグラフィックのHTMLタグに含めることができる情報です。これが例で、最後にtitle属性があります。

<img src="filename.jpg" alt="description of your image" title="image title">

タイトル属性が持つ最も顕著な影響は、ユーザーが画像にカーソルを合わせると、サイトのフロントエンドで「ツールチップ」として表示されることです。

画像タイトル属性のツールチップの例。

すべてのブラウザがこの機能をサポートしているわけではありません。ただし、Firefoxはその数少ないブラウザの1つであり、Web上で3番目に人気のあるブラウザです。メディアライブラリを介してWordPressに画像のタイトル属性を追加できます。問題の画像をクリックして、[タイトル]フィールドに入力するだけです。

WordPressメディアライブラリに画像のタイトル属性を追加します。

ブロックエディタで直接追加することもできます。画像ブロックの詳細設定を展開し、[タイトル属性]フィールドに入力します。

ブロックエディタで画像のタイトル属性を追加します。

ホバーで画像のタイトルを表示する目的は、訪問者に少し追加のコンテキストを提供することです。たとえば、一部のコンテンツクリエーターは、画像に描かれている人物の名前を含めたり、ユーザーが知っておくと役立つ重要な詳細を含めたりします。

ただし、特にすべてのブラウザのユーザーに表示されるわけではないため、title属性だけに依存することは望ましくありません。場合によっては、キャプションの方が効果的かもしれません。また、画像にタイトル属性がある場合でも、画像に代替テキストを必ず追加する必要があります。

タイトル属性を作成するときは、それらをほんの数語に保つのが最善です。ホバーテキストが長すぎず、訪問者に価値を提供できるように、選択的かつ説明的である必要があります。

タイトル属性と代替属性の違い

タイトル属性を含めた場合でも、画像に代替テキストを追加することが重要であることは前述しました。コンテンツ作成者が画像のタイトル属性をalt属性と混同したり、両方を使用するのはやり過ぎだと思い込んだりするのはよくある間違いです。

alt属性は、HTMLタグ内の画像のaltテキストを指定します。これは、前からこの例にリストされている2番目の属性です。

<img src="filename.jpg" alt="description of your image" title="image title">

代替テキストの目的は、画像の読み込みに失敗したか、スクリーンリーダーを使用しているために、視覚要素を表示できないユーザーに視覚要素を説明することです。このテキストは、レンダリングできない場合に画像の代わりに表示されます。

読み込めない画像の代わりに代替テキストが表示されます。

WordPressでは、メディアライブラリまたはブロックエディタの任意の画像ブロックの設定を介して、画像に代替テキストを追加できます。これは、サイトがアクセシビリティ基準を満たしていることを確認するための鍵であるため、そうすることを強くお勧めします。

画像のtitle属性を使用してalt属性を置き換えようとしないことが非常に重要です。すべてのスクリーンリーダーがtitle属性をサポートしているわけではなく、キーボードナビゲーションに依存しているユーザーが画像にカーソルを合わせて画像を表示する方法がないため、サイトで重大なアクセシビリティの問題が発生する可能性があります。

画像タイトル属性がSEOに与える影響

画像のタイトル属性がSEOにとってどれほど重要であるかということになると、多くの混合メッセージングがあります。追加のキーワードを組み込むための優れた方法であると主張する人もいれば、検索エンジンボットはそれをクロールすらしないと言う人もいます。

追いかけるために、画像のタイトル属性は直接のランキング要素ではありません。すべての画像にタイトルを追加して画像を最適化しても、検索エンジンの結果でのページの表示に大きな変化はないでしょう。

ただし、タイトル属性を含めても、SEOの観点からサイトに悪影響を与えることはありません。実際、Googleはそれをお勧めします。検索エンジンボットがそれらをクロールし、キーワードを組み込んだ場合、少なくともGoogle画像検索結果で画像を後押しできる可能性があります。

さらに、画像のタイトルは、訪問者と重要な詳細を共有することにより、サイトのユーザーエクスペリエンス（UX）を向上させる可能性があります。これは、ページビュー、セッション期間、およびその他のそのようなメトリックなどのランキング要素に影響を与えることにより、SEOに間接的に寄与する可能性があります。

それでも、何度か言及したように、すべてのブラウザとデバイスがホバーテキストをサポートしているわけではありません。メディアライブラリを調べてすべてのファイルにタイトルを追加すると、ほとんどのユーザーに表示されない場合、時間の無駄になる可能性があります。

WordPressで画像タイトルのツールチップを非表示にする方法

画像タイトルのツールチップを非表示にすることをお勧めします。おそらく、訪問者がそれを煩わしく感じるか、主にSEOの目的で使用したいと思うかもしれませんが、読者があなたのコンテンツを理解するのを助けるためにそれが必要であるとは感じません。

ブロックエディタとメディアライブラリの画像からtitle属性を削除するだけです。ただし、その場合、SEOの潜在的なメリットは失われます。

ツールチップを非表示にしたいほとんどの人は、JavaScriptをサイトに追加して、画像タグに属性を保持し、フロントエンドに表示されないようにします。このプロセスを簡単にするために、InsertHeadersやFootersなどのプラグインを使用することをお勧めします。

スクリプトタグでラップされた次のコードを<head>セクションに追加します。

jQuery(document).ready(function($) {
    $('img[title]').each(function() { $(this).removeAttr('title'); });
});

Diviを使用している場合は、追加のプラグインのインストールをスキップして、 Divi>テーマオプション>統合に移動してこのコードを追加できます。

この画面の最初のコードエディタは、ヘッダーとフッターの挿入と同じように、JavaScriptをサイトの<head>セクションに追加します。

結論

何年にもわたってオンラインコンテンツを作成し、画像のタイトル属性について考えることはありません。ただし、それらを完全に無視すると、ユーザーに追加のコンテキストを提供する機会を逃す可能性があります。さらに重要なことに、この属性を誤用すると、サイトのアクセシビリティとSEOに悪影響が及ぶ可能性があります。

この投稿では、SEOを最大化できるように、画像のタイトル属性とalt属性の違いについて説明しました。また、フロントエンドで画像タイトルのツールチップを非表示にして、訪問者が写真やグラフィックにカーソルを合わせたときに表示されないようにする方法についても説明しました。

画像のタイトル属性や画像の最適化について質問がありますか？ 以下のコメントセクションにそれらを残してください！

ジェーンケリー/Shutterstock.comによる画像