it-swarm.com.de

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 bei längeren Texten denke ich nicht, dass dies die Lösung ist. Was kann ich machen ? Den Text in ein verstecktes div neben dem Bild setzen?

20
Wookai

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 in 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 würden 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 sie wahrscheinlich (sollte nicht sein) mit einem alten Browser (ich meine, wirklich alt, wie IE4 ...)

17
Oscar Godson

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 im anchor-Tag 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, dem Bild Alt, Titel und Longdesc 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.

6
Dave

Yuck. Sie muss wirklich über ihre Schriftenprobleme hinwegkommen, da sie die Zugänglichkeit ihrer Website beeinträchtigt und alle anderen Arten von Problemen verursacht, wie z. B. die Verzögerung des Renderns ihrer Seiten usw.

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

5
John Conde

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

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

3
Phil Mander

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. Zusätzlich zu den Link-Bildern wird dies keinen Schaden anrichten.

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.

2
Ben Hoffman

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 unter: 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.

2
Virtuosi Media

Früher habe ich dies mit Hintergrundbildern und versteckten verschachtelten Bereichen gemacht. Sieht gut aus für Textbrowser und Suchmaschinen und verfügt über 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:

Welcome to Hell on Wheels

In Aktion sehen .

Die Menge an Text, die Sie mit dieser Methode ersetzen können, ist wirklich unbegrenzt (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.

2

sFIR funktioniert möglicherweise für diesen Zweck, aber die Verwendung ist auf Client-Seite ressourcenintensiv und kann schwierig werden, wenn Sie müssen Links in den Text einbetten.

1
danlefree
  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 müssen nicht ü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;) don benutze 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.
1
Alex Bolotov

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!

1
Rick Curran

Versuchen Sie es mit der typeface.js Bibliothek! 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.

1
Ricket

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 würde ich persönlich einen Bereich in einem Element mit dem Bild als Hintergrund auf dem übergeordneten Bereich des Bereichs empfehlen. 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.

1
folktrash

Erstellen Sie die Site mit Bildern. Dann, in ein paar Monaten, wenn sie zurückkommt, beschwert sie sich, dass sie nicht von den Motoren gefunden wurde.

0
David Heffernan