Wie bekomme ich Bilder mit Text, die von Suchmaschinen indiziert werden?

20

Ich baue eine kleine Portfolio-Website für eine Freundin auf, und da sie Werbung betreibt, hasst sie die Standardschriften und möchte, dass alles in einer benutzerdefinierten Schrift geschrieben wird.

Da die Einbettung von CSS-Schriftarten derzeit nicht in Frage kommt, werden alle Texte (zum Glück gibt es nicht viele) als Bilder angezeigt.

Wie könnte ich den Bildinhalt trotzdem indizieren lassen? Bei kleinen Texten (Links, Menüs usw.) habe ich den Text in das alt-Attribut eingefügt, aber für etwas längeres halte ich das nicht für die Lösung. Was kann ich tun ? Den Text in ein verstecktes div neben dem Bild setzen?

Wookai
quelle
7
Warum sind Webfonts keine Option? Ist das ein professionelles Portfolio? In diesem Fall sollten Sie die 50 US-Dollar ausschälen und einen schönen Satz einbettbarer Web-Schriften erhalten. Sie könnten die Kosten mit ihr teilen und eine unbegrenzte Site-Lizenz erwerben, die Sie auf zukünftigen Sites wiederverwenden können. Es gibt auch kostenlose Webfonts, die ziemlich nett sind. Es ist weitaus besser als Bilder für Körpertexte zu verwenden.
Majestätsbeleidigung
+1 @ Lèse Wirklich, das ist der einzige Weg.
Virtuosi Media
Nun, es ist keine Option, da es von den gängigen Browsern nicht unterstützt wird, oder?
Wookai
1
Ja, bis zum IE5.5 ... lesen Sie meine Antwort unten :)
Oscar Godson
Wow, was für eine Katastrophe, dies ist ein gutes Beispiel dafür, warum Software-Profis niemals obsolet werden. Jemand muss Geschäftsleute davon abhalten, tragische Fehler zu machen.
Mark Rogers

Antworten:

17

BETTEN SIE DIE SCHRIFTEN EIN!

Nein, aber wirklich, eingebettete Schriftarten funktionieren in allen aktuellen Browsern (FF, Chrome, Safari, Opera) und IE5.5 + (ja, es funktioniert seit den 90er Jahren im IE.)

Laden Sie Ihren TTF hier hoch: http://www.kirsle.net/wizards/ttf2eot.cgi

Sie erhalten den Code und 2 Dateien zurück (eine TTF und dann eine EOT [M $ web font]). Kopieren, Einfügen, Hochladen, Fertig. Win win!

Und bitte, bitte, benutze keine Bilder :)

Wenn Sie dies dennoch tun, schreiben Sie Ihr Markup so, als ob Sie KEINE Bilder verwenden. Fügen Sie dann Hintergrundbilder zu allen Elementen hinzu und verwenden Sie den Texteinzug: -9999px, um den Text auszublenden. Verwenden Sie jedoch nur einbettbare Schriftarten. Plus, wenn Sie Kunde / Freund sind, ist ein Fotograf, den sie wahrscheinlich (sollte nicht) mit einem alten Browser (ich meine, wirklich alt, wie IE4 ...)

Oscar Godson
quelle
1
Danke, ich dachte wirklich, dass das Einbetten von Schriftarten noch nicht unterstützt wird! Ich werde Ihre Website ausprobieren!
Wookai 20.11.10
Sichere Sache! Hoffe, es hilft: D
Oscar Godson
Es ist zu beachten, dass Sie aus urheberrechtlichen Gründen nicht einfach JEDE Schriftart verwenden können - lesen Sie zuerst die Lizenzbestimmungen!
DisgruntledGoat
6

Sofern sie nicht ihre eigenen Schriften auf dieser Website verkauft, könnten Sie beide besser an der CSS-Einbettung arbeiten (ja, ich habe gelesen, dies ist derzeit keine Option für Sie, aber ich bestehe darauf).

Wenn es sich bei dem Fall um eine schwerere grafische Arbeit mit Schriftarten handelt (Verlaufsfarben, verdrehte Ausrichtung, Glanz, Prägung, Gravur ...), die es wirklich unmöglich macht, die CSS-Optionen nach Bedarf zu rendern, würde ich Folgendes empfehlen:

Verwenden Sie Bilder über CSS (möglicherweise ein Sprite) und verbergen Sie den Ankertext mit 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;}

Dies ist eine Technik. Ja, ich weiß, Google kann das bestrafen, aber Sie wissen, ich habe noch nie von einer einzigen Website gehört, die damit bestraft wurde.

Eine andere Möglichkeit wäre, das img-Tag innerhalb des Anker-Tags ALONG mit Text zu verwenden und dann CSS zu verwenden, um Text auszublenden und das img bei Bedarf zu positionieren. Diese letzte Option gibt Ihnen die Möglichkeit, Alt, Titel und Longdesc zum Bild hinzuzufügen, um die Menge und Qualität der zu indizierenden Informationen zu erhöhen.

Mit dieser letzten Option können Sie sogar noch weiter gehen und eine noch bessere und aktuellere Lösung wählen: Verwenden des für HTML5 verfügbaren Zahlentags zusammen mit figcaption. Die Idee ist keep anchor-> figure-> img + figcaption.

Figcaption würde den Ankertext zur Rolle machen und Sie können CSS verwenden, um ihn auszublenden.

Nun, 3 Lösungen. Wähle eins. Ich würde mit dem letzten gehen.

Dave
quelle
Ich danke Ihnen sehr für Ihre Antwort ! Ihre Lösungen sind wirklich interessant, besonders die letzte.
Wookai
5

Yuck. Sie muss wirklich über ihre Schriftenprobleme hinwegkommen, da sie die Zugänglichkeit ihrer Website beeinträchtigt und alle anderen Arten von Problemen verursacht, z. B. das Rendern ihrer Seiten zu verlangsamen.

Allerdings können Sie versuchen, das longdescAttribut zu Ihren Bildern hinzuzufügen . Es ist schwer zu sagen, wie viel Gewicht, wenn überhaupt, die Suchmaschinen geben, aber es ist wahrscheinlich mehr als null.

John Conde
quelle
Sind hier keine ALT-Tags für die Barrierefreiheit? Vielen Dank für den Longdesc-Tipp, ich wusste nicht, dass es ihn gibt.
Wookai
1
+1 Klingt nach einer Gelegenheit, den Kunden darüber aufzuklären, wie ihre idealen Schriftarten keine idealen Ergebnisse erzielen. Leider sind einige Kunden sehr dagegen, zu akzeptieren, wie HTML-Dokumente "funktionieren" sollen.
Danlefree
3

Während Web-Schriftarten mittlerweile in allen gängigen Browsern Standard sind, kann es schwierig sein, die browserübergreifenden Feinheiten der verschiedenen Schriftformate herauszufinden.

Google stellt eine nette Web-Schriftart-API und ein Schriftart-Verzeichnis zur Verfügung, um Ihnen hier zu helfen, was Sie vielleicht nützlich finden.

Phil Mander
quelle
2

Die Verwendung von Bildern, auch mit Alt-Tags, als einzige Möglichkeit, auf andere Seiten der Website zuzugreifen, bietet Google nicht wirklich viel Klarheit.

Am besten überzeugen Sie Ihren Freund, dass Sie Textlinks irgendwo auf der Seite oder Site benötigen, um das Problem zu lösen. Zum Beispiel, wenn Sie in der Lage sind, eine Sitemap-Seite mit allen Textlinks oder ein Dropdown-Menü auf jeder Seite mit allen Textlinks einzurichten, die funktionieren sollen. Es wird keinen Schaden anrichten, dass zusätzlich zu den Link-Bildern.

Ich würde vorschlagen, keine versteckten Links zu verwenden, da Google dies als schädlich ansehen und den Rang Ihrer Website verringern oder sie als Spam markieren kann.

Ben Hoffman
quelle
Ich werde definitiv eine Sitemap einrichten, aber dies wird das Problem der Inhaltsindizierung nicht beheben ...
Wookai
@wookai - Google indiziert Bild-Links, von denen es möglicherweise nicht so viel weiß. Wenn Sie also eine Sitemap-Seite mit Volltext in jedem Link haben, erhalten Sie von Google weitere Informationen zu den Seiten Ihrer Website.
Ben Hoffman
2

Wie andere vorgeschlagen haben, müssen Sie nicht mit den standardmäßigen "web-sicheren" Schriftarten arbeiten. Derzeit sind viele Techniken zum Ersetzen von Schriftarten verfügbar, die browserübergreifend funktionieren. Einen guten Überblick erhalten Sie im Web Designer-Handbuch zu Methoden zum Ersetzen von Schriftarten . Sie müssen nicht auf SEO verzichten oder auf Image-SEO zurückgreifen. Sie können Ihren Kuchen haben und ihn auch essen.

Virtuosi Media
quelle
2

Früher habe ich dies mit Hintergrundbildern und versteckten verschachtelten Bereichen gemacht. Sieht gut aus für Textbrowser und Suchmaschinen und bietet benutzerdefinierte Schriftarten für umfangreichere Browser.

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

Ausgabe:

Willkommen in der Hölle auf Rädern

Sehen Sie es in Aktion .

Die Menge an Text, die Sie mit dieser Methode ersetzen können, ist nicht begrenzt (geeignete Tags und versteckte Stile auf intelligente Weise), aber ehrlich gesagt ist die benutzerdefinierte Schriftart, die Ihr Client verwenden möchte, wahrscheinlich weitaus weniger lesbar als alle gängigen Web-Schriftarten. Sie sollten wirklich versuchen, sie zu überreden.

Annika Backström
quelle
Haben Sie dies in Textbrowsern getestet? Ich weiß, dass viele Bildschirmleser display: noneText ignorieren , und ich denke, dass dies auch bei Nur-Text-Browsern der Fall ist.
Majestätsbeleidigung
Beides lynxund linksden Text anzeigen. Wenn es ein Problem mit Bildschirmleseprogrammen ist, würde ich verwenden h1 span { position: absolute; left: -9999px; }. Ich habe jedoch keinen Screenreader zum Testen zur Hand.
Annika Backstrom
Ich denke, Sie haben Recht, aber beachten Sie, dass dies bei den meisten Bildschirmleseprogrammen nicht funktioniert: css-discuss.incutio.com/wiki/Screenreader_Visibility Außerdem verwende ich NVDA zum Testen unter Windows. Es ist ein FOSS-Bildschirmleser, wenn Sie es überprüfen möchten.
Majestätsbeleidigung
1

sFIR kann für diesen Zweck verwendet werden, ist jedoch auf der Clientseite ressourcenintensiv und kann schwierig werden, wenn Sie Links in den Text einbetten müssen.

danlefree
quelle
1
Trotzdem ist es 100% besser als Bilder als Körpertext zu haben. Das ist wahrscheinlich eines der am wenigsten professionellen Dinge, die Sie auf einer Website tun können - kein Hervorheben, kein Kopieren und Einfügen, kein Suchen, keine Größenänderung ...
Lèse majesté
1
  1. Verwenden Sie einfach Webfonts . Praktisch jeder Browser zeigt sie korrekt an (wenn Sie sie in alternativen Formaten ablegen). Hosten Sie sie einfach als reguläre Dateien (die sie sind). Hier ist wirklich gutes Tutorial . Ein weiterer Vorteil: Sie brauchen nicht zu überlegen, wie Sie Google austricksen

  2. sIFR , Cufón , FLIR oder andere Image-Sprites - das ist wirklich ein Stierkrebs alten Stils, der aus unbekannten Gründen erfunden wurde;) Verwenden Sie das nicht.

  3. Eine Menge Text, der in ein paar Bildern eingegeben wurde, ist:

    • lange Ladezeit
    • Anti-Seo (Natürlich können Sie Cloaking verwenden und verschiedene Inhalte für Google Bot und Nutzer bereitstellen, aber es ist nur mehr Arbeit und Testen und auch riskant.
Alex Bolotov
quelle
1

Versuchen Sie es mit der Bibliothek typeface.js ! Sie können jede benutzerdefinierte TrueType- oder OpenType-Schriftart verwenden, indem Sie die Bibliothek ganz oben auf Ihrer Seite einfügen und Ihren Elementen mit speziellen Schriftarten eine spezielle Klasse zuweisen. Es ist kostenlos, Open Source, plattformübergreifend und Suchmaschinen werden Ihren Text auch sehen. Keine Bilder erforderlich; Die Bibliothek erledigt all das und Sie gestalten es einfach wie eine typische Webseite.

Ricket
quelle
1
Genial, aber in den meisten Fällen höchst illegal. = P Es gibt nur sehr wenige kommerzielle Schriftarten, die direkt in Webseiten eingebettet werden dürfen, selbst wenn Sie eine Lizenz dafür erworben haben. Ich vermute, ein Teil des Grundes, warum Schriftgießereien schließlich Web-Schriften zugestanden haben, ist, dass die eingebetteten Schriften nicht (leicht) für andere Zwecke verwendet werden können. Wenn Sie jedoch eine OTF- oder TTF-Schriftart hochladen, erhält jeder, der Ihre Site besucht, eine Kopie, mit der er jetzt alles tun kann, was er will.
Majestätsbeleidigung
1

Hier gibt es viele großartige Optionen für Antworten. Es scheint, dass Font Squirrel (http://www.fontsquirrel.com/fontface/generator) eine Erwähnung verdient. Und ja, die Google Font APIs sind auch großartig.

Für die Bildersetzung empfehle ich persönlich einen Bereich in einem Element mit dem Bild als Hintergrund auf dem übergeordneten Bereich des Bereichs. Aber anstatt anzuzeigen: Keine auf der Spanne, Position: Absolut abseits des Bildschirms. Auf diese Weise erhalten Screenreader immer noch diesen Inhalt.

Ich scheine mich zu erinnern, wie ich es geschafft habe, über den Einzug vom Bildschirm zu kommen, aber vielleicht habe ich meine dummen Hosen an.

Aber verdoppeln Sie auch diese Schriften.

folktrash
quelle
Oh, und hier ist meine Stimme gegen Sifr und Cufon.
Folktrash
1

Verwenden Sie eines der Font-Face-Kits von Font Squirrel . Das Kit enthält 4 verschiedene Schriftformate und das richtige CSS, um diese zu verwenden. Funktioniert in allen modernen Browsern und auch in älteren IE-Versionen!

Majestätsbeleidigung
quelle
0

Erstellen Sie die Site mit Bildern. Dann, in ein paar Monaten, wenn sie zurückkommt und sich beschwert, dass sie nicht von den Motoren gefunden wurde, bauen Sie die Seite mit Text neu auf und berechnen Sie eine weitere Gebühr!

David Heffernan
quelle
3
Das scheint mir allerdings ein wenig unverantwortlich zu sein.
Jeff Atwood,
OK, wie wäre es dann damit, einen Klon ihrer Lieblingswebsite mit Bildern als Text zu erstellen und ihre hostsDatei so zu ändern, dass sie auf den Klon verweist, und sie zu zwingen, diese Site zwei Wochen lang zu verwenden?
Majestätsbeleidigung
@ Jeff gut, ich war nur ein bisschen nervös ......
David Heffernan