Jak uzyskać obrazy zawierające tekst do indeksowania przez wyszukiwarki?

Buduję małą stronę z portfolio dla przyjaciela, a ponieważ zajmuje się reklamą, ona nienawidzi standardowych czcionek i chce wszystkiego napisanego niestandardową czcionką.

Ponieważ osadzanie czcionek CSS nie jest w tej chwili opcją, wszystkie teksty (na szczęście nie ma ich wiele) zostaną umieszczone jako obrazy.

Jak mogę nadal indeksować zawartość obrazów? W przypadku małych tekstów (linki, menu itp.) Umieszczam tekst w atrybucie alt, ale przez dłuższy czas nie sądzę, że to jest rozwiązanie. Co mogę zrobić ? Umieścić tekst w ukrytym div obok obrazu?

WKLEJ CZCIONKI!

Nie, ale tak naprawdę czcionki osadzalne działają we wszystkich obecnych przeglądarkach (FF, Chrome, Safari, Opera) i IE5.5 + (tak, działa w IE od lat 90.)

Pobierz TTF tutaj: http://www.kirsle.net/wizards/ttf2eot.cgi

Otrzymasz z powrotem kod i 2 pliki (TTF, a następnie EOT [czcionka internetowa M $]). Kopiuj, wklej, prześlij, gotowe. Wygraj wygraj!

I proszę, nie używaj obrazów :)

Jeśli to zrobisz, zapisz znaczniki, jakbyś NIE używał obrazów, a następnie dodaj obrazy tła do wszystkich elementów i użyj wcięcia tekstu: -9999px, aby ukryć tekst. Ale proszę, użyj po prostu czcionek do osadzenia. Dodatkowo, jeśli jesteś klientem / przyjacielem, fotografem, prawdopodobnie (nie powinna) używać starożytnej przeglądarki (to znaczy, NAPRAWDĘ starożytnej, jak IE4 ...)

Chyba, że ​​sprzedaje własne czcionki na tej stronie, myślę, że obaj moglibyście więcej popracować nad osadzaniem CSS (tak, czytam, że nie jest to teraz dla was opcja, ale nalegam).

Jeśli obudowa ma cięższą pracę graficzną na czcionkach (kolory gradientu, skręcone wyrównanie, połysk, wytłaczanie, grawerowanie ...), co naprawdę uniemożliwia renderowanie obszernych opcji CSS zgodnie z potrzebami, zaleciłbym wykonanie następujących czynności:

użyj obrazów za pomocą CSS (być może sprite'a) i ukryj tekst zakotwiczenia za pomocą text-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;}

To jedna technika. Tak, wiem, Google może to ukarać, ale wiesz, nigdy nie słyszałem o jednej stronie ukaranej za to.

Innym sposobem byłoby użycie tagu img wewnątrz tagu kotwiczącego W DÓŁ z tekstem, a następnie użycie CSS do ukrywania tekstu i poprawiania pozycjonowania img w razie potrzeby. Ta ostatnia opcja daje możliwość dodania alt, tytułu, longdesc do obrazu, zwiększając ilość informacji i jakość indeksowanej.

Możesz nawet pójść dalej z tą ostatnią opcją i wybrać jeszcze lepsze i świeże rozwiązanie: używając znacznika figure, dostępnego dla HTML5, wraz z figcaption. Chodzi o to, aby zachować anchor-> figure-> img + figcaption.

Figcaption zrobiłby rolę tekstu kotwicy i możesz użyć CSS, aby go ukryć.

Cóż, 3 rozwiązania. Wybierz jedno. Poszedłbym z ostatnim.

Fuj Naprawdę musi sobie poradzić z problemami z czcionkami, ponieważ zabija dostępność swojej witryny i powoduje wszystkie inne problemy, takie jak spowolnienie renderowania swoich stron itp.

Powiedziawszy, że możesz spróbować dodać longdescatrybut do swoich zdjęć. Trudno powiedzieć, jaką wagę, jeśli w ogóle, przypisują mu wyszukiwarki, ale prawdopodobnie jest to więcej niż zero.

Chociaż czcionki internetowe są obecnie prawie standardowe we wszystkich głównych przeglądarkach, ustalenie zawiłości różnych przeglądarek w różnych formatach może być trudne.

Google udostępnia fajny interfejs API i katalog czcionek , które mogą okazać się przydatne.

Używanie obrazów nawet ze znacznikami alt jako jedynym sposobem na przejście do innych stron w witrynie tak naprawdę nie zapewni Google dużej przejrzystości.

Najlepiej jest przekonać przyjaciela, że ​​potrzebujesz linków tekstowych gdzieś na stronie lub stronie, aby rozwiązać problem. Na przykład, jeśli możesz skonfigurować stronę mapy witryny ze wszystkimi linkami tekstowymi lub listę rozwijaną na każdej stronie ze wszystkimi linkami tekstowymi, które powinny działać. Oprócz obrazów linków nie spowoduje to żadnych szkód.

Sugeruję, aby nie używać ukrytych linków, ponieważ Google może uznać to za nikczemne i obniżyć pozycję witryny lub oznaczyć jako spam.

Jak sugerują inni, nie musisz używać standardowych czcionek „bezpiecznych dla sieci”. Obecnie dostępnych jest wiele technik zastępowania czcionek, które będą działać w różnych przeglądarkach. Aby uzyskać dobry przegląd, sprawdź: Przewodnik projektanta stron internetowych dotyczący metod zastępowania czcionek . Nie musisz rezygnować z SEO ani uciekać się do SEO wizerunku. Możesz mieć swoje ciasto i zjeść je.

Robiłem to z obrazami tła i ukrytymi rozpiętościami. Wygląda świetnie dla przeglądarek tekstowych i wyszukiwarek oraz ma niestandardowe czcionki dla bogatszych przeglądarek.

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

Wynik:

Zobacz to w akcji .

Tak naprawdę nie ma ograniczenia co do ilości tekstu, który można zastąpić tą metodą (odpowiednie tagi i ukryte style w inteligentny sposób), ale szczerze mówiąc, niestandardowa czcionka, której chce używać klient, jest prawdopodobnie znacznie mniej czytelna niż wszystkie popularne czcionki internetowe. Naprawdę powinieneś ją sprowokować.

sFIR może działać w tym celu, ale korzystanie z niego będzie wymagało dużych zasobów po stronie klienta i może być trudne, jeśli trzeba osadzić linki w tekście.

1. Po prostu użyj webfontów . Praktycznie każda przeglądarka wyświetla je poprawnie (jeśli umieścisz je w alternatywnych formatach). Po prostu hostuj je jako zwykłe pliki (którymi są). Oto naprawdę dobry samouczek . Jeszcze jedna zaleta: nie musisz myśleć, jak oszukać Google

2. sIFR , Cufón , FLIR lub inne obrazki - to naprawdę stary byk, który został wymyślony z nieznanych powodów;) nie używaj tego.

3. Dużo tekstu wpisanego na kilku obrazach to:

   • długi czas ładowania
   • anti-seo (oczywiście możesz używać maskowania i podawać różne treści botowi i użytkownikom Google, ale to tylko więcej pracy i testowania, a także ryzykowne [rywalizujący właściciele witryn mogą powiedzieć ci o google:])

Spróbuj użyć biblioteki typeface.js ! Możesz użyć dowolnej niestandardowej czcionki TrueType lub OpenType, po prostu umieszczając bibliotekę na górze strony i nadając elementom ze specjalnymi czcionkami specjalną klasę. Jest darmowy, open source, wieloplatformowy, a wyszukiwarki również zobaczą twój tekst. Żadne obrazy nie są potrzebne; biblioteka obsługuje to wszystko, a Ty po prostu projektujesz ją jak typową stronę internetową.

Tutaj znajdziesz wiele świetnych opcji odpowiedzi. Wydaje się, że Font Squirrel (http://www.fontsquirrel.com/fontface/generator) zasługuje na wzmiankę. I tak, interfejsy API czcionek Google są również świetne.

Jeśli chodzi o zastępowanie obrazu, osobiście poleciłbym rozpiętość w elemencie, z obrazem jako tłem nadrzędnym dla rozpiętości. Ale zamiast wyświetlania: brak na rozpiętości, pozycja: absolutnie poza ekranem. W ten sposób czytniki ekranu nadal otrzymują tę treść.

Wydaje mi się, że pamiętam, jak zjechałem z ekranu wygrywając z wcięciem, ale może mam na sobie moje głupie spodnie.

Ale podwój także tak - osadzaj te czcionki.

Użyj jednego z zestawów czcionek Face Font Squirrel . Zestaw zapewnia 4 różne formaty czcionek i poprawny CSS wymagany do ich użycia. Działa we wszystkich nowoczesnych przeglądarkach i starszych wersjach IE!

Zbuduj witrynę z obrazami. Potem, gdy wraca w rosa, narzekając na to, że nie zostaną znalezione przez silniki, odbuduj witrynę z tekstem i nalicz kolejną opłatę!