Unlimited AE and Premiere Pro templates, videos & more! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Photo & Video
  2. Metadata

Von Lightroom zu WordPress: So erstellen Sie SEO-optimierte Bilder

by
Read Time:12 minsLanguages:
This post is part of a series called Digital Asset Management for Photographers (Learning Resource Guide).
How to Organize Your Photos in WordPress With WP Real Media Library
Getting Started With Photos for OS X

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

WordPress ist eine Software, die bis zu 25% der Websites im Internet unterstützt. Wichtige Websites wie die New York Times, CNN und Forbes verwenden WordPress, um ihre Websites zu betreiben.

Was WordPress für Webentwickler ist, ist Adobe Lightroom für Fotografen. In diesem Tutorial erfahren Sie, wie Sie diese beiden leistungsstarken Tools zusammen verwenden. Sie lernen, wie Sie Ihre Bilder schnell und einfach aus Lightroom auf eine WordPress-gesteuerte Site übertragen können. Am wichtigsten ist, dass wir dies auf eine Weise tun, die SEO-freundlich ist, damit Ihre Bilder entdeckt werden.

Bild-SEO für Anfänger

Die Suchmaschinenoptimierung (auch als SEO bezeichnet) besteht aus einer Reihe miteinander verbundener Methoden für Design, Veröffentlichung und Datenverwaltung, mit deren Hilfe Webseiten gefunden werden können. Die Wahrheit ist, dass SEO keine wirkliche Magie hat, wenn es um Bilder geht. Alles läuft darauf hinaus, Ihren Bildern einen Kontext hinzuzufügen, der für Computer sinnvoll ist.

Semantische Information

Stellen Sie sich das so vor: Sie geben eine Suchabfrage in die Suchmaschine Ihrer Wahl ein. Die Suchmaschine zeigt Ihnen eine Liste von Seiten an, die Ihren Vorstellungen entsprechen. Suchmaschinen verwenden Crawler - Computerprogramme und Algonrhithmen -, die das Web automatisch durchsuchen und Listen von Websites erstellen, die mit Schlüsselwörtern übereinstimmen.

Eine Suchmaschine kann erkennen, dass sich Bilder auf einer Webseite befinden, kann jedoch nicht leicht feststellen, was ein Bild darstellt. Daher müssen wir es durch zusätzliche Daten ergänzen, die es verstehen kann. Diese Art von Daten wird als semantische Information bezeichnet: Es handelt sich um Informationen, die dazu beitragen, die Bedeutung einzelner Fotos im Kontext zueinander und zum Rest der Webseite zu stärken. Wir verwenden Metadatenfelder, um diese sematischen Daten zu übertragen.

Google sucht nach einigen in unserem HTML-Code versteckten Tags, um Bilder zu finden. Wir können dem Code unserer Website Titel, Tags und Alternativtext hinzufügen, damit eine Suchmaschine unsere Website so einfach wie möglich indizieren kann. Es gibt keine Garantie dafür, dass Sie durch Hinzufügen sematischer Informationen Ihre Website auf die erste Seite der Google-Ergebnisse verschieben können. Ein paar grundlegende SEO-Schritte können jedoch definitiv Ihre Chancen verbessern. Es ist auch nur gute Datenhygiene!

Hier sind vier wichtige Informationen zur SEO-Optimierung, die Sie Ihren Bildern hinzufügen können:

Dateinamen

Wenn Sie nichts anderes tun, stellen Sie sicher, dass Sie Ihre Bilder so umbenennen, dass sie beschrieben werden. Ein einfacher Dateiname wie "resizing-images-tutorial.jpg" ist eine massive Verbesserung gegenüber "IMG_9052.cr2". Wenn Sie einen Dateinamen mit einigen Wörtern verwenden, die ihn beschreiben, verbessern Sie die Wahrscheinlichkeit, gefunden zu werden.

Beim Exportieren aus Lightroom verwende ich am liebsten den Abschnitt "Dateinamen" des Exportfensters. Beachten Sie, dass wir das exportierte Bild umbenennen möchten, nicht die Originaldatei. Suchen Sie den Abschnitt Dateinamen und aktivieren Sie das Kontrollkästchen Umbenennen in. Wählen Sie dann eine Dropdown-Option mit "benutzerdefiniertem Namen", damit wir unseren eigenen benutzerdefinierten Text hinzufügen können.

Der letzte Schritt ist das Hinzufügen des benutzerdefinierten Textes. Für das Web ist es am besten, die Wörter in einem Dateinamen durch Bindestriche anstelle von Leerzeichen zu trennen. Passen Sie den Dateinamen jedes Bildes an, um die besten Ergebnisse zu erzielen.

Custom Name - SequenceCustom Name - SequenceCustom Name - Sequence
Verwenden Sie eine benutzerdefinierte Namensoption, um Ihren Dateinamen eine bessere Chance zu geben, gefunden zu werden. Ein paar Worte, die den Inhalt eines Bildes beschreiben, reichen weit!

Alt-Text

Alternativer Text oder "Alternativtext" wird verwendet, um eine Textbeschreibung des Inhalts eines Bildes bereitzustellen. Denken Sie daran, dass eine Suchmaschine (noch) nicht feststellen kann, was in einem Bild enthalten ist. Daher müssen wir mithilfe von Alternativtext helfen.

Sie werden wahrscheinlich nie alten Text sehen; Der wichtige Teil ist, dass eine Suchmaschine wird.
Image alt textImage alt textImage alt text
Der Alternativtext eines Bildes sollte auch in HTML festgelegt werden. Der Alternativtext sollte das Bild kurz beschreiben. Wir können diesen Alternativtext in der WordPress-Medienbibliothek festlegen, und WordPress fügt ihn automatisch hinzu.

Alternativtext wird in dasselbe HTML-Bit eingefügt, das Ihre Bilder enthält. Verwenden Sie diese Option, um eine Beschreibung des Bildes hinzuzufügen. Eine kurze Beschreibung des Inhalts eines Bildes ist entscheidend für die SEO-Freundlichkeit. Wenn Sie kein Code schreiben, machen Sie sich keine Sorgen. Im nächsten Abschnitt dieses Handbuchs erfahren Sie, wie Sie diesen Alternativtext mit WordPress hinzufügen.

Das Vorhandensein von Alternativtext für Ihre Bilder ist auch für Sehbehinderte von entscheidender Bedeutung. Bildschirmlese-Software, die entwickelt wurde, um Personen mit vollständigem oder teilweisem Sehverlust zu helfen, liest den Alternativtext anstelle eines Bildes. Amherst College bietet eine hervorragende Anleitung zur Optimierung Ihrer Webseiten für die Barrierefreiheit.

Titel

Der Titel eines Bildes sollte auch im HTML-Tag enthalten sein. Der Titel sollte eine noch kürzere Version der Beschreibung sein, mit nur wenigen Wörtern, die den Inhalt eines Bildes signalisieren.

Image title textImage title textImage title text
Sie sollten auch einen Bildtitel in HTML mit dem Tag "title=" im selben Bildblock festlegen. Auch hier macht WordPress das Hinzufügen einfach.

Titel sind ein weiterer Teil des Puzzles, mit dem Suchmaschinen unsere Website indizieren können. WordPress enthält ein Titelfeld, das unsere SEO-Bemühungen unterstützt.

Bildunterschriften

Stellen Sie sich eine Beschriftung als den Text vor, der unmittelbar nach einem Bild angezeigt wird, das weitere Kommentare enthält. Bildunterschriften werden nicht direkt zu einem Bild-Tag hinzugefügt, sondern ergänzen sie auf jeden Fall. In HTML5 ist das <figcaption>-Tag Teil der <figure>-Gruppe, was sogar noch besser ist. Weitere Informationen zum Schreiben effektiver Untertitel finden Sie in Dawn Oosterhoffs Beschriftung, Beschreibung, Titel, ALT: Hinzufügen semantischer Informationen zu Bildern. Das Schreiben einer starken Bildunterschrift ist eine der am meisten unterbewerteten Fähigkeiten, die für jeden Fotografen nützlich ist!

Zuordnen von Metadaten von Lightroom zu WordPress

Nachdem wir die Säulen der Bild-SEO verstanden haben, schauen wir uns an, wie wir sie einfach und schnell zu unserer WordPress-gesteuerten Website hinzufügen können. Wir können den Titel und die Bildunterschrift eines Bildes aus unserem Lightroom-Katalog auf WordPress übertragen.

Suchen Sie im Lightroom Library-Modul das Metadatenfenster auf der rechten Seite. Sie können den Bildtitel und die Beschriftung sehen.

Stellen Sie beim Exportieren eines Bildes aus Lightroom sicher, dass Sie "alle Metadaten" einschließen. Dadurch wird sichergestellt, dass Titel und Beschriftung im JPEG-Bild gespeichert und von WordPress gelesen und eingefügt werden.

Include metadata on exportInclude metadata on exportInclude metadata on export
Stellen Sie sicher, dass Sie beim Exportieren eines Bildes Metadaten in die Datei aufnehmen. Dadurch werden diese Metadaten in WordPress verfügbar.

Auf WordPress hochladen

Sobald Sie eine ordentlich benannte Bilddatei mit einem Titel- und Untertitelsatz exportiert haben, können Sie sie auf WordPress hochladen. Gehen Sie zur WordPress-Medienbibliothek und laden Sie dieses Bild wie gewohnt hoch. Das hochgeladene Bild enthält denselben Titel und dieselbe Beschriftung, die wir im Lightroom-Metadatenfenster festgelegt haben!

Image Uploaded to WordPressImage Uploaded to WordPressImage Uploaded to WordPress
Endlich die Früchte unserer Arbeit! Der Titel und die Bildunterschrift, die wir

Sie müssen den Bildern manuell Alternativtext hinzufügen, sobald sie WordPress erreichen. Leider gibt es in Lightroom kein Feld, das in WordPress "alternativem Text" zugeordnet ist. Denken Sie daran, dass dies der im HTML-Code versteckte Text ist, mit dem Suchmaschinen unsere Bilder finden und indizieren können.

Alt textAlt textAlt text
Alt-Text muss zu Bildern in der WordPress-Medienbibliothek hinzugefügt werden.

Drücken Sie nach dem Einstellen des Alternativtextes auf Aktualisieren, um das Bild zu speichern. Wenn Sie es in einen Beitrag oder eine Seite einfügen, führt WordPress die Metadaten durch und nimmt die von uns hinzugefügten Metadaten in den HTML-Code auf.

Diese Schritte sind eine wichtige Hilfe zur Optimierung eines Bildes für das Web. Wir können auch noch einen Schritt weiter gehen, indem wir die Größe und Komprimierung von Bildern für das Web ändern.

Größenänderung für das Web

Bei der Vorbereitung von Bildern für das Web geht es nicht nur darum, sie mit Schlüsselwörtern zu laden und in WordPress abzulegen. Wir müssen auch über die Dateigröße und -abmessungen nachdenken. Denken Sie daran, dass ein großer Teil der mit dem Internet verbundenen Bevölkerung nicht das Glück hat, über eine hervorragende Breitbandverbindung zu verfügen, und wir sollten auch ihre Erfahrungen berücksichtigen.

mobiForge schrieb kürzlich, dass die durchschnittliche Größe der Webseite größer ist als das gesamte klassische Videospiel Doom von 1993. Dies ist von Natur aus keine schlechte Sache, aber eine gute Erinnerung daran, dass Webseiten voller Multimedia und großer Bilder sind als je zuvor. Es ist eine gute Erinnerung daran, dass wir Ihre Bilddateigrößen immer optimieren sollten.

Wenn wir bereit sind, Bilder an das Web zu senden, müssen zwei Schlüsselfaktoren optimiert werden: Abmessungen und Qualität. Schauen wir uns an, wie man beides perfektioniert.

Maße

Die Abmessungen eines digitalen Bildes sind die Länge und Breite des Bildes, gemessen in Pixel. Ein Bild, das als "600 mal 400 Pixel" bezeichnet wird, hat eine Breite von 600 Pixel und eine Höhe von 400 Pixel.

Mit meiner Canon 6D aufgenommene Bilder haben eine Größe von 5472 x 3648 Pixel. Wenn Sie sie auf Tuts+ sehen, sind sie im Layout auf 850 Pixel auf der langen Seite beschränkt. Theoretisch könnte ich das vollständige Bild hochladen, aber egal, was bei maximal 850 Pixel angezeigt wird.

Genau aus diesem Grund ändere ich meine Bilder immer auf ein webfreundliches Format. Meine Betrachter haben keine Monitore, die jedes einzelne Pixel anzeigen. Daher ist es nur sinnvoll, die Bildgröße zu ändern und ihnen die Ladezeit zu sparen.

Web Size SimulationWeb Size SimulationWeb Size Simulation
Diese Simulation zeigt, wie groß ein ursprüngliches 10-Megapixel-Bild ist und wie es im Web angezeigt wird. Die große Bildvorschau, die Sie sehen, ist eine skalierte Version des von mir aufgenommenen 10-Megapixel-Vollbilds. Im Einschub wurde die Größe mit der Darstellung auf Tuts+ verglichen. Ein 10-Megapixel-Bild in voller Breite ist über 4000 Pixel breit, während es in Tuts+ -Artikeln mit nur 850 Pixel auf der langen Seite angezeigt wird. Dies ist ein gutes Beispiel dafür, warum die Größenänderung so wichtig ist.

Was sind die richtigen Abmessungen für ein Bild im Web? Die Antwort lautet: "Es kommt darauf an, wohin es geht." Wenn Sie WordPress verwenden, überprüfen Sie die Dokumentation zu Ihrem Thema auf die unterstützten Bildbreiten. Der Entwickler bestimmt, wie Bilder in einem WordPress-Design angezeigt werden. Wenn keine Dokumentation verfügbar ist, probieren Sie eine Site wie PiliApp aus, um Ihre eigenen Messungen an einem Bild auf der Site durchzuführen, auf der Sie veröffentlichen.

Qualität

Hochwertige Bilder belegen mehr Speicherplatz. Je detaillierter und farbenfroher ein Bild ist, desto größer wird die Datei. Obwohl unser Bildarchiv diese Bilder in voller Qualität enthalten sollte, bedeutet die Vorbereitung eines Bildes für das Web, Kompromisse zwischen Qualität und Dateigröße einzugehen. Ein bisschen Qualität aufzugeben führt zu einer viel schnelleren Ladezeit für den Betrachter.

Beim Exportieren in Lightroom können Sie mit dem Schieberegler Qualität die Ausgabequalität eines Bildes anpassen. Es handelt sich um eine Skala von 0 bis 100, wobei ein Bild mit einer Qualität von 0 die kleinste Dateigröße darstellt. Ein Bild mit einer Qualität von 100 maximiert sowohl die Qualität als auch die Dateigröße.

Image quality comparisonImage quality comparisonImage quality comparison
Dieser Bildqualitätsvergleich zeigt einen subtilen Unterschied zwischen den verschiedenen Qualitätseinstellungen. Einige Unterschiede sind in den feineren Details sowie in den Farben am Himmel zu beobachten. Beachten Sie, dass im Bild mit der niedrigsten Qualität am Himmel einige "Streifen" (subtile Linien) auftreten, während bei Bildern mit höherer Qualität. Das Bild mit 25 Qualität ergab ein Bild mit 91 KB, während das Bild mit 100 Qualität ein Bild mit 366 KB war. Es geht darum, das Gleichgewicht zwischen Qualität und Dateigröße zu finden.

Eine meiner bevorzugten Möglichkeiten zur Steuerung der Dateigröße ist die Verwendung der Option "Dateigröße begrenzen auf". Ich verwende diese Option häufig, wenn ich Bilder exportiere, um sie auf Tuts+ zu veröffentlichen, da Tuts+ ein Limit von 150 Kilobyte für Bilder in Artikeln hat.

Bei Verwendung der Option "Dateigröße begrenzen auf" wird der Qualitätsregler vollständig umgangen. Anstatt eine Qualität zwischen 0 und 100 zu wählen, können Sie einfach eine maximale Dateigröße (in Kilobyte) festlegen, und Lightroom wählt eine Qualitätseinstellung für Sie.

Limit File Size screenshotLimit File Size screenshotLimit File Size screenshot
Das Feld "Dateigröße begrenzen auf" kann anstelle des Qualitätsreglers verwendet werden. Wenn Sie das Kontrollkästchen im Exportfenster aktivieren, wählen Sie die maximale Dateigröße für Ihr Bild aus, damit Lightroom funktioniert.

Wenn ich den Qualitätsregler für Webbilder verwende, lasse ich meiner Erfahrung nach normalerweise die Qualitätseinstellung im Bereich von 60 bis 75. Dies scheint der Sweet Spot für Dateigröße und Bildqualität zu sein. Wenn Sie den Schieberegler weit darüber hinaus vergrößern, erhalten Sie eine viel größere Datei ohne großen visuellen Unterschied.

Wenn Sie mehr über die Schlüssel zum Ändern der Größe von Bildern für das Web erfahren möchten, lesen Sie meinen Artikel aus dem letzten Jahr, So exportieren Sie JPGs für das Web aus Adobe Photoshop Lightroom. Während der Schwerpunkt dieses Tutorials auf den Metadaten für SEO liegt, ist die Bildgröße immer noch ein wesentlicher Bestandteil der Suchfreundlichkeit.

Machen wir Schluss und lernen weiter

In diesem Tutorial haben wir erläutert, wie Sie die niedrig hängenden Früchte für den Export von Bildern aus Lightroom auf eine WordPress-Website auswählen. Mach keinen Fehler; Dadurch wird Ihre Website nicht sofort an die Spitze von Google geschossen, um allgemeine Begriffe zu erhalten. Sie trägt jedoch wesentlich dazu bei, dass jemand Ihre Bilder findet.

Es ist erwähnenswert, dass es mehrere WordPress-Plugins oder Add-Ons gibt, die diesen Prozess automatisieren können. Plugins, die nicht häufig aktualisiert werden, können Ihre Site jedoch für Sicherheitslücken öffnen. Sie müssen sich auch darauf verlassen, dass ein Entwickler die Kompatibilität des Plugins mit neuen Versionen von WordPress beibehält. Zwei beliebte Plugins sind WP/LR Sync und LR/Blog.

Wenn Sie mehr über WordPress erfahren möchten, finden Sie im Abschnitt Tuts+ Code eine Fülle von Inhalten zum Ändern und Erweitern von WordPress. Der Foto- und Videobereich bietet auch eine umfassende Beschreibung von Adobe Lightroom, wenn Sie diese Fähigkeiten verbessern möchten.

Schließlich ist SEO ein sich ständig veränderndes Forschungsgebiet. Google aktualisiert ständig seinen Algorithmus, um die Seiten zu finden, die seiner Meinung nach am besten zur Suchanfrage passen. Es gibt eine Menge schlechter Ratschläge und "Tipps" für SEO da draußen. Meine Quelle für SEO ist der Moz-Blog. Die Genies des Smashing Magazine haben auch eine großartige Beschreibung, wie man eine SEO-optimierte Website erstellt.

Was machen Sie, um die Bilder für das Web vorzubereiten? Lassen Sie mich in den Kommentaren wissen.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.