我正在网站上放置徽标(包含图片和公司名称)。我不确定是否要将公司名称文本另存为图像文件的一部分,还是将其作为html中的实际文本并使用CSS设置样式。图片,那么我不必担心用户使用正确的字体等。但是,我认为将其作为文本可能对SEO更好。

这是一个品味问题还是一个问题比其他方法好得多?

评论

这没有真正的答案,因为答案会随情况而变化。

@insidesin,任何徽标都不应总是图像。

我们不是在这里谈论徽标,我们是在谈论徽标和公司名称。

@insidesin不,O​​P说徽标包括图像和公司名称。名称是徽标的一部分。

>我不确定是将公司名称文本保存为图像文件的一部分,还是将其作为html中的实际文本并使用CSS设置样式。不,他正在考虑不将其放入。这不是火箭科学。在某些情况下,留在图像外部的文本会有所帮助。

#1 楼

Google喜欢公司的alt属性

Google和Bing都知道徽标经常会在PNG,GIF和JPEG中重复出现。只需使用替代说明标记徽标即可通知搜索引擎您的企业徽标。

一个基本示例:

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

A模式示例:

<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个示例,而不是这个示例。。。这在过去很有用,但是不再需要可用的标记。

这种方法也很容易获得可访问性(残障的用户)。 br />

评论


Alt标签应用于场景/站点中的每个图像和/或加载的对象。到现在为止应该差不多了。

–insidesin
18年1月9日,0:38

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

评论


出于任何可访问性的原因,ALT标签应在图像中包含任何文本。请记住,它的目的是帮助使用屏幕阅读器的盲人和视障人士知道图像是什么,对于包含文字的徽标,他们要说什么。它应该包含公司名称,电话号码(如果有)以及任何其他文本。

–GeekOnTheHill
18年1月8日,11:28



@GeekOnTheHill徽标出于可访问性和用户体验的原因,绝对不能包含电话号码,因为在移动设备上,他们将无法点击它并拨打电话号码。但是我同意,如果徽标包含标语等其他信息,则替代说明应描述图像的内容。

–西蒙·海特(Simon Hayter)♦
18年1月8日在11:45

我同意,西蒙。在移动设备和触摸屏时代,在徽标中放置电话号码是一种可怕的做法。但是,如果尽管不建议使用电话号码,那么我认为它也必须在ALT标签中。我之所以这样说,是因为盲人组织的代表着重告诉我应该这样做。显然,因为电话号码没有以屏幕阅读器可以解释的任何方式出现而无法联系公司,这是盲人访客经常感到沮丧的原因。但我同意,最好完全不在徽标中。

–GeekOnTheHill
18年1月8日在12:12

徽标的替代内容不应包含“徽标”(当然,除非名称中包含“徽标”)。

–未成年
18年1月10日在17:41