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

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?

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

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.

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.

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.

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.

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.

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:

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.

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.

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.

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.

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.

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!

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!