web-dev-qa-db-ja.com

ロゴの会社名は画像またはテキストにする必要がありますか？

ウェブサイトにロゴ（画像と会社名で構成される）を配置しています。会社名のテキストを画像ファイルの一部として保存するのか、それともHTMLの実際のテキストとして保持し、CSSを使用してスタイル設定するのかはわかりません。

もちろん、すべてを画像として保存すれば、ユーザーが適切なフォントを持っているかどうかを心配する必要はありません。

これは趣味の問題ですか、それとも他の方法よりもはるかに優れていますか？

seocssimages
11
user1551817

Googleは会社のalt属性を気に入っています

GoogleとBingはどちらも、ロゴがPNG、GIF、JPEGで頻繁に繰り返されることを理解しています。代替説明を使用してロゴにマークを付けるだけで、ビジネスにロゴであることを検索エンジンに通知できます。

基本的な例：

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

スキーマの例：

<div itemscope itemtype="http://schema.org/Organization">
  <a itemprop="url" href="http://www.example.com/">Home</a>
  <img itemprop="logo" src="http://www.example.com/logo.png" alt="Company Name Logo"/>
</div>

JavaScriptスキーマの例：

コードをシンプルに保ちたい場合は、JSON-LDスキーマを使用します。ページコードを編集する必要はなく、ページの最後にコードを追加するか、Googleタグマネージャーを使用して、指を離さずにページに挿入します。

例えば

<img src="logo.png" alt="Company Name Logo">
<script type="application/ld+json">
  {
  "@context": "http://schema.org/",
  "@type": "Organization",
  "url": "http://www.example.com/",
  "logo": "http://www.example.com/logo.png"
  }
</script>

GoogleはSVGロゴも気に入っています

GoogleまたはBingで画像内に会社名を表示する場合は、SVG形式を使用して確認できます。この形式を使用すると、ユーザーおよび検索エンジンで表示される画像内でTEXTを使用できます。アクセシビリティが懸念される場合は、会社名を形状としてではなく、テキストとして保持する必要があります（例：アウトラインの作成）。

例：次のようなもの：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" enable-background="new 0 0 500 500" xml:space="preserve">
    <polygon fill="#998675" points="125,466.5 0,250 125,33.5 375,33.5 500,250 375,466.5 "/>
    <rect x="137.5" y="137.5" fill="#534741" width="225" height="225"/>
    <polygon fill="#C7B299" points="250,175 294.1,189.3 321.3,226.8 321.3,273.2 294.1,310.7 250,325 205.9,310.7 178.7,273.2 178.7,226.8 205.9,189.3 "/>
    <text transform="matrix(1 0 0 1 196.3787 253.5039)" font-family="'Montserrat-Bold'" font-size="12">COMPANY NAME</text>
</svg>

GoogleはCSSハッキングされたロゴを嫌います

検索エンジンは、text-indent e.g -9999px; background: url(logo.png) no-repeat;などのトリックやその他のもので表示されるロゴを嫌います。背景は常に背景として使用する必要があります。ページ上のリソース要素の場合は、常に画像であり、背景ではありません。これではなく、前の2つの例を使用します。これは「昔」に便利でしたが、マークアップを使用する必要がなくなったためです。

この方法は、アクセシビリティ（障害のあるユーザー）にとっても面倒です。

9
Simon Hayter

テキストはロゴの一部であるため、画像内に保持します（非標準のフォントに一致させようとすることを避け、ロゴ内にあるように正確に配置する必要がありません）-常にalt属性に配置できますまたは、microdataを使用してseoを強化します。

<div id="main-logo-holder" itemscope itemtype="http://schema.org/Organization">
  <meta itemprop="name" content="Company Name">
  <meta itemprop="description" content="Company Description">
  <a itemprop="url" id="logo-home" href="https://www.website.co.uk/" class="main-logo">
    <img itemprop="logo" src="logo.jpg" alt="Company Name Logo">
  </a>
</div>

組織のマイクロデータの詳細

Google Microdata Validation Tool

ロゴマークアップに関するGoogleガイドライン

17
Pete