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

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?

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

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.

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.

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.

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.

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.

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:

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.

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

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.

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.

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!

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!