葉ログ

何かが落ちてるブログです、拾って帰ってください。葉ログの写真はフリー素材で使用許可は不要です。

検索エンジンから見えますように。記事の写真にalt属性をつけよう。

 

今週のお題「暑すぎる」

検索エンジンから見えますように

かなたの写真

記事の写真にalt(オルト)属性をつけよう

 

ブックマークすると後でまた読めます。
このエントリーをはてなブックマークに追加 コメント無しでもいいのです。  

 

かなたをちゃんと見て

見て見て、かなたでーす。男の子でーす。ちゃんと見てねー。

ハチワレ猫のかなた

写真のalt属性

記事に掲載する写真には、alt(オルト)属性を持たせることができます。

alt属性とは、画像の代替のテキスト情報のことです。

 

読者に優しいalt属性

ブラウザや通信環境が悪いと写真が表示されない場合がありますが、alt属性を記述しておくと、写真の代わりに「写真の説明のテキスト」を表示してくれます。また、音声読み上げソフトだと写真はスルーされますが、alt属性を記述しているとちゃんと「写真の説明」を読み上げてくれるのです。

 

寝そべるハチワレ猫かなた坊ちゃん
薄目で寝そべるハチワレ猫かなた坊ちゃん

 

検索エンジンに優しい alt属性

検索エンジンは写真の内容を理解できません。 alt属性、前後の文脈、ファイル名、サイトマップなど他の情報から画像のデータを得ています。画像検索での上位を狙うなら alt属性の記述はとても有効な手段なのです。

alt属性の記述の方法

alt属性の記述の方法は、写真を張り付ける記述の中に ”alt="写真の説明文"を追加記述します。ここでのかなたの写真では、下記の通りです。

<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/m/masuhiro6595/20200805/20200805213426.jpg" alt="かなたの写真" class="hatena-fotolife" itemprop="image" /></p>

 

はてなブログでは簡単設定

はてなブログでは、alt属性の設定が簡単にできます。

かなたの写真にalt属性を持たせてみましょう。

 

ハチワレ猫かなた君

はてなブログでは記事に写真を載せる時に、

①「+写真を投稿」タブを開き

②写真を選択して、「選択した写真を貼り付け」

を、押下すると、下記のような詳細設定ができます。「キャプション」は写真のタイトルで写真下に表示されます。しかし、表示されない方がスッキリして好ましい場合もあります。また、title属性は画像以外にも付加でき、カーソルを当てるとフキダシが出るサブ情報のようなものです。

その下方にある「 画像にalt属性を指定する(上級者向け)」にチェックを入れ、写真の説明文を入力します。

はてなブログでのalt属性設定画面


「記事編集画面に張り付ける」で終了です。

ここでは「かなたの写真」と記述しましたが、本来なら「寝そべるハチワレ猫」の方がより良い画像説明で検索にかかると思われます。

 

ハチワレ猫かなたの写真

にゃんと、簡単ニャー。

 

おわりに

毎日、暑すぎますね。

うちの猫らも日中は室内でとろけております。

ハチワレ猫かなたの写真

毎日、早朝4:30には出動ニャー。

 

 

www.happablog.com

 

 

アマゾンプライム
Prime Video