Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressで画像にタイトル属性を簡単につける方法(2つ)

WordPressで画像にタイトル属性を追加することは、アクセシビリティを向上させ、ビジュアルに追加のコンテキストを提供するシンプルで効果的な方法です。

Title属性は、ユーザーが画像にマウスオーバーしたときに追加情報を提供します。これは、スクリーンリーダーや検索エンジンが画像の内容を理解するのに役立ちます。

私たちは16年以上ブログを運営しており、視覚的に魅力的な投稿をすることの重要性を学んできました。コンテンツを際立たせるために、私たちは一貫して画像を追加し、文章を分断して読者の注意を引くようにしています。

さらに、各画像には必ずタイトル属性を付けています。時間をかけて、私たちはこのような小さなディテールがいかに洗練された外観を作り出し、コンテンツに対するユーザーのインタラクションを向上させるかを見てきました。

この投稿では、WordPressで画像にタイトル属性を簡単に追加する方法を紹介します。

Adding the title attribute to images in WordPress

画像のTitle属性とは?

クローラーやボット、画面読み上げ端末は、あなたの画像を実際に見ることはできません。代わりに、次のようなHTMLが表示されます:

<img src="/path/to/image/fruits.jpg" width="100" height="100" />

ほとんどの場合、このコードはアクセシビリティ・ツールや検索エンジンが画像の意味を理解するのに役立ちません。

そのため、画像にはタイトルタグを付けることをお勧めします。例えば

<img src="/path/to/image/fruits.jpg" width="100" height="100" alt="A fruit basket" title="Fruit Basket" />

有益で適切なタイトルタグは、Googleのような検索エンジンがあなたの画像を正しくインデックスし、あなたのようなコンテンツを検索している人々に表示するのに役立ちます。これにより、画像のSEOを改善し、ブログのトラフィックを増やすことができます。

スクリーンリーダーなどのアクセシビリティ・ツールは、タイトルを読み上げるので、視力に問題のある訪問者にも役立ちます。

また、WordPressのエラーなどで実際の画像を表示できない場合に、WordPressサイトが表示する代替タグ属性を追加することもできます。

Broken image path

それでは、WordPressブログやサイトで画像にタイトル属性を追加する方法を見ていきましょう。以下のクイックリンクから、使いたい方法にジャンプしてください:

方法1:ブロックエディターを使って画像にタイトル属性を追加する

WordPressのコンテンツエディターで、画像にaltテキストとタイトル属性を簡単に追加できます。投稿 ” 新規追加から投稿を作成するだけです。

次に「+」アイコンをクリックし、画像ブロックを選択して投稿やページに画像を追加します。

Add image block

メディアライブラリから画像を選択するか、コンピューターから画像をアップロードすることができます。どのオプションを選択する場合でも、メディアライブラリの画像をクリックして選択してください。

タイトル」フィールドにテキストを入力して、代替テキストを追加できます。

Adding a title to an image in WordPress

タイトル」フィールドもありますが、これはWordPressがメディアライブラリでメディアファイルを識別するために内部的に使用するタイトルです。このトピックについては、WordPressの画像altテキストと画像タイトルの違いをご覧ください。

HTML画像のタイトル属性を追加するには、通常通り画像をページや投稿に追加します。次に、右側のメニューにある「詳細」セクションをクリックして展開します。

The 'Advanced' image settings in the WordPress page and post editor

これには’Title attribute’フィールドがあり、これが本当のHTML画像タイトル属性です。

使用したい情報をフィールドに入力するだけです。

Adding a title attribute to images in WordPress

更新」または「公開」をクリックして、変更を反映させることができます。

画像の上にマウスオーバーするだけで、タイトルタグを含むポップアップが表示されます。

An example of an image with a title attribute in WordPress

方法2:WordPressクラシックエディターを使って画像にタイトル属性を追加する。

クラシックエディターを使用している場合、タイトル属性を追加する手順は少し異なります。クラシックエディターで「メディアを追加」ボタンをクリックし、画像を選択します。

Add image classic editor

新規画像をアップロードするか、メディアライブラリから画像を選択します。メディアライブラリの右側にあるフィールドを使って、altテキストとタイトルを追加できます。

繰り返しますが、’Title’はWordPressが内部的に使用するものであり、SEOやアクセシビリティを向上させる真の画像タイトル属性ではないことに留意してください。

Select image classic editor

準備ができたら、「投稿に挿入」ボタンをクリックします。

そこで画像をクリックして選択し、小さな鉛筆アイコンを選択します。画像の詳細」ポップアップが表示されます。

クリックして「詳細オプション」セクションを展開し、「画像タイトル属性」フィールドにタイトルタグを入力します。

Image title attribute field

更新」ボタンをクリックして変更を保存することをお忘れなく。

これでページや投稿を公開し、画像のaltテキストとタイトルタグをライブにすることができます。

Image title attribute popup

画像SEOを強化するボーナスのヒント

メディアライブラリに画像をアップロードしたら、次は検索エンジン用に画像を最適化しましょう。こうすることで、Googleが画像をインデックスしやすくなり、上位表示されやすくなります。

そのためには、キャプション、タイトル、altテキスト属性に関連キーワードを追加するよう心がけなければならない。

Add relevant keywords in the caption, title, and alt text

また、市場で最高のSEOプラグインであるAll In One SEO for WordPressを使うこともできる。

altテキスト、画像タイトル、キャプションなどを自動的に設定する素晴らしいImage SEOアドオンが付属しています。また、SEOランキングを向上させるために適切な画像サイトマップを追加します。

All in One SEO

さらに、このプラグインでは添付ファイルページを無効化することができます。これらのページは実際の画像の拡大版のみを表示し、SEOに悪影響を及ぼします。

添付ファイルページを無効化するには、All In One SEO ” 検索外観ページにアクセスし、「画像SEO」タブに切り替えます。ここから、’Redirect Attachment URLs’オプションが’Attachment’に設定されていることを確認してください。

Disable attachment pages

これで、添付ファイルのページは画像そのものにリダイレクトされる。

他にも、画像ファイルに説明テキストを使ったり、画像を圧縮したり、バックリンクを追加してランキングを上げることもできます。より多くのヒントやトリックについては、画像SEOの初心者ガイドをご覧ください。

この投稿が、WordPressで画像にtitle属性を簡単に追加するのにお役に立てば幸いです。また、WordPressでAIを使って画像を生成する方法についての究極のガイドと、専門家が選んだ最高の画像圧縮プラグインもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

14件のコメント返信を残す

  1. Costas Draco

    How can you change attribute title for the hero image?

    Thanks
    BR

    • WPBeginner Support

      If you mean the featured image then that would read the title set for the image from your media library.

      管理者

  2. Dave

    How do I change the html title for existing images on the website?

    • WPBeginner Support

      You would be able to go back and edit the title by editing the post.

      管理者

  3. Rubb

    “Restore Image Title” is not available anymore

    • WPBeginner Support

      Thank you for letting us know, we’ll be sure to look into updating this article as we are able

      管理者

      • Rubb

        Thanks, hope someone will create plugin or share the code

  4. Roshni

    Thank you for the explanation.

    Message on wordpress site for this plugin “This plugin was closed on December 24, 2018 and is no longer available for download. Reason: Guideline Violation.”

    Is there a substitute available?

    • WPBeginner Support

      While we don’t have a recommendation at the moment, we will be sure to take a look for alternatives.

      管理者

  5. Ehsan

    thanks for this great article !

  6. Diana Auerhammer

    Like it!! Now, I have to decide if I will go back and fix old images.

  7. Miha

    Is there a way to add tite tags to all old pics?

  8. Daniel

    This method does not appear to work images in WP galleries.

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。