ant2マガジン

こんにちは。

アントアントのメルマガ担当です。
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。
今回は前回ご紹介したalt属性と混合しやすいtitle属性についてご紹介します。

★前回ご紹介したalt属性についてはこちらをご確認ください。

title属性とは要素にツールチップとして補足的に情報を追加することができる属性のことを指します。

※ツールチップ：マウス・カーソルをテキストやリンクテキストに置く（マウスオーバーさせる）とtitle属性として設定されたテキストが表示されることをツールチップと呼びます。

alt属性を設定した場合とtitle属性を設定した場合の画像にカーソルをおいて確認してみましょう。

alt属性を設定した猫の画像は表面上では何の画像が挿入されているかの説明はわかりませんが、
title属性を設定した猫の画像は「ツールチップ」として「眠る猫」とテキストが表示されます。

検索エンジンは画像の情報を知るために「alt属性」を読み込むことで画像の中身を評価し、
サイト訪問ユーザーは画像の補足説明を「title属性」で確認することができます。

※alt属性について詳しくはこちら

つまり、
alt属性は検索エンジンに対してわかりやすくWEBサイトの情報を伝えるために設定する属性であり、
title属性はサイト訪問ユーザーに対して情報をわかりやすく伝えるための属性であるということになります。

title属性とSEO

title属性はユーザービリティの向上には役立ちますが、マウスカーソル（マウスオーバー）という概念がないスマートフォンやタブレットの普及につれてツールチップを表示させる必要がないためか、最近ではSEO対策の効果としては影響がないといわれています。

そのため、SEO対策としてはtitle属性よりもalt属性を優先して設定したほうが良いといえます。

画像にtitle属性を設定する方法１

１．画像を含むコンテンツパーツを挿入

２．画像のパーツがあるコンテンツパーツを右クリック＞ショートカットメニューから「画像設定」を開く

３．画像プロパティダイアログが表示され、「画像の説明（title）」からalt属性を入力→OK

画像にtitle属性を設定する方法２

１．画像を含むコンテンツパーツを挿入

２．画像のパーツがあるコンテンツパーツを右クリック＞ショートカットメニューから「フルエディタの編集」を開く

４．イメージプロパティダイアログが表示されるので、ダイアログ内の《高度な設定》タブより

title属性を入力→OK

リンクテキストにtitle属性を設定する方法

１．テキストのパーツがあるコンテンツパーツを右クリック＞ショートカットメニューから「フルエディタの編集」を開く、またはダブルクリックでテキスト編集画面を表示させる

３．ハイパーリンク設定ダイアログが表示されるのでリンクを設定する

４．リンクの設定完了後《高度な設定》タブよりtitle属性を入力→OK

今回はtitle属性についてご紹介しました。

title属性とalt属性はよく混合されやすいですが、誰のための設定なのか、
SEO対策として有効かどうかを検討したうえで各設定を行っていただくことをおすすめします。

ant2 CMSではalt属性同様に簡単に設定することができるので是非、この機会に設定をしてみてください。

こんにちは。
アントアントのメルマガ担当です。
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。

今回はalt属性についてご紹介します。

alt属性とは、WEBサイトのページ内に挿入している画像の内容を検索エンジンに伝えたり、
なんらかの理由で画像が読み込めない際に画像の代替テキストとして表示するための情報のことを指します。

画像が読み込めない時以外では表面上確認することがあまりない記述なので、
alt属性を設定していなくても、ページに画像と同じ内容を記載しているからSEOには
影響しないだろうとお考えの人もいるかもしれません。
しかし、alt属性を設定することはSEO対策に繋がるといわれています。

なぜalt属性がSEO対策に繋がるのか、それは『検索エンジンにWEBサイトの情報を伝える』という点が重要となります。

alt属性が設定されていない画像の内容は、
WEBサイトを実際に目でみた場合と検索エンジンがクローラーで巡回した場合とで全く変わります。

【設定されていない場合】

設定されていない場合、検索エンジンからするとどれだけ重要な内容の画像だったとしても、
alt属性が設定されていないことにより『検索エンジンに対して情報不足なサイトの画像』とされます。

そのため、検索エンジンに対しても情報を伝える手段として設定する必要があるのです。

通常はHTMLのソースから下記の記述を書く必要がありますが、
ant2 CMSではより簡単にalt属性を設定していただくことが可能となっております。

HTMLソース例
<img src="画像名.jpg" alt="alt属性の内容">

ant2 CMSでは以下の方法でalt属性の設定を行うことができます。

※《サーバーブラウザー内の画像の説明から設定》は操作手順によって反映されない場合がございますのでご注意ください。

★コンテンツパーツの「画像プロパティ」から設定

1．画像のパーツがあるコンテンツパーツを右クリック＞ショートカットメニューから「画像設定」を開く

2．画像プロパティダイアログが表示され、「画像の説明（alt）」からalt属性を入力→OK

★フルエディタの「イメージプロパティ」から設定

1．画像のパーツがあるコンテンツパーツを右クリック＞ショートカットメニューから「フルエディタの編集」を開く

2．フルエディタ編集画面が開くので、ツールバーの「イメージ挿入/編集」のアイコンをクリック

3．イメージプロパティダイアログが表示されるので、ダイアログ内の「代替テキスト」にalt属性を入力→OK

★サーバーブラウザー内の画像の説明から設定

1．画像のコンテンツパーツをダブルクリックまたはコントロールパネル内[作成]＞[素材]＞[画像の管理]からサーバーブラウザーを開く

　追加したい画像ファイルのハンバーガーメニューを展開

2．画像ファイルのハンバーガーメニューを展開→「ファイルの説明」をクリック

3．「ファイルの説明」に入力した内容がalt属性となるので入力→OK

※alt属性の入力・画像の選択順や挿入方法によって設定されない場合があるのでご注意ください。

【設定OK】

サーバーブラウザーで画像をアップロード→「ファイルの説明」よりalt属性入力
→コンテンツパーツ（画像パーツあり）を選択して画像挿入→alt属性は設定・反映OK

【設定NG】
1．サーバーブラウザーでalt属性を設定する前に、その画像がサイト内で既に挿入されている場合
使用されている箇所の画像に対しては設定が反映されませんのでご注意ください。
※既に画像を挿入されている場合は《コンテンツパーツの「画像プロパティ」から設定》または
《フルエディタの「イメージプロパティ」から設定》にてalt属性設定を行ってください。

2．「フルエディタの編集」から画像を挿入する（コンテンツパーツとして挿入しない）場合は
イメージプロパティの「代替テキスト」にてalt属性を設定していただく必要がございます。

今回はalt属性についてご紹介しました。
WEBサイト制作ではなかなかalt属性の設定まで手が回らないという方も多いかもしれませんが
ant2 CMSでは簡単に設定することができるので是非、この機会に設定をしてみてください。