Bagaimana cara mendapatkan gambar yang mengandung teks untuk diindeks oleh mesin pencari?


20

Saya sedang membangun situs web portofolio kecil untuk seorang teman, dan dalam periklanan dan sebagainya, dia membenci font standar dan ingin semuanya ditulis dalam font khusus.

Karena CSS font-embedding sebenarnya bukan pilihan saat ini, semua teks (untungnya, tidak banyak dari mereka) akan dimasukkan sebagai gambar.

Bagaimana saya masih bisa mengindeks konten gambar? Untuk teks kecil (tautan, menu, dll ...), saya meletakkan teks dalam atribut alt, tetapi untuk sesuatu yang lebih lama, saya tidak berpikir itu solusinya. Apa yang dapat saya ? Letakkan teks dalam div tersembunyi di sebelah gambar?


7
Mengapa font web bukan opsi? Apakah ini portofolio profesional? Jika demikian, keluarkan $ 50 dan dapatkan satu set font web yang dapat disematkan. Heck, Anda dapat membagi biaya dengannya dan mendapatkan lisensi situs tanpa batas yang dapat Anda gunakan kembali di situs-situs mendatang. Ada juga font web gratis di luar sana yang cukup bagus. Ini jauh lebih baik daripada menggunakan gambar untuk teks tubuh.
Lèse majesté

+1 @ Lèse Sungguh, itu satu-satunya cara untuk pergi.
Virtuosi Media

Yah, itu bukan opsi karena tidak didukung oleh browser utama, bukan?
Wookai

1
Ya itu, semua jalan kembali ke IE5.5 ... baca jawaban saya di bawah ini :)
Oscar Godson

Wow, sungguh bencana, ini adalah contoh bagus mengapa profesional perangkat lunak tidak akan pernah menjadi usang ... seseorang harus menghentikan pebisnis dari membuat kesalahan yang tragis.
Mark Rogers

Jawaban:


17

MENGUMPULKAN FONTS!

Tidak, tapi sungguh, font Embeddable berfungsi di semua browser saat ini (FF, Chrome, Safari, Opera) dan IE5.5 + (ya, sudah bekerja di IE sejak tahun 90-an.)

Dapatkan unggahan TTF Anda di sini: http://www.kirsle.net/wizards/ttf2eot.cgi

Ini akan memberi Anda kode dan 2 file kembali (TTF dan kemudian EOT [M $ web font]) kembali. Salin, tempel, unggah, selesai. Menang menang!

Dan tolong, tolong, jangan gunakan gambar :)

Namun, jika Anda LAKUKAN, tulis markup Anda seolah-olah Anda TIDAK MENGGUNAKAN gambar dan kemudian menambahkan gambar latar belakang ke semua elemen dan menggunakan indentasi teks: -9999px untuk menyembunyikan teks. Tapi tolong, cukup gunakan font yang dapat disematkan. Plus, jika Anda klien / teman adalah seorang fotografer, ia mungkin (tidak boleh) menggunakan browser kuno (maksud saya, BENAR-BENAR kuno, seperti, IE4 ...)


1
Terima kasih, saya benar-benar berpikir bahwa font-embedding belum didukung! Saya akan mencoba situs web Anda!
Wookai

Tentu saja! Semoga ini bisa membantu: D
Oscar Godson

Perlu dicatat bahwa Anda tidak bisa pergi dan menggunakan font APA SAJA karena masalah hak cipta - periksa terlebih dahulu persyaratan lisensi!
DisgruntledGoat

6

Kecuali dia menjual font sendiri di situs web ini, saya pikir Anda berdua dapat bekerja lebih banyak pada embedding CSS (ya, saya membaca ini bukan pilihan untuk Anda sekarang, tapi saya bersikeras).

Jika case adalah pekerjaan grafis yang lebih berat pada font (warna gradien, perataan terpelintir, glossing, embossing, engraving ...), sehingga sangat tidak mungkin untuk merender pilihan CSS yang dia butuhkan, maka saya akan merekomendasikan melakukan hal berikut:

menggunakan gambar melalui CSS (mungkin sprite), dan menyembunyikan teks jangkar dengan teks-ident. html

<a href="work1.html" title="My first work" id="firstWork">My first work</a>

css

#firstWork {display: block; width: 200px; height: 150px; background-image:url('img/firstwork.jpg'); text-ident: -999em;}

Ini adalah salah satu teknik. Ya, saya tahu, Google dapat menghukum itu, tetapi Anda tahu, saya tidak pernah mendengar tentang satu situs pun yang dihukum dengan menggunakan ini.

Cara lain akan menggunakan tag img di dalam tag anchor SEPANJANG dengan teks, dan kemudian menggunakan CSS untuk menyembunyikan teks dan memperbaiki posisi img jika diperlukan. Opsi terakhir ini memberi Anda kemungkinan untuk menambahkan alt, judul, longdesc ke gambar, meningkatkan kuantitas informasi dan kualitas yang diindeks.

Anda bahkan dapat melangkah lebih jauh dengan opsi terakhir ini dan mencari solusi yang lebih baik dan segar: menggunakan tag gambar, tersedia untuk HTML5, bersama dengan figcaption. Idenya adalah menjaga anchor-> figure-> img + figcaption.

Figcaption akan membuat peran teks jangkar dan Anda dapat menggunakan CSS untuk menyembunyikannya.

Nah, 3 solusi. Pilih salah satu. Saya akan pergi dengan yang terakhir.


Terimakasih banyak atas jawaban Anda ! Solusi Anda sangat menarik, terutama yang terakhir.
Wookai

5

Yuck. Dia benar-benar perlu untuk mengatasi masalah fontnya karena dia membunuh aksesibilitas situsnya dan menyebabkan semua jenis masalah lainnya seperti memperlambat rendering halamannya, dll.

Karena itu Anda dapat mencoba menambahkan longdescatribut ke gambar Anda. Sulit untuk mengatakan berapa beratnya, jika ada, mesin pencari memberikannya tetapi mungkin lebih dari nol.


Ya, bukankah tag alt ada di sini untuk aksesibilitas? Terima kasih atas tip longdesc, saya tidak menyadari keberadaannya.
Wookai

1
+1 Kedengarannya seperti kesempatan untuk mendidik klien tentang bagaimana font idealnya tidak akan mendapatkan hasil yang ideal ... meskipun, sayangnya, beberapa klien sangat tahan untuk menerima bagaimana dokumen HTML "seharusnya" berfungsi.
danlefree

3

Sementara font web cukup standar di semua browser utama sekarang, mencari tahu kerumitan browser lintas format font yang berbeda bisa rumit.

Google menyediakan api font web yang bagus dan direktori font untuk membantu di sini yang mungkin berguna bagi Anda.


2

Menggunakan gambar bahkan dengan tag alt sebagai satu-satunya cara Anda untuk sampai ke halaman lain di situs ini tidak benar-benar akan memberikan banyak kejelasan bagi Google.

Taruhan terbaik Anda adalah meyakinkan teman Anda bahwa Anda memerlukan tautan teks di suatu tempat di halaman atau situs untuk menyelesaikan masalah. Misalnya jika Anda dapat mengatur halaman peta situs dengan semua tautan teks atau tarik turun di setiap halaman dengan semua tautan teks yang seharusnya berfungsi. Itu tidak akan menyebabkan kerusakan apa pun selain gambar tautan.

Saya sarankan untuk tidak menggunakan tautan tersembunyi karena Google dapat melihat ini sebagai jahat dan mengurangi peringkat situs Anda atau menandainya sebagai spam.


Saya pasti akan membuat peta situs, tetapi ini tidak akan memperbaiki masalah pengindeksan konten ...
Wookai

@wookai - Google akan mengindeks tautan gambar yang mungkin tidak tahu banyak tentang mereka. Karenanya, jika Anda memiliki halaman peta situs dengan teks lengkap di setiap tautan, Google akan memberi lebih banyak informasi tentang halaman situs Anda.
Ben Hoffman

2

Seperti yang disarankan orang lain, Anda tidak harus menggunakan font "web-safe" standar. Ada banyak teknik penggantian font yang tersedia sekarang yang akan berfungsi secara lintas-browser. Untuk tinjauan umum yang baik, lihat: Panduan Desainer Web untuk Metode Penggantian Font . Anda tidak harus menyerah pada SEO atau menggunakan SEO gambar. Anda dapat memiliki kue dan memakannya juga.


2

Saya biasa melakukan ini dengan gambar latar belakang dan bentang bersarang tersembunyi. Terlihat bagus untuk peramban teks dan mesin pencari, dan memiliki font khusus untuk peramban yang lebih kaya.

HTML:

<h1><span>Welcome to Hell on Wheels</span></h1>

CSS:

h1 {
    background: url(welcome.gif) no-repeat;
    display: block;
    height: 68px;
    width: 415px;
}
h1 span { display: none; }

Keluaran:

Selamat datang di Hell on Wheels

Lihat itu dalam aksi .

Benar-benar tidak ada batasan jumlah teks yang dapat Anda ganti dengan metode ini (tag yang sesuai dan gaya tersembunyi dengan cara yang cerdas) tetapi jujur ​​font khusus yang ingin digunakan klien Anda kemungkinan jauh lebih mudah dibaca daripada semua font web umum. Anda harus benar-benar mencoba untuk membujuknya.


Sudahkah Anda menguji ini di browser teks? Saya tahu banyak pembaca layar mengabaikan display: noneteks, dan saya pikir browser hanya teks juga.
Lèse majesté

Keduanya lynxdan linksmenampilkan teks. Jika masalah dengan pembaca layar, saya akan gunakan h1 span { position: absolute; left: -9999px; }. Saya tidak memiliki pembaca layar yang berguna untuk pengujian.
Annika Backstrom

Saya kira Anda benar, tetapi perlu diketahui bahwa ini tidak akan berfungsi pada sebagian besar pembaca layar: css-discuss.incutio.com/wiki/Screenreader_Visibility Juga, saya menggunakan NVDA untuk pengujian pada windows. Ini pembaca layar FOSS jika Anda ingin memeriksanya.
Lèse majesté

1

sFIR mungkin berfungsi untuk tujuan ini, tetapi menggunakannya akan menghabiskan banyak sumber daya di sisi klien dan mungkin akan sulit jika Anda harus menyematkan tautan dalam teks.


1
Namun, ini 100% lebih baik daripada memiliki gambar sebagai teks. Itu mungkin salah satu hal paling profesional yang dapat Anda lakukan di situs web - tanpa penyorotan, penyalinan, dan penyisipan, tanpa pencarian, tanpa pengubahan ukuran ...
Lèse majesté

1
  1. Cukup gunakan webfonts . Hampir semua browser akan menampilkannya dengan benar (jika Anda meletakkannya dalam format alternatif). Hanya host mereka sebagai file biasa (yang mana mereka). Ini tutorial yang sangat bagus . Satu lagi keunggulan: Anda tidak perlu memikirkan cara menipu google

  2. sIFR , Cufón , FLIR atau sprite gambar lainnya - itu benar-benar kepiting gaya lama yang diciptakan untuk alasan yang tidak diketahui;) jangan gunakan itu.

  3. Banyak teks yang diketik dalam beberapa gambar:

    • waktu buka yang lama
    • anti-seo (tentu saja Anda dapat menggunakan cloaking dan menyajikan konten yang berbeda untuk google bot dan pengguna, tetapi itu hanya lebih banyak pekerjaan dan pengujian dan juga berisiko [pemilik situs pesaing mungkin memberi tahu Anda tentang google:])

1

Coba gunakan perpustakaan typeface.js ! Anda dapat menggunakan font TrueType atau OpenType khusus hanya dengan memasukkan pustaka di bagian atas halaman Anda dan memberikan elemen khusus fonta Anda kelas khusus. Gratis, sumber terbuka, lintas platform, dan mesin pencari akan melihat teks Anda juga. Tidak perlu gambar; perpustakaan menangani semua itu dan Anda cukup mendesainnya seperti halaman web biasa.


1
Cemerlang, tetapi sangat ilegal dalam banyak kasus. = P Ada sangat sedikit font komersial yang legal untuk disematkan langsung ke halaman web, bahkan jika Anda membeli lisensi untuk itu. Saya menduga bagian dari alasan mengapa jenis pengecoran akhirnya kebobolan ke font web adalah agar font yang disematkan tidak (mudah) dapat digunakan untuk tujuan lain. Tetapi jika Anda mengunggah font OTF atau TTF, maka siapa pun yang mengunjungi situs Anda akan mendapatkan salinan yang sekarang dapat mereka lakukan dengan apa pun yang mereka inginkan.
Lèse majesté

1

Banyak pilihan bagus untuk jawaban. Seems Font Squirrel (http://www.fontsquirrel.com/fontface/generator) pantas disebutkan. Dan ya, API Font Google juga bagus.

Adapun substitusi gambar, secara pribadi saya akan merekomendasikan rentang dalam suatu elemen, dengan gambar sebagai latar belakang pada induk rentang tersebut. Tapi alih-alih tampilan: tidak ada pada rentang, posisi: mutlak dari layar. Dengan begitu pembaca layar masih mendapatkan konten itu.

Sepertinya saya ingat pindah dari layar menang atas indentasi, tapi mungkin saya memakai celana konyol saya.

Tapi gandakan juga ya - sematkan font-font itu.


oh, dan inilah pilihan saya terhadap sifr dan cufon.
folktrash

1

Gunakan salah satu kit Font-Face dari Font Squirrel . Kit ini menyediakan 4 format font berbeda dan CSS yang benar diperlukan untuk menggunakannya. Bekerja di semua browser modern dan di versi IE lama juga!


0

Bangun situs dengan gambar. Kemudian dalam bulan-bulan embun ketika dia kembali mengeluh tentang tidak ditemukan oleh mesin membangun kembali situs dengan teks dan membebankan biaya lain!


3
ini tampaknya agak tidak bertanggung jawab kepada saya, meskipun ..
Jeff Atwood

OK, lalu bagaimana dengan membuat tiruan dari situs web favoritnya menggunakan gambar untuk teks dan memodifikasi hostsfile untuk mengarah ke tiruan, dan memaksanya untuk menggunakan situs itu selama 2 minggu?
Lèse majesté

@ Jeff Yah, aku hanya sedikit lidah-di-pipi ......
David Heffernan
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.