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

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

もちろん、すべてを画像として保存すれば、ユーザーが適切なフォントを持っていることなどを気にする必要はありません。しかし、SEOの場合は、テキストとして使用する方が良いと思いました。

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

seo css images

— ユーザー1551817
ソース

状況によって答えが大きく変わるため、これには本当の答えはありません。

— Insidesin

@insidesin、ロゴを常に画像にすることはできません。

— zzzzBov

ここではロゴについて話しているのではなく、ロゴと会社名について話している。

— Insidesin

@insidesinいいえ、OPによると、ロゴは画像と会社名で構成されています。名前はロゴの一部です。

— Angewは、

>I'm not sure whether to save the company name text as part of an image file, or to have it as actual text in the html and styled using css.

いいえ、彼はそれを入れないことを考えています。それはロケット科学ではありません。状況によっては、画像の外側に残されたテキストが有益です。

— Insidesin 2018年

回答:

Googleは会社のalt属性を高く評価しています

GoogleとBingはどちらも、ロゴがPNG、GIF、JPEGで繰り返し使用されることが多いことを理解しています。alt説明を使用してロゴをマークアップするだけで、あなたのビジネスにとってロゴであることを検索エンジンに通知できます。

基本的な例：

<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>

グーグル、CSSハッキングされたロゴを嫌う

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

この方法は、アクセシビリティ（障害のあるユーザー）にも影響します。

— サイモン・ヘイター
ソース

Altタグは、シーン/サイト内のすべての画像や読み込まれたオブジェクトに使用する必要があります。そろそろ定型文に近いはずです。

— Insidesin

テキストはロゴの一部であるため、画像内に保持します（標準以外のフォントを一致させ、ロゴとまったく同じように配置する必要がなくなるため）-いつでも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マイクロデータ検証ツール

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

— ピート
ソース

ALTタグには、アクセシビリティの理由で画像にテキストを含める必要があります。その目的は、スクリーンリーダーを使用する視覚障害者が画像とは何か、テキストを含むロゴの場合はその内容を理解できるようにすることです。会社名、存在する場合は電話番号、その他のテキストを含める必要があります。

— GeekOnTheHill

@GeekOnTheHillモバイルデバイスでは、電話番号をタップしてダイヤルすることができないため、アクセシビリティとuxの理由から、ロゴに電話番号を含めないでください。ただし、ロゴにスローガンなどの追加情報が含まれている場合は、altの説明で画像の内容を説明する必要があることに同意します。

— Simon Hayter

同意します、サイモン。ロゴに電話番号を表示することは、モバイルデバイスとタッチスクリーンの時代においては恐ろしい習慣です。ただし、お勧めできないのに電話番号がある場合は、ALTタグにも含める必要があると思います。私がこれを言う理由は、視覚障害者のための組織の代表者たちが、そうすべきだと私に強調して言ったからです。どうやら、スクリーンリーダーが解釈できるように電話番号が表示されないために会社に連絡できないことは、目の不自由な訪問者にとって頻繁にフラストレーションの原因となります。しかし、私は同意します。それがロゴにまったく含まれていない方が良いです。

— GeekOnTheHill

altロゴのコンテンツには「ロゴ」を含めないでください（もちろん、「ロゴ」が名前の一部でない限り）。

— 18年