Должно ли название компании на логотипе быть изображением или текстом?

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

Очевидно, что если я сохраню все это как изображение, мне не придется беспокоиться о том, что у пользователя есть правильные шрифты и т. Д. Но я подумал, что использование текста в качестве текста может быть лучше для SEO.

Это вопрос вкуса или один способ намного лучше другого?

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. Этот формат позволяет вам использовать ТЕКСТ в изображении, которое увидят пользователи и поисковые системы. Если проблема заключается в доступности, вам следует оставить название компании в текстовом виде, а не в форме, например, создать контуры.

например что-то вроде этого:

<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 по разметке логотипа