徽标中的公司名称应该是图像还是文字？

我在网站上放了一个徽标（包含图片和公司名称）。我不确定是将公司名称文本保存为图像文件的一部分，还是将其作为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格式来实现。这种格式允许您在图片中使用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属性中或使用微数据来增强您的搜索引擎优化：

<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徽标标记准则