Якщо назва логотипу компанії має бути зображенням або текстом?

Я розміщую логотип (що містить зображення та назву компанії) на своєму веб-сайті. Я не впевнений, чи потрібно зберегти текст назви компанії як частину файлу зображення, чи мати його як фактичний текст у html та стилізувати за допомогою css.

Очевидно, якщо я зберігаю все це як зображення, то мені не потрібно турбуватися про те, щоб користувач мав правильні шрифти тощо. Але я подумав, що мати його як текст може бути краще для SEO.

Це питання смаку чи один спосіб набагато кращий за інший?

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 у зображенні, яке побачать користувач та пошукові системи. Якщо доступність викликає занепокоєння, то слід зберігати назву компанії як 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 попередні приклади, а не цей ... Це було корисно "назад у день", але більше не потрібно з наявною розміткою.

Цей метод також є доступним для доступності (обмежені користувачі).

Оскільки текст є частиною логотипу, я б зберігав його у зображенні (економить при спробі зіставити будь-які нестандартні шрифти та потребувати позиціонування саме так, як є в логотипі) - ви завжди можете помістити його в атрибут alt або використовуйте мікродані, щоб поліпшити свій 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 щодо розмітки логотипу