로고의 회사 이름이 이미지 또는 텍스트 여야합니까?

내 웹 사이트에 로고 (이미지 및 회사 이름으로 구성)를 넣었습니다. 회사 이름 텍스트를 이미지 파일의 일부로 저장할지 또는 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>

자바 스크립트 스키마 예제 :

코드를 단순하게 유지하려면 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>

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 가이드 라인