Tên công ty trong logo nên là một hình ảnh hoặc văn bản?

Tôi đang đặt logo (bao gồm hình ảnh và tên công ty) trên trang web của mình. Tôi không chắc có nên lưu văn bản tên công ty như một phần của tệp hình ảnh hay để nó dưới dạng văn bản thực tế trong html và được tạo kiểu bằng css.

Rõ ràng nếu tôi lưu tất cả dưới dạng hình ảnh thì tôi không phải lo lắng về việc người dùng có phông chữ phù hợp, v.v. Nhưng tôi nghĩ rằng có nó dưới dạng văn bản có thể tốt hơn cho SEO.

Đây có phải là một vấn đề của hương vị hoặc là một cách tốt hơn nhiều so với cách khác?

Google thích thuộc tính alt công ty

Cả Google và Bing đều hiểu rằng một logo thường sẽ được lặp lại trong suốt PNG, GIF và JPEG. Chỉ cần đánh dấu logo bằng mô tả alt để thông báo cho các công cụ tìm kiếm rằng đó là LOGO cho doanh nghiệp của bạn.

Một ví dụ cơ bản:

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

Một ví dụ về lược đồ:

<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>

Một ví dụ về Lược đồ JavaScript:

Nếu bạn muốn giữ mã của mình đơn giản thì hãy sử dụng Lược đồ JSON-LD vì bạn không bao giờ cần chỉnh sửa mã trang mà chỉ cần thêm mã ở cuối trang hoặc sử dụng Trình quản lý thẻ của Google để tiêm vào trang mà không cần nhấc ngón tay,

ví dụ

<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 cũng thích logo SVG

Nếu bạn muốn Google hoặc Bing nhìn thấy tên công ty của bạn trong hình ảnh thì bạn có thể làm như vậy bằng cách sử dụng định dạng SVG. Định dạng này cho phép bạn sử dụng văn bản trong hình ảnh mà người dùng và công cụ tìm kiếm sẽ nhìn thấy. Nếu khả năng truy cập là một mối quan tâm thì bạn nên giữ tên công ty là văn bản và không phải là hình dạng, ví dụ như tạo đường viền.

ví dụ như một cái gì đó như thế này:

<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 không thích logo bị hack CSS

Các công cụ tìm kiếm không thích các logo được hiển thị với các thủ thuật và những thứ khác giống nhau, chẳng hạn như text-indent e.g -9999px; background: url(logo.png) no-repeat;. Hình nền nên luôn được sử dụng làm nền. Nếu đó là một yếu tố tài nguyên trên trang thì nó luôn là hình ảnh và không bao giờ là nền. Sử dụng 2 ví dụ trước đây và không phải ví dụ này ... điều này rất hữu ích "quay lại trong ngày" nhưng không còn cần thiết với đánh dấu có sẵn.

Phương pháp này cũng hút cho khả năng tiếp cận (người dùng bị suy giảm).

Vì văn bản là một phần của logo, tôi sẽ giữ nó trong hình ảnh (tiết kiệm khi cố gắng khớp với bất kỳ phông chữ không chuẩn nào và phải định vị chính xác như trong logo) - bạn luôn có thể đặt nó vào thuộc tính alt hoặc sử dụng microdata để tăng cường seo của bạn:

<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>

Thông tin thêm về tổ chức microdata

Công cụ xác thực Google Microdata

Nguyên tắc của Google về đánh dấu Logo