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


11

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?


Điều này không có câu trả lời thực sự vì câu trả lời thay đổi dữ dội theo tình huống.
bên trong

2
@insidesin, không có logo nên luôn là hình ảnh .
zzzzBov

Chúng ta không nói về logo ở đây, chúng ta đang nói về logo và tên công ty.
bên trong

2
@insidesin Không, OP cho biết logo bao gồm hình ảnh và tên công ty . Tên là một phần của logo.
Angew không còn tự hào về SO

>I'm not sure whether to save the company name text as part of an image file, or to have it as actual text in the html and styled using css. Không, anh ta dự tính không đưa nó vào. Đó không phải là khoa học tên lửa. Trong một số tình huống, văn bản để lại bên ngoài hình ảnh sẽ có ích.
bên trong

Câu trả lời:


9

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


Thẻ Alt nên được sử dụng cho mọi hình ảnh và / hoặc đối tượng được tải trong cảnh / trang web của bạn. Bây giờ nó gần như là nồi hơi.
bên trong

17

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


3
Thẻ ALT phải chứa bất kỳ văn bản nào trong hình ảnh vì lý do tiếp cận trong mọi trường hợp. Hãy nhớ rằng mục đích của nó là giúp những người khiếm thị và khiếm thị sử dụng trình đọc màn hình để biết hình ảnh là gì và, trong trường hợp logo có chứa văn bản, họ nói gì. Nó nên chứa tên công ty, số điện thoại nếu có, và bất kỳ văn bản nào khác.
GeekOnTheHill

2
@GeekOnTheHill Một logo không bao giờ nên chứa số điện thoại cho khả năng truy cập và lý do, vì trên thiết bị di động, họ sẽ không thể nhấn vào nó và quay số. Nhưng tôi đồng ý rằng mô tả alt nên mô tả nội dung của hình ảnh nếu logo có chứa thông tin bổ sung như khẩu hiệu.
Simon Hayter

5
Tôi đồng ý, Simon. Đặt số điện thoại trong logo là một thực tế kinh khủng trong thời đại của thiết bị di động và màn hình cảm ứng. Tuy nhiên, nếu số điện thoại ở đó mặc dù không thể truy cập được, tôi nghĩ rằng nó cũng cần phải nằm trong thẻ ALT. Lý do tôi nói điều này là bởi vì đại diện của các tổ chức dành cho người mù đã dứt khoát nói với tôi rằng nó nên như vậy. Rõ ràng, việc không thể liên hệ với một công ty vì số điện thoại không xuất hiện theo bất kỳ cách nào mà trình đọc màn hình có thể diễn giải là nguồn gây thất vọng thường xuyên cho khách truy cập mù. Nhưng tôi đồng ý, tốt hơn là nó hoàn toàn không phải là logo.
GeekOnTheHill

Các altnội dung cho một logo không nên chứa "logo" (trừ khi "logo" là một phần của tên, tất nhiên).
unor
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.