Haruskah nama perusahaan dalam logo menjadi gambar atau teks?

Saya meletakkan logo (terdiri dari gambar dan nama perusahaan) di situs web saya. Saya tidak yakin apakah akan menyimpan teks nama perusahaan sebagai bagian dari file gambar, atau memilikinya sebagai teks aktual dalam html dan ditata menggunakan css.

Tentunya jika saya menyimpan semuanya sebagai gambar maka saya tidak perlu khawatir tentang pengguna yang memiliki font yang tepat dll. Tapi saya pikir memiliki itu sebagai teks mungkin lebih baik untuk SEO.

Apakah ini masalah selera atau lebih baik dari yang lain?

seo css images

— pengguna1551817
sumber

Ini tidak memiliki jawaban nyata karena jawabannya berubah liar sesuai situasi.

— Di dalam

@insidesin, tidak ada logo yang harus selalu berupa gambar .

— zzzzBov

Kami tidak berbicara tentang logo di sini, kami berbicara tentang logo dan nama perusahaan.

— Di dalam

@insidesin Tidak, OP mengatakan bahwa logo itu terdiri dari gambar dan nama perusahaan . Nama adalah bagian dari logo.

— Angew tidak lagi bangga dengan 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.

Tidak, dia berpikir untuk tidak memasukkannya. Ini bukan ilmu roket. Dalam beberapa situasi teks yang ditinggalkan di luar gambar akan bermanfaat.

— insidesin

Jawaban:

Google menyukai atribut alt perusahaan

Baik Google dan Bing memahami bahwa suatu logo akan sering diulangi dalam PNG, GIF dan JPEG. Cukup markup logo menggunakan deskripsi alt untuk memberi tahu mesin pencari bahwa itu LOGO untuk bisnis Anda.

Contoh dasar:

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

Contoh Skema:

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

Contoh Skema JavaScript:

Jika Anda ingin menjaga kode Anda tetap sederhana maka gunakan Skema JSON-LD karena Anda tidak perlu mengedit kode halaman melainkan menambahkan kode di akhir halaman Anda atau menggunakan Google Pengelola Tag untuk menyuntikkan ke halaman tanpa mengangkat jari,

misalnya

<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 juga menyukai logo SVG

Jika Anda ingin Google atau Bing melihat nama perusahaan Anda di dalam gambar maka Anda dapat melakukannya dengan menggunakan format SVG. Format ini memungkinkan Anda untuk menggunakan TEXT di dalam gambar yang akan dilihat oleh pengguna dan mesin pencari. Jika aksesibilitas menjadi perhatian maka Anda harus menjaga nama perusahaan sebagai TEXT dan bukan sebagai bentuk misalnya membuat garis besar.

misalnya sesuatu seperti ini:

<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 tidak menyukai logo yang diretas CSS

Mesin pencari tidak suka logo ditampilkan dengan trik dan hal lain yang serupa, seperti text-indent e.g -9999px; background: url(logo.png) no-repeat;. Latar belakang harus selalu digunakan sebagai latar belakang. Jika elemen sumber daya di-halaman maka selalu merupakan gambar dan tidak pernah latar belakang. Gunakan 2 contoh sebelumnya dan bukan yang ini ... ini berguna 'kembali pada hari' tetapi tidak diperlukan lagi dengan penambahan tersedia.

Metode ini juga payah untuk aksesibilitas (pengguna terganggu).

— Simon Hayter
sumber

Alt tag harus digunakan untuk setiap gambar dan / atau objek yang dimuat di adegan / situs Anda. Seharusnya sudah hampir rata sekarang.

— insidesin

Karena teks adalah bagian dari logo, saya akan menyimpannya di dalam gambar (menyimpan untuk mencocokkan font yang tidak standar dan harus memposisikannya persis seperti pada logo) - Anda selalu dapat meletakkannya di atribut alt atau gunakan mikrodata untuk meningkatkan seo Anda:

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

Informasi lebih lanjut tentang mikrodata organisasi

Alat Validasi Google Microdata

Panduan Google tentang markup Logo

— Pete
sumber

Tag ALT harus mengandung teks dalam gambar untuk alasan aksesibilitas dalam hal apa pun. Ingatlah bahwa tujuannya adalah untuk membantu orang buta dan tunanetra yang menggunakan pembaca layar untuk mengetahui apa itu gambar dan, dalam hal logo yang berisi teks, apa yang mereka katakan. Itu harus berisi nama perusahaan, nomor telepon jika ada, dan teks lainnya.

— GeekOnTheHill

@GeekOnTheHill Logo tidak boleh berisi nomor telepon untuk aksesibilitas dan alasan ux, karena pada perangkat seluler mereka tidak dapat mengetuknya dan memanggil nomor itu. Tetapi saya setuju bahwa uraian alt harus menjelaskan isi gambar jika logo tersebut memuat informasi tambahan seperti slogan.

— Simon Hayter

Saya setuju, Simon. Memasukkan nomor telepon dalam logo adalah praktik mengerikan di era perangkat seluler dan layar sentuh. Namun, jika nomor telepon ada di sana meskipun tidak disarankan, saya pikir itu juga harus dalam tag ALT. Alasan saya mengatakan ini adalah karena perwakilan organisasi untuk orang buta telah dengan tegas mengatakan kepada saya bahwa itu harus. Tampaknya, tidak dapat menghubungi perusahaan karena nomor telepon tidak muncul dengan cara apa pun yang dapat ditafsirkan oleh pembaca layar adalah sumber frustrasi yang sering terjadi bagi pengunjung tunanetra. Tapi saya setuju, lebih baik tidak ada di logo sama sekali.

— GeekOnTheHill

The altkonten untuk logo harus tidak mengandung "logo" (kecuali "logo" adalah bagian dari nama, tentu saja).

— unor