web-dev-qa-db-ja.com

H1内のインラインSVG

大きなPNG画像をインラインSVG画像に置き換えて、ウェブサイトを更新しています。

私の現在のコードは次のようなものです。

<h1>
    <img src="logo.png" alt="Company Name" />
</h1>

そして、私はそれを次のようなものに置き換えたいです：

<h1>
    <svg>
        <title>Company Name</title>
    </svg>
</h1>

私の知る限り、これは正しいHTML5マークアップです。しかし、SEOのH1タグとTITLEタグの重要性をすべて読んだ後に、これがページのランキングに悪影響を与える可能性があることを少し心配しています。

誰もこれについてもっと知っていますか、これについてのヒントがありますか？

（タグのsrc-attributeを変更してロゴのSVGバージョンを指すようにすることができることは承知していますが、HTTPリクエストの数を減らすためにインラインで含めることを好みます。）

seopagerankhtml5svg
3
Alexander Jank

タイトルを追加する2つの方法：CSSおよびポジショニングとZ-Indexを使用します。しかし、これはsvgではうまく拡張できません。また、SVGはスケーリングに最適です。 foreignObjectタグを使用して、SVGにhtmlアイテムを追加できます。少なくともボットのようなtekstbrowserはそれを読むことができます。 Google-botがそれで何かをするかどうかはわかりませんが、少なくとも読みやすいです。私の経験では、そのような詳細を過大評価することはありません。 svgのようなテキストは画像よりもはるかに速く読み込まれます。Googleはサイトの速度に報います:)

2
Terradon