H1テキストをロゴ画像に置き換える：SEOとアクセシビリティのベストプラクティス
そこで今回は、代替テキスト、CSS装飾、SVGアイコンなどを活用した、SEOとアクセシビリティを両立するH1ロゴの代替方法をご紹介します。
代替テキスト（Alt Text）の使用
代替テキストは、画像の内容をテキストで記述するものです。検索エンジンは画像を直接認識できないため、代替テキストを通してH1の内容を理解することができます。
代替テキストを作成する際のポイントは以下の通りです。
- 簡潔かつ正確にH1の内容を記述する
- キーワードを含める
- 長さは適切な長さに保つ
- 同じ画像に対して同じ代替テキストを使用する
HTMLコードは以下のようになります。
<h1><img src="logo.png" alt="企業名 - ウェブサイト説明"></h1>
CSS装飾による疑似要素の活用
CSSの疑似要素を用いて、背景画像にH1テキストを重ねる方法です。この方法であれば、画像とテキストを非表示にすることなく、SEOとアクセシビリティを両立することができます。
h1 {
background-image: url('logo.png');
background-position: center;
background-size: contain;
text-align: center;
color: transparent;
}
SVGアイコンの利用
SVGアイコンは、ベクター画像の一種であり、拡大縮小しても画質が劣化しないという特徴があります。テキストと画像を一体として表現することができ、SEOにも有利です。
SVGアイコンを利用する場合は、HTMLとCSSの両方を編集する必要があります。
<h1><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path d="M..." fill="#000" />
</svg></h1>
h1 svg {
width: 100%;
height: auto;
}
- 画像を使用する場合は、ファイルサイズを軽量化する
- 画像の読み込み速度を遅くしないように注意する
代替テキスト
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>代替テキストを使ったH1ロゴ</title>
</head>
<body>
<h1><img src="logo.png" alt="株式会社サンプル 企業サイト"></h1>
</body>
</html>
このコードでは、logo.pngという画像をH1見出しに使用し、株式会社サンプル 企業サイトという代替テキストを設定しています。
CSS装飾
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS装飾を使ったH1ロゴ</title>
<style>
h1 {
background-image: url('logo.png');
background-position: center;
background-size: contain;
text-align: center;
color: transparent;
}
</style>
</head>
<body>
<h1>H1見出し</h1>
</body>
</html>
このコードでは、CSSを使用して、logo.pngという画像をH1見出しの背景画像として設定しています。テキストは透明にして、画像を重ねています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>SVGアイコンを使ったH1ロゴ</title>
</head>
<body>
<h1>
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path d="M 10,20 L 50,50 L 90,20 Z" fill="#000" />
</svg>
</h1>
</body>
</html>
このコードでは、SVGアイコンを使用して、H1見出しにロゴを表示しています。
- 上記のコードはあくまで基本的な例です。デザインや要件に合わせて、自由にカスタマイズしてください。
- CSSやSVGの詳細については、別途調べていただく必要があります。
JavaScriptによる非表示化
JavaScriptを使用して、H1テキストとロゴ画像を切り替える方法です。この方法であれば、ページの読み込み直し時にテキストが表示されるため、SEOにも有利です。
JavaScriptのコードは以下のようになります。
const h1Element = document.querySelector('h1');
const logoImage = document.createElement('img');
logoImage.src = 'logo.png';
logoImage.alt = '企業名 - ウェブサイト説明';
h1Element.appendChild(logoImage);
logoImage.addEventListener('load', function() {
h1Element.style.display = 'none';
});
画像のdata-src属性とsrc属性の使い分け
HTML5のdata-src属性とsrc属性を利用して、JavaScriptで画像を読み込む方法です。この方法であれば、初期表示時にテキストが表示され、JavaScriptが有効な環境ではロゴ画像に切り替えることができます。
<h1><img data-src="logo.png" alt="企業名 - ウェブサイト説明" src=""></h1>
const imgElements = document.querySelectorAll('img[data-src]');
for (const imgElement of imgElements) {
const src = imgElement.getAttribute('data-src');
imgElement.src = src;
}
それぞれの方法のメリットとデメリット
| 方法 | メリット | デメリット |
|---|---|---|
| 代替テキスト | シンプルでわかりやすい | 画像の読み込み速度が遅くなる可能性がある |
| CSS装飾 | SEOに優しい | デザインが複雑になる可能性がある |
| SVGアイコン | ベクター画像なので高画質 | 作成に手間がかかる |
| JavaScriptによる非表示化 | SEOに有利 | JavaScriptが有効でない環境ではロゴ画像が表示されない |
| 画像のdata-src属性とsrc属性の使い分け | 初期表示時にテキストが表示される | JavaScriptの知識が必要 |
css xhtml image
