Arama motorları tarafından dizine eklenecek metin içeren resimleri nasıl alabilirim?

Bir arkadaşım için küçük bir portföy web sitesi inşa ediyorum ve reklamcılıkta ve hepsinde, standart yazı tiplerinden nefret ediyor ve her şeyin özel bir yazı tipinde yazılmasını istiyor.

CSS yazı tipi gömme şu an için bir seçenek olmadığından, tüm metinler (neyse ki, çoğu yok) görüntü olarak konacaktır.

Resimlerin içeriğini nasıl dizine ekleyebilirim? Küçük metinler için (bağlantılar, menü vb.), Metni alt özelliğe koyarım, ancak daha uzun bir şey için bunun çözüm olduğunu düşünmüyorum. Ne yapabilirim ? Metin görüntünün yanındaki gizli bir div'e yerleştirilsin mi?

YAZI TİPLERİ

Hayır, ancak gerçekten, Gömülebilir fontlar tüm mevcut tarayıcılarda (FF, Chrome, Safari, Opera) ve IE5.5 + 'da çalışır (evet, 90'lı yıllardan beri IE'de çalışmaktadır.)

TTF'nizi buradan yükleyin: http://www.kirsle.net/wizards/ttf2eot.cgi

Size kodu ve 2 dosyayı (TTF ve ardından bir EOT [M $ web yazı tipi]) geri verecektir. Kopyala, yapıştır, yükle, bitti. Kazan kazan!

Ve lütfen, lütfen, resimleri kullanma :)

Ancak bunu yaparsanız, işaretlemenizi görüntüleri kullanıyor gibi yazmayın ve ardından tüm öğelere arka plan resimleri ekleyin ve metni gizlemek için metin girintisi: -9999px kullanın. Ancak, lütfen gömülebilir yazı tiplerini kullanın. Artı, eğer müşteri / arkadaş bir fotoğrafçı ise, muhtemelen (olmamalı) eski bir tarayıcı kullanarak (yani, aslında, IE4 gibi ...)

Bu web sitesinde kendi yazı tiplerini satmadığı sürece, ikinizin de CSS gömme üzerinde daha fazla çalışabileceğini düşünüyorum (evet, bu sizin için bir seçenek değil, ama ısrar ediyorum).

Vaka, yazı tipleri (degrade renkler, bükülmüş hizalama, parlaklaştırma, kabartma, gravür ...) üzerinde daha ağır bir grafik çalışmasıysa, zorlu CSS seçeneklerini ihtiyaç duyduğu gibi oluşturmayı gerçekten imkansız hale getirirse, aşağıdakileri yapmanızı tavsiye ederim:

CSS (belki de hareketli grafik) aracılığıyla görüntüleri kullanın ve bağlantı metnini metin kimliğiyle gizleyin. 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;}

Bu bir teknik. Evet, biliyorum, Google bunu cezalandırabilir, ancak biliyorsunuz, bunu kullanarak cezalandırılan tek bir siteyi hiç duymadım.

Başka bir yol, metin ile birlikte AŞK etiketinde img etiketi kullanmak ve sonra metni gizlemek ve gerekirse konumlandırma img'yi düzeltmek için CSS kullanmaktır. Bu son seçenek, indekslenecek bilgi miktarını ve kalitesini arttırarak görüntüye alt, başlık, longdesc ekleme imkanı verir.

Bu son seçenekle daha da ileri gidebilir ve daha da iyi ve taze bir çözüm elde edebilirsiniz: HTML5 için kullanılabilen şekil etiketini, figcaption ile birlikte. Fikir tutmak çapa-> şekil-> img + figcaption.

Figcaption, bağlantı metni rolünü üstlenir ve gizlemek için CSS kullanabilirsiniz.

3 çözüm. Birini seçin. Sonuncusu ile giderdim.

Yuck. Sitesinin erişilebilirliğini öldürdüğü ve sayfalarının oluşturulmasını yavaşlatmak gibi diğer tüm sorunlara neden olduğu için yazı tipi sorunlarını gerçekten aşması gerekiyor.

Bu longdescözelliği resimlerinize niteliği eklemeyi deneyebilirsiniz . Varsa, arama motorları ne kadar ağırlık vermek zor ama muhtemelen daha sonra sıfır.

Web yazı tipleri şu anda tüm büyük tarayıcılarda neredeyse standart olsa da, farklı yazı tipi biçimlerinin çapraz tarayıcı karmaşıklıklarını bulmak zor olabilir.

Google, burada yararlı bulabileceğiniz güzel bir web yazı tipi API'si ve yazı tipi dizini sağlar.

Sitedeki diğer sayfalara ulaşmanın tek yolu olarak alt etiketlerle bile resimler kullanmak Google'a çok fazla netlik sağlamayacaktır.

En iyi seçeneğiniz, arkadaşınızı sorunu çözmek için sayfa veya sitenin herhangi bir yerinde metin bağlantılarına ihtiyacınız olduğuna ikna etmektir. Örneğin, tüm metin bağlantılarını içeren bir Site Haritası sayfası veya her sayfada çalışması gereken tüm metin bağlantılarının yer aldığı bir açılır menü oluşturabiliyorsanız. Bağlantı resimlerine ek olarak herhangi bir hasara neden olmaz.

Google'ın bunu zararlı olarak gördüğünü ve sitenizin sıralamasını düşürdüğünü veya spam olarak işaretlediğinden gizli bağlantıları kullanmamanızı öneririm.

Diğerlerinin de belirttiği gibi, standart "web uyumlu" yazı tiplerini kullanmak zorunda değilsiniz. Şu anda tarayıcılar arası bir şekilde çalışacak birçok yazı tipi değiştirme tekniği bulunmaktadır. İyi bir genel bakış için göz atın: Web Tasarımcının Yazı Tipi Değiştirme Yöntemleri Kılavuzu . SEO'dan vazgeçmeniz veya görüntü SEO'suna başvurmanız gerekmez. Pastanı alabilir ve yiyebilirsin de.

Bunu arka plan görüntüleri ve gizli iç içe yayılımlarla yapardım. Metin tarayıcılar ve arama motorları için harika görünüyor ve daha zengin tarayıcılar için özel yazı tipleri var.

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

Çıktı:

Hareket halinde görün .

Bu yöntemle değiştirebileceğiniz metin miktarı için gerçekten bir sınır yoktur (akıllıca uygun etiketler ve gizli stiller), ancak dürüst olmak gerekirse, müşterinizin kullanmak istediği özel yazı tipi, tüm yaygın web yazı tiplerinden çok daha az okunabilir. Gerçekten onunla konuţmaya çalýţmalýsýn.

Sfir olabilir bu amaç için kullanılabilir ancak bunu kullanarak kaynak yoğun istemci tarafında olacak ve metinde gömmek linkleri gerekiyorsa o zor alabilirsiniz.

1. Sadece web fontlarını kullanın . Hemen hemen tüm tarayıcılar doğru bir şekilde görüntüler (alternatif biçimlerde koyarsanız). Bunları normal dosyalar olarak barındırın (bunlar). İşte gerçekten iyi bir öğretici . Bir avantaj daha: Google'ı nasıl kandıracağınızı düşünmenize gerek yok

2. sIFR , Cufón , FLIR veya diğer görüntü spriteları - bu bilinmeyen nedenlerle icat edilen gerçekten eski tip boğa yengeç;) bunu kullanmayın.

3. Birkaç görüntüye yazılan bir sürü metin:

   • uzun yükleme süresi
   • anti-seo (elbette gizleme kullanabilir ve google bot ve kullanıcıya farklı içerik sunabilirsiniz, ancak bu sadece daha fazla çalışma ve test ve ayrıca risklidir [rakip site sahipleri size google'a söyleyebilir:])

Typeface.js kütüphanesini kullanmayı deneyin ! Herhangi bir özel TrueType veya OpenType yazı tipini, yalnızca sayfanızın üstüne kitaplığı ekleyerek ve özel yazı tipi öğelerinize özel bir sınıf vererek kullanabilirsiniz. Ücretsiz, açık kaynak, çapraz platform ve arama motorları da metninizi görecek. Görüntü gerekmez; kütüphane bunların hepsini işler ve basitçe tipik bir web sayfası gibi tasarlarsınız.

Cevaplar için burada harika seçenekler var. Yazı Tipi Sincap (http://www.fontsquirrel.com/fontface/generator) bir sözü hak ediyor gibi görünüyor. Evet, Google Font API'ları da harika.

Görüntü değiştirmeye gelince, şahsen bir öğede bir açıklık öneririm, görüntü açıklığın üst kısmında arka plan olarak bulunur. Ancak görüntü yerine: aralıkta yok, konum: ekran dışında mutlak. Bu şekilde ekran okuyucuları bu içeriği almaya devam eder.

Girinti üzerinden kazanan ekranın dışına çıkmayı hatırlıyorum, ama belki aptal pantolonumu giydim.

Ama çift de evet - bu yazı tiplerini gömün.

Font Squirrel'in Font-Face kitlerinden birini kullanın . Kit, 4 farklı yazı tipi biçimi ve bunları kullanmak için gereken doğru CSS'yi sağlar. Tüm modern tarayıcılarda ve eski IE sürümlerinde de çalışır!

Siteyi görüntülerle oluşturun. Sonra çiğ aylarda geri geldiğinde motorlar tarafından bulunamama şikayet siteyi metin ile yeniden inşa ve başka bir ücret talep!