Image SEO - Bildoptimierung für Suchmaschinen wie Google

In diesem Leitfaden werde ich auf Folgendes eingehen:

• Was genau Bildoptimierung für Suchmaschinen (Image SEO) ist
• Die Vorteile davon
• Meine 15 besten Tipps zur Optimierung Ihrer Bilder
• Wie Sie verschiedene Tools nutzen können, um Probleme mit den Bildern auf Ihrer Website zu erkennen
• Möglichkeiten, Ihre Bilder für Google Lens zu optimieren

Nach der Lektüre dieses Leitfadens sollten Sie verstehen, warum die Bildoptimierung für Ihre Website entscheidend ist und wie Sie damit Ihre Position in den Suchergebnissen (SERPs) sowie bei Google Images verbessern können. Eine Marketing Healthcare Agentur kann Ihnen zudem dabei helfen, diese Strategien effektiv umzusetzen und Ihre visuellen Inhalte optimal für Ihre Zielgruppe im Gesundheitswesen zu gestalten.

Das Verständnis von Bild-SEO und seinen Vorteilen

Die Nutzung vieler Bilder auf Ihrer Website ist nicht nur vorteilhaft, sondern sogar empfehlenswert. Der Mensch ist von Natur aus visuell orientiert, und nichts zieht unsere Aufmerksamkeit so stark auf sich wie ein ansprechendes Bild. Studien zeigen, dass Online-Inhalte, die Bilder enthalten, bis zu 94 % häufiger aufgerufen werden als solche ohne Bilder.

Mit anderen Worten: Die Einbindung von Bildern in Ihre Inhalte ist entscheidend, um die Aufmerksamkeit der Nutzer zu gewinnen und Ihre Platzierungen zu verbessern.

Doch wie können Sie sicherstellen, dass Bilder tatsächlich zu Ihren Bemühungen im Bereich der Suchmaschinenoptimierung beitragen? Hier kommt die Bild-SEO ins Spiel.

Bild-SEO beinhaltet die Optimierung Ihrer Bilder, um deren Sichtbarkeit in Google Bilder und den SERPs zu steigern. Dies bedeutet, dass sie möglicherweise sogar im Google Image Pack erscheinen könnten...

Google Search Result

Search Result Thumbnail

Die umfassende Optimierung Ihrer Bilder bietet eine Vielzahl von Vorteilen, darunter:

1. Verbesserte Verweildauer: Ansprechende Bilder auf Ihren Seiten erhöhen die Wahrscheinlichkeit, dass Nutzer mehr Zeit mit Ihren Inhalten verbringen möchten. Dies führt zu einer längeren Verweildauer, was sich positiv auf Ihre Suchmaschinenoptimierung auswirkt.
2. Verbesserte Zugänglichkeit: Durch das Hinzufügen von Alt-Text (alternativem Text) zu Bildern erhalten Suchmaschinen zusätzliche Informationen, um den Inhalt der Bilder besser zu verstehen. Alt-Text wird auch von Suchmaschinen angezeigt, wenn ein Bild nicht geladen werden kann. Darüber hinaus verbessert die Bereitstellung von Alt-Text die Zugänglichkeit Ihrer Seite für Benutzer, die Bildschirmlesegeräte verwenden. Diese Geräte wandeln digitalen Text in Blindenschrift oder synthetische Sprache um, um Nutzern, die Bilder nicht sehen können, den Inhalt zugänglich zu machen. Dies ist nicht nur für diese Nutzer hilfreich, sondern auch förderlich für Ihre Suchmaschinenoptimierung.
3. Bessere UX (Benutzererfahrung): Optimierte Bilder, die reibungslos dargestellt werden, tragen zu einer verbesserten Benutzererfahrung bei. Sie reduzieren das Risiko, dass überdimensionierte Bilder den Bildschirm überladen und andere Elemente verdecken. Schlecht optimierte, sperrige oder falsch formatierte Bilder können die Ladezeiten Ihrer Seite erheblich verlängern. Dies führt nicht nur zu einer negativen Benutzererfahrung, sondern kann sich auch auf Ihre Rankings auswirken. Durch die Optimierung Ihrer Bilder können Sie schnellere Ladezeiten erreichen und die Benutzererfahrung Ihrer Website verbessern.

Wie Sie das optimale Bilddateiformat für Ihre Website auswählen

Im Internet sind alle Grafiken als Bilddateien vorhanden. Diese Dateien existieren in verschiedenen Formaten, und während Sie das ursprüngliche Dateiformat oft in ein anderes konvertieren können, ist dies nicht immer ratsam. Die verschiedenen Formate präsentieren die gleichen Bilder auf unterschiedliche Weise und variieren in ihrer Dateigröße.

Jedes Dateiformat ist für einen bestimmten Zweck ausgelegt und spielt eine wesentliche Rolle in Bezug auf Aussehen, Leistung und Skalierbarkeit.

1. Erscheinungsbild: Einige Bildformate bieten mehr Details und eine höhere Qualität als andere.
2. Leistung: Einige Bilddateien beanspruchen mehr Speicherplatz als andere, was sich auf die Ladezeit Ihrer Website auswirken kann.
3. Skalierbarkeit: Während einige Bildformate ohne Qualitätsverlust skaliert werden können, sind andere dafür weniger geeignet. Dies kann die Darstellung auf verschiedenen Bildschirmgrößen beeinflussen.

Die Dateien auf Ihrer Website sollten eine kleine Dateigröße haben und schnell geladen werden (Leistung), ohne dass die Qualität (Aussehen/Skalierbarkeit) darunter leidet.

Die verschiedenen Bilddateiformate

Bildformate lassen sich in zwei Hauptkategorien unterteilen: Rasterdateien und Vektordateien. Jede Kategorie hat ihren eigenen Verwendungszweck.

Vektorgrafiken nutzen Linien, Punkte und Polygone zur Darstellung eines Bildes. Sie eignen sich besonders gut für einfache geometrische Formen wie Logos und Icons. Vektordateien können ohne Qualitätsverlust stufenlos skaliert werden, was sie ideal für hochauflösende Bildschirme und unterschiedliche Größen macht. Jedoch sind sie nicht das optimale Format für die Speicherung von Fotos.

Vektordateiformate:

• SVG
• PDF
• EPS
• AI

Rastergrafiken hingegen verwenden Pixelwerte innerhalb eines rechteckigen Rasters, um ein Bild darzustellen. Sie sind besser geeignet für komplexe Bilder wie Fotos. Im Gegensatz zu Vektoren sind diese Dateitypen auflösungsabhängig und basieren auf ihrer Größe. Das bedeutet, dass sie nicht skaliert werden können, ohne an Qualität zu verlieren und pixelig zu werden. Die meisten Bilder im Internet liegen im Rasterformat vor.

Raster-Dateiformate:

• JPEG
• PNG
• GIF
• TIFF
• PSD

Welches Bildformat ist am besten für SEO geeignet?

Der wichtigste Faktor ist die tatsächliche Dateigröße der Bilder (in Kilobyte): Versuchen Sie immer, diese unter 100 Kilobyte oder weniger zu halten, wann immer möglich. Wenn eine größere Datei benötigt wird (z. B. für Helden- oder Bannerbilder), kann es hilfreich sein, Bilder als progressive JPEGs zu speichern. Progressive JPEGs ermöglichen es, dass Bilder während des Ladens nach und nach angezeigt werden, wodurch eine unscharfe Version des vollständigen Bildes zuerst erscheint und sich nach und nach schärft, wenn mehr Bytes heruntergeladen werden. Wählen Sie daher zunächst das beste Format für Ihre Bedürfnisse und passen Sie dann die Einstellungen entsprechend an!

Einige beliebte Tools zur Bildkomprimierung:

1. GIMP: Ein plattformübergreifender, herunterladbarer Bildeditor.
2. TinyPNG: Verwendet intelligente verlustbehaftete Komprimierungstechniken, um die Dateigröße Ihrer PNG- und JPG-Dateien zu verringern.
3. Smush: Ein Plugin zur Bildkomprimierung und -optimierung für WordPress.
4. MinifyWeb: Ein kostenloser Online-Dienst zur Komprimierung von Webdateien.

Gängige Bildformate für das Internet sind JPEG, PNG, WebP, SVG und GIF.

Nicht alle Bildformate werden von allen Browsern unterstützt, wie zum Beispiel TIFF- oder BMP-Dateien. Daher werde ich die Bilddateitypen behandeln, die im Allgemeinen von Webbrowsern unterstützt werden. Sie sollten das am besten geeignete Format für die Bilder auf Ihrer Website auswählen.

JPEG - Gemeinsame Expertengruppe für Fotografie:

Eine JPG-Datei ist ein rasterbasiertes Bild, das für die Verwendung im Web und im Druck bestimmt ist. Das JPG-Format ist das Standarddateiformat von Digitalkameras und wird aufgrund seiner Komprimierung und universellen Unterstützung am häufigsten im Internet verwendet.

Diese Dateien eignen sich am besten für die Speicherung von Fotos mit kleinen Dateigrößen und wenig spürbarem Qualitätsverlust. JPGs verwenden eine verlustbehaftete Komprimierung, was bedeutet, dass die Qualität bei jeder erneuten Speicherung abnimmt.

JPGs müssen in der richtigen Größe und Auflösung für die Endnutzung gespeichert werden. Die Plattformen der sozialen Medien verwenden bestimmte Bildgrößen, um die Auflösung zu kontrollieren, Verpixelung und Bilddehnung zu vermeiden und sicherzustellen, dass das Foto vollständig zu sehen ist.

Vorteile von JPG:

1. Universelle Browserunterstützung
2. Geringe Größe von Dateien und E-Mail-Anhängen, schnelles Laden
3. Unterstützt die Anzeige von Millionen von Farben
4. Scharfe, qualitativ hochwertige Bilder

Nachteile von JPG:

1. Unterstützt keine transparenten Hintergründe
2. Verlustbehaftete Bildkomprimierung führt zu geringer Qualität oder schlechter Lesbarkeit des Textes
3. Nicht für computergenerierte Grafiken zu verwenden

PNG - Portable Netzwerk Grafik

Eine PNG-Datei ist der Standard für die Verwendung im Internet. Diese Dateien sind pixelbasiert und können nicht vergrößert werden, ohne dass sie verpixelt werden. Ähnlich wie bei JPGs bedeutet dies, dass sie in der richtigen Größe für die Endverwendung exportiert werden müssen.

Eine PNG-Datei unterstützt jedoch transparente Hintergründe und behält aufgrund der verlustfreien Komprimierung insgesamt eine höhere Bildqualität als JPGs für Grafiken (keine Fotos) - Sie können eine PNG-Datei ohne Qualitätsverlust speichern.

PNG-Dateien eignen sich viel besser für Grafiken mit weniger Farben und schnellen Farbübergängen, die scharf bleiben müssen, wie Logos, Symbole und einfache Illustrationen.

Verwenden Sie PNG-Dateien auf Ihrer Website und in sozialen Medien, da sie auf digitalen und mobilen Displays ein schärferes, klareres Bild erzeugen. Optimieren Sie Ihre PNG-Dateien für das Web, indem Sie die Dateigröße so gering wie möglich halten und dabei eine gute Qualität beibehalten.

PNG-24 exportiert ein schärferes Bild als PNG-8, weil es ein Bild mit mehr Farben speichert, aber die Dateigröße kann viel größer sein. Wenn das CMS Ihrer Website das Hochladen von SVG-Dateien nicht zulässt, ist eine PNG-Datei von guter Qualität die nächstbeste Lösung.

Vorteile von PNG:

1. Universelle Browserunterstützung
2. Unterstützt Transparenz
3. Am besten für grafische Elemente geeignet
4. Verlustfreie Komprimierung
5. Kleine Dateigröße mit begrenzten Farben

Nachteile von PNG:

1. Große Dateigröße mit Millionen von Farben
2. Nicht ideal für den Druck - optimiert für den Bildschirm

WebP

WebP ist ein Bildformat, das 2010 von Google speziell für eine bessere verlustfreie und verlustbehaftete Komprimierung von Webbildern entwickelt wurde.

Bildformate der nächsten Generation wie JPEG 2000 und WebP bieten eine bessere Webkomprimierung als PNG oder JPEG. Der Wechsel von JPEG und PNG zu WebP kann helfen, Serverplatz zu sparen, da die Bildkomprimierung die Schärfe des Originalbildes beibehält UND die Dateigröße erheblich reduziert.

Das bedeutet weniger Datenverbrauch und schnellere Downloads. Laut piio reduziert WebP die Dateigröße um fast 35 % im Vergleich zu JPEG und 50 % zu PNG.

Leider ist das WebP-Format nicht mit den meisten CMS-Plattformen kompatibel und erfordert oft eine Plugin-Erweiterung oder eine Umgehung, um diese Dateien hochzuladen, weshalb wir die Bilder unserer Website noch nicht mit diesem Dateiformat optimiert haben.

Vorteile von WebP:

1. Geringere Dateigröße bei gleicher Bildqualität
2. Verwendet sowohl verlustbehaftete als auch verlustfreie Komprimierung
3. Unterstützt Transparenz

Nachteile von WebP:

1. Wird nicht von allen Browsern unterstützt, insbesondere Safari und Internet Explorer
2. Wird nicht von allen CMS-Plattformen, einschließlich Squarespace, unterstützt

SVG - Skalierbare Vektorgrafik

SVG ist eine vom World Wide Web Consortium (W3C) entwickelte erweiterbare Auszeichnungssprache (XML) für vektorbasierte Bilder zur Beschreibung von zweidimensionalen Grafiken.

Eine SVG verwendet kein Pixelformat, wodurch das Bild skaliert werden kann und eine sehr hohe Qualität beibehalten wird. Diese Dateien unterstützen transparente Hintergründe und können in Bildbearbeitungsprogrammen und Webbrowsern geöffnet werden.

Eine SVG-Datei ist das ideale Format für Logos, Icons und einfache Illustrationen, da sie im Vergleich zu PNG und JPG (in dieser Reihenfolge) die schärfste Grafikqualität bietet.

Vorteile von SVG:

Universelle Browserunterstützung Geringe Dateigröße Verlustfreie Skalierung für einfache Formen und Text Unterstützt von Illustrationssoftware

Nachteile von SVG:

Kein ideales Format für Bilder oder komplexe Zeichnungen Wird nicht von allen CMS-Plattformen unterstützt, aber es gibt Umgehungsmöglichkeiten Wird von einigen Standard-Bildbearbeitungsprogrammen nicht unterstützt

Ändern der Bildgröße für die Verwendung im Internet

Es ist wichtig zu wissen, dass Bildgröße und Dateigröße zwei verschiedene Dinge sind. Die Bildgröße bezieht sich darauf, wie groß oder klein ein Bild in Bezug auf seine Breite und Höhe ist (z. B. 1050 Pixel mal 1000 Pixel). Die Dateigröße ist der Speicherplatz, den es einnimmt (z. B. 350 KB).

Bilder mit großen Abmessungen (Breite und Höhe) können die Ladegeschwindigkeit von Seiten stark verlangsamen. Das liegt daran, dass der Browser das gesamte Bild laden muss, auch wenn es größer ist als die maximale Breite, die die Website anzeigt.

Wenn z. B. die maximale Breite Ihres Blogs auf 650 Pixel eingestellt ist und Sie ein Bild mit einer Breite von 5.500 Pixeln hochladen, muss der Browser trotzdem das Bild in voller Größe herunterladen. Dies kann die Ladegeschwindigkeit einer Seite erheblich verlangsamen.

Das Bild muss also an die vorgesehene Anzeigegröße angepasst werden.

Das bedeutet natürlich, dass Sie die maximale Breite und Höhe der vorgesehenen Anzeigegröße überprüfen müssen. Wie das geht, erfahren Sie in dem hilfreichen Leitfaden, auf den ich verlinkt habe.

Sobald Sie die richtigen Abmessungen für Ihre Bilder ermittelt haben, können Sie die Größe ändern. Eines meiner Lieblingswerkzeuge für die Größenänderung von Bildern ist Bulk Resize Photos.

Sie müssen es nur in Ihrem Browser öffnen und dann Ihre Bilder rüberziehen oder von Ihrem Gerät hochladen.

Sobald die Größe Ihrer Bilder geändert wurde, können Sie sie auf Ihre Seite herunterladen.

Hochauflösende Bilder können auch die Ladegeschwindigkeit der Seite beeinträchtigen. Zugegeben, diese Bilder sehen großartig aus und sind ideal für den Druck, aber wenn es darum geht, sie auf Ihre Webseite hochzuladen, müssen Sie zugunsten einer schnelleren und reaktionsfähigeren Seite ein wenig von dieser Qualität opfern.

Die Standardauflösung für Bilder im Internet beträgt 72 Pixel pro Zoll (PPI). Pixel (px) sind die einzelnen Punkte, aus denen Bilder auf unseren Desktop- und Mobilbildschirmen bestehen. PPI gibt an, wie viele dieser Punkte innerhalb eines Zolls Platz auf dem Bildschirm erscheinen.

Die meisten Handy- und Desktop-Bildschirme zeigen Bilder mit 72 PPI an, so dass eine höhere Auflösung Ihre Bilder nicht unbedingt besser aussehen lässt.

Zusammenfassend lässt sich sagen, dass Sie die Größe Ihrer Bilder immer an die vorgesehene Bildschirmgröße anpassen und Ihre Bildauflösungen auf 72 PPI oder weniger beschränken sollten.

Wie Sie Bilder optimieren, um Ihre Website zu beschleunigen

Optimieren Sie Ihr Bild

Bei der Bildoptimierung werden Bilder in die kleinstmögliche Dateigröße konvertiert, ohne dass die Qualität darunter leidet. Zusätzlich zu ihrer geringeren Größe benötigen optimierte Bilder nur eine minimale HTML/CSS-Größenanpassung, so dass der Browser das Bild so wiedergeben kann, wie es auf der Webseite erscheint.

Es gibt vier gängige Methoden zur Bildoptimierung - und Sie sollten sie alle anwenden, um ein optimales Gleichgewicht zwischen Dateigröße und Bildqualität zu erreichen.

Komprimierung

Sie können verlustbehaftete und verlustfreie Komprimierungsalgorithmen verwenden, um die Dateigröße weiter zu reduzieren. Bei der verlustbehafteten Komprimierung werden redundante Pixel innerhalb eines Bildes gefunden und reduziert, während bei der verlustfreien Komprimierung die Daten innerhalb eines Bildes neu geordnet werden, ohne dass Pixel betroffen sind.

Am besten lassen sich einzelne Bilder mit Tools wie Kraken und Optimizilla komprimieren. Wenn Sie Entwickler sind, können Sie auch programmatische Tools wie imagemin verwenden, die mit Build-Tools wie Gulp als Teil eines automatisierten Workflows arbeiten.

Lasttests durchführen

Die meisten Unternehmen sind sich der Bedeutung der Leistung bewusst, wenn es darum geht, ein ideales Nutzererlebnis und die besten Platzierungen in Suchmaschinen zu gewährleisten.

Google PageSpeed Insights ist ein guter erster Schritt, um Probleme mit einer Website oder Anwendung zu erkennen. Nachdem Sie Ihre URL eingegeben haben, können Sie die wichtigsten Leistungskennzahlen sehen und erhalten spezifische Ratschläge, um wichtige Verbesserungen vorzunehmen.

Während PageSpeed Insights für eine erste Prüfung hilfreich ist, sind Lasttests der beste Weg, um die Leistung im Laufe der Zeit im Auge zu behalten. Diese Lasttests können auch auf wichtige Benutzer-Workflows ausgerichtet werden, um eine maximale Leistung zu gewährleisten.

LoadNinja ermöglicht es, Lasttests mit echten Browsern zu erstellen und auszuführen. Nachdem Sie einen Lasttest über eine browserbasierte Schnittstelle aufgezeichnet haben, können Sie ihn über Zehntausende von Browsern in der Cloud wiedergeben, um wichtige Engpässe zu identifizieren.

Beschreibender Alt-Text

Beschreibender Alt-TextAlternativer (Alt-)Text soll das "Warum" des Bildes in Bezug auf den Inhalt eines Dokuments oder einer Webseite vermitteln. Er wird den Nutzern von Bildschirmleseprogrammen vorgelesen und von Suchmaschinen indiziert. Er wird auch auf der Seite angezeigt, wenn das Bild nicht geladen werden kann, wie in diesem Beispiel eines fehlenden Bildes.

Symbol für ein defektes Bild mit Alt-Text unter "Touristen posieren für ein Foto am Fuß der John-Harvard-Statue".

Schreiben Sie einen guten Alt-Text

Fügen Sie einen Alt-Text für alle nicht-dekorativen Bilder hinzu. Halten Sie ihn kurz und beschreibend, wie einen Tweet. Fügen Sie nicht "Bild von" oder "Foto von" ein. Lassen Sie den Alt-Text leer, wenn das Bild rein dekorativ ist. Es ist nicht notwendig, Text in das Feld Titel zu schreiben.

Warum ist Alt-Text wichtig?

Alt-Text bietet Kontext für Menschen

Es gibt viele gute Gründe, die Zeit in das Schreiben von Alt-Text für die Bilder auf Ihrer Website zu investieren, aber das wichtigste Ziel ist es, sicherzustellen, dass Besucher mit unterschiedlichen Fähigkeiten gut bedient werden. Alt-Attribute ermöglichen es Bildschirmlesegeräten, die Informationen zu den Bildern auf der Seite zu lesen, um Personen mit Sehbehinderungen, geringer Sehkraft, unterschiedlichen Lernfähigkeiten und Personen, die ein Bild sonst nicht online betrachten können, zu helfen.

Alt-Text liefert Kontext für die Bildsuche

Ein weiterer hervorragender Grund ist, dass er Suchmaschinen wie Google helfen kann, Ihre Fotos besser zu verstehen und sie in den bildbasierten Ergebnissen, die so weit verbreitet sind, zu platzieren.

Sie sehen, dass Bildpakete in der Suche auftauchen, wenn Google die Anfrage so interpretiert, dass sie am besten durch visuelle Begleitung unterstützt wird. Die visuelle Suche erleichtert die Suche, wenn Sie nicht wissen, wonach Sie suchen, oder wenn Sie visuelle Anleitungen zur Inspiration oder zur weiteren Verfeinerung Ihrer Suche suchen.

Während die Zugänglichkeit der wichtigste Grund für die Aufnahme von Alt-Text ist, ist die Bereitstellung von Kontextinformationen für Suchmaschinen ein weiterer wichtiger Grund. Bei der Optimierung für die Bildersuche sollten Sie vor allem darauf achten, dass Bilder auftauchen, wenn Nutzer textbasierte Suchanfragen stellen.

Befolgen Sie dazu die bewährten Praktiken der Bild-SEO wie:

Moderne Dateiformate Alt-Text Relevante Dateinamen Schema-Auszeichnung

Wie sieht der Alt-Text im HMTL-Code aus?

Es ist leicht zu erkennen, wie der Alt-Text im HTML-Code einer Website aussieht. Sie können mit der rechten Maustaste auf ein beliebiges Bild klicken und "inspizieren", um das Chrome DevTool zu öffnen und nach "img alt" zu suchen.

''''

Ist der Alt-Text ein Ranking-Faktor?

Laut John Mueller von Google ist der Alt-Text ein Ranking-Faktor für die Bildersuche. Bei der allgemeinen organischen Suche behandelt Google den Alt-Text wie jeden anderen Text auf der Seite. Da der Text auf Ihrer Seite zum Gesamtranking beiträgt, ist der Alt-Text natürlich ein Teil dieses Gesamtbildes, aber es ist gut, von einem Google-Vertreter die Bestätigung zu erhalten, dass Ihre Investition in den Alt-Text für Ihre Ranking-Ziele bei der Bildersuche von größtem Nutzen sein wird.

Neben der Implementierung von Best Practices für Bildtitel und Dateinamen ist die Angabe von Alt-Text für Computer-Surfer mit unterschiedlichen Fähigkeiten von entscheidender Bedeutung. Außerdem gibt er Bots, die darauf programmiert sind, den Inhalt Ihrer Website zu verstehen, Hinweise auf den Kontext.

Alt-Text bietet Ihnen eine weitere Möglichkeit, Ihr Ziel-Keyword einzubinden. Da die Verwendung von Schlüsselwörtern auf der Seite immer noch ein wichtiger Faktor für die Platzierung in Suchmaschinen ist, ist es in Ihrem Interesse, einen Alt-Text zu erstellen, der sowohl das Bild beschreibt als auch, wenn möglich, ein Schlüsselwort oder eine Schlüsselwortphrase enthält, auf die Sie abzielen.

Wenn der Datenverkehr über die Bildersuche ein wichtiger Teil Ihrer SEO-Strategie ist, ist es außerdem sinnvoll, Google die richtigen Informationen über Ihre Bilder zu geben, um die Relevanz des Themas zu vermitteln. Dies können Sie tun, indem Sie moderne Dateiformate, Alt-Text, relevante Dateinamen und Schema-Markup korrekt verwenden.

Relevante Dateinamen

Es ist eine gute Praxis, die Namen Ihrer Bilddateien so zu wählen, dass sie für Ihr Bild relevant sind. Wenn es jedoch um die Suchmaschinenoptimierung geht, ist es wichtig, beschreibende Dateinamen zu verwenden.

Normalerweise würde ein Dateiname wie "IMG_948392.jpg" oder etwas Ähnliches lauten. Solche Dateinamen sind jedoch für die Suchmaschinen nicht hilfreich. Daher wäre es am besten, wenn Sie den Dateinamen von seinem Standardnamen abändern würden, damit die Suchmaschinen Ihre Bilder verstehen und letztendlich Ihren SEO-Wert verbessern können.

Nehmen wir zum Beispiel dieses einfache, köstliche Bild einer Eiscreme.

Erdbeer-Eiscreme Das obige Bild kann möglicherweise "strawberry-ice-cream.jpg" heißen, je nach Kontext, der es den Nutzern und Suchmaschinen leichter macht, den Zweck der im Inhalt verwendeten Bilder zu verstehen.

Schlüsselwörter nicht überfrachten

Dies ist einer der größten Fehler, wenn es um die Benennung von Bildern geht. Es wäre am besten, wenn Sie daran denken würden, dass die Benennung von Bildern nicht bedeutet, dass Sie Schlüsselwörter einfügen, um Ihre Platzierung zu verbessern.

Wenn Sie dies tun, wird es Ihrer SEO nicht gut tun. Ein Beispiel: Wenn ich das obige Bild als "best-strawberry-ice-cream-with-essence-available.jpg" benenne, wird Google dieses Bild nur als Spam betrachten.

Daher ist es empfehlenswert, die Namen Ihrer Bilder kurz zu halten und nur Ihr Haupt-Schlüsselwort zu verwenden.

Halten Sie Ihre Bildnamen kurz

Wir empfehlen Ihnen, Ihre Bildnamen kurz und prägnant zu halten. Versuchen Sie, Ihre Bildnamen auf 5 Wörter oder sogar weniger als 5 zu beschränken.

Trennen Sie Ihre Bildnamen mit Hilfe von Bindestrichen. Ein Beispiel: "strawberryicecream.jpg" ist für Google nur schwer zu verstehen. Nennen Sie es daher "strawberry-ice-cream.jpg", damit es besser verstanden wird.

Das Argument für responsive Bilder Bei so vielen verschiedenen Größen, die auf verschiedenen Geräten und Seiten möglich sind, ist die beste Möglichkeit, diese Komplexität zu bewältigen, die Verwendung von responsiven Bildern auf Ihrer Website.

Einfach ausgedrückt: Sie geben dem Browser über das srcset-Attribut eine Liste von Bild-URLs anstelle einer einzigen Bild-URL im src-Attribut. Der Browser lädt dann automatisch das Bild in der richtigen Größe, je nach Gerät des Nutzers. Mehr über responsive Bilder erfahren Sie in diesem Leitfaden.

Beispiel für ein responsives Bild-Tag mit srcset-Attribut:

Auch hier könnte Ihr CMS oder das von Ihnen verwendete Thema bereits responsive Bilder implementieren. Falls nicht, können Sie jederzeit die Echtzeit-Transformationen von ImageKit verwenden, um die verschiedenen Größen zu erzeugen, die Sie für Ihr responsives Bild-Tag benötigen.

Die Implementierung dieser Funktion würde technische Änderungen erfordern, z. B. eine Änderung des Themas oder der Vorlage Ihrer Website. Dies wäre jedoch eine einmalige Änderung. Wenn Sie es richtig machen, können Sie sicher sein, dass Ihr Browser immer die richtige Bildgröße verwendet.

Optimierung von Bildunterschriften und Begleittext

"Die Optimierung der Bildunterschriften und des umgebenden Textes" bezieht sich auf die Verbesserung der Textelemente, die Ihre Bilder begleiten, um ihren allgemeinen SEO-Wert und ihre Sichtbarkeit zu verbessern. Dies gilt sowohl für die Bildunterschrift direkt unter dem Bild als auch für den Text, der das Bild auf der Seite umgibt.

Bei der Optimierung von Bildunterschriften ist es wichtig, klare, beschreibende und relevante Informationen über das Bild zu liefern. Bildunterschriften sollten prägnant, aber informativ sein und eine kurze Zusammenfassung oder einen Kontext bieten, der den Suchmaschinen hilft, den Inhalt und Zweck des Bildes zu verstehen.

Neben den Bildunterschriften spielt auch der Text, der das Bild begleitet, eine wichtige Rolle bei der Optimierung der Bild-SEO. Es ist wichtig, sicherzustellen, dass der Text um das Bild herum relevant und natürlich geschrieben ist. Durch die nahtlose Integration von Schlüsselwörtern, die sich auf das Bild und sein Thema beziehen, in den Begleittext können Sie die Sichtbarkeit und Relevanz Ihrer Bilder weiter erhöhen.

Denken Sie daran, dass Suchmaschinen auf den Kontext angewiesen sind, um die Bedeutung eines Bildes zu verstehen, und dass die Optimierung der Bildunterschriften und des umgebenden Textes dazu beiträgt, diesen notwendigen Kontext zu liefern. Es ist hilfreich, relevante Schlüsselwörter und Phrasen einzufügen, die zum Bild und zu Ihrer allgemeinen Inhaltsstrategie passen.

Es ist jedoch wichtig, Keyword-Stuffing oder irreführende Bildunterschriften zu vermeiden. Konzentrieren Sie sich darauf, wertvolle Informationen zu liefern, die sowohl für das Bild als auch für den Gesamtinhalt der Seite wirklich relevant sind. Auf diese Weise können Sie sicherstellen, dass Ihre Bilder effektiv für die Suchmaschinenoptimierung (SEO) optimiert sind, was die Sichtbarkeit Ihrer Website erhöht und zu mehr organischem Traffic führt.

Mehrwert schaffen

Ihre Bildunterschriften sollten den Nutzern zusätzliche Informationen geben, die ihr Verständnis des Bildes verbessern. Dazu können interessante Fakten, historische Zusammenhänge oder persönliche Anekdoten gehören.

Zum Beispiel: "Der Eiffelturm in Paris, Frankreich. Er wurde 1887-1889 als Herzstück der Weltausstellung von 1889 erbaut".

Sie müssen nicht jedes einzelne Bild auf einer Seite mit einer Beschriftung versehen. Fügen Sie nur Bildunterschriften hinzu, von denen Sie glauben, dass sie die Benutzerfreundlichkeit der Seite verbessern und dem Leser einen zusätzlichen Nutzen bieten.

Schlüsselwörter hinzufügen

Sie sollten auch Ihre Bildunterschriften optimieren, indem Sie Schlüsselwörter in sie einbauen. Dies hilft den Suchmaschinen, Ihre Bilder mit bestimmten Schlüsselwörtern zu verknüpfen, die mit den Suchanfragen der Nutzer übereinstimmen.

So können Sie die Relevanz Ihrer Inhalte erhöhen und die Wahrscheinlichkeit steigern, dass Ihre Bilder in den SERPs und bei Google Images erscheinen, wenn Nutzer nach einem Schlüsselwort suchen.

Um Schlüsselwörter für Ihre Bildunterschriften zu finden, können Sie unseren alten Freund, das Keyword Magic Tool, verwenden. Gehen Sie wie oben beschrieben vor, um das Tool aufzurufen, geben Sie Ihr Schlüsselwort ein und wählen Sie die relevantesten aus, die Sie in Ihre Bildunterschrift einbauen möchten.

Schema-Auszeichnung für Bilder nutzen

Es gibt eine spezielle Art von Schema-Auszeichnung namens ImageObject. Dabei handelt es sich um ein strukturiertes Datenformat, mit dem Sie Suchmaschinen detaillierte Informationen über die Bilder auf Ihrer Website zur Verfügung stellen können.

Es hilft den Suchmaschinen, den Kontext und den Inhalt Ihrer Bilder zu verstehen, was zu einer besseren Indizierung und Sichtbarkeit in den Suchergebnissen führen kann.

Das bedeutet, dass Ihre Bilder möglicherweise Nutzern angezeigt werden, die aktiv nach visuellen Inhalten zu Ihrer Nische suchen.

Die Implementierung von ImageObject Schema Markup kann zu reichhaltigen Ergebnissen führen, die Funktionen wie Bild-Thumbnails, Beschriftungen und andere visuelle Verbesserungen enthalten können.

Bild-Thumbnails werden von Suchmaschinen selbst generiert, basierend auf verschiedenen Faktoren wie dem Inhalt Ihrer Seite, den enthaltenen Bildern und der Übereinstimmung mit der Suchanfrage.

Diese auffälligen Ergänzungen können Ihre Einträge für die Nutzer attraktiver machen und die Klickraten (CTR) verbessern.

Sie können detaillierte Informationen bereitstellen, wie zum Beispiel:

Der Name oder Titel des Bildes Eine Beschreibung des Bildinhalts die URL der Bilddatei Die URL für eine Miniaturansicht des Bildes den Autor oder Ersteller des Bildes Das Datum, an dem das Bild erstellt oder veröffentlicht wurde Wenn Sie Schema Markup implementieren, können Sie unter anderem folgende Arten von Rich Results sehen:

Bild-Thumbnail: Eine kleine Vorschau oder ein Thumbnail des Bildes. Titel: Ein Titel oder eine Beschreibung, die sich auf das Bild bezieht. Autor oder Quelle: Informationen über die Quelle oder den Ersteller des Bildes. Veröffentlichungsdatum: Falls zutreffend, das Datum, an dem das Bild veröffentlicht oder hochgeladen wurde. Beschreibung: Eine kurze Beschreibung oder Bildunterschrift, die mit dem Bild verbunden ist. Zusätzliche Links: Links zu verwandten Inhalten oder Seiten auf der Website. Bewertungen und Rezensionen: Falls zutreffend, Benutzerbewertungen oder Rezensionen des Bildes. Informationen zur Bildlizenz: Details zu den Lizenz- oder Nutzungsrechten des Bildes. Derzeit unterstützt Google Images die folgenden Arten von strukturierten Daten:

Produkte Videos Rezepte Angenommen, Sie betreiben eine E-Commerce-Website, auf der Sie Schuhe verkaufen. Wenn Sie Schema-Markup verwenden, um ein Bild als Produkt zu definieren, könnte Google das Bild mit einem Preisschild-Symbol (oft als "Badge" bezeichnet) im Image Pack auf den SERPs und in Google Images anzeigen. Dazu müssen Sie Ihren Seiten produktstrukturierte Daten hinzufügen.

Einzigartige Bilder erstellen

Sie wollen, dass Ihre Fotos auf Ihrer Website auffallen. Wenn Sie Ihre Website mit Archivbildern füllen, sehen Sie unoriginell aus - wie Tausende anderer Websites, die sich nicht abheben.

Zu viele Websites sind überfüllt mit denselben allgemeinen Stockfotos.

Denken Sie an eine Unternehmenswebsite, eine Beratungsfirma, ein Unternehmen, das auf seinen Kundenservice stolz ist. All diese Websites verwenden praktisch das gleiche Bild eines lächelnden Geschäftsmannes.

Ich bin sicher, Sie haben schon einmal eines gesehen, das so aussieht:

ImageCompression Auch wenn Sie Ihre Archivbilder perfekt optimiert haben, haben sie nicht die gleiche Wirkung oder die gleichen potenziellen SEO-Vorteile wie ein qualitativ hochwertiges Originalbild.

Je mehr Originalbilder Sie haben, desto besser ist das Erlebnis für den Nutzer und desto besser sind Ihre Chancen, bei relevanten Suchanfragen zu ranken.

Denken Sie daran, dass große Bilder mit größerer Wahrscheinlichkeit in Google Discover angezeigt werden.

Wie Google in seiner Ressource für fortgeschrittene SEO empfiehlt,

"Große Bilder müssen mindestens 1200 px breit sein und durch die Einstellung max-image-preview:large oder durch die Verwendung von AMP aktiviert werden".

Verwenden Sie nicht Ihr Logo als Bild.

Erstellen einer Bild-Sitemap

XML-Sitemaps helfen Suchmaschinen, Ihre Seiten für die Indizierung zu finden, und helfen ihnen gleichzeitig, die Struktur Ihrer Website zu verstehen. Ich betrachte sie gerne als eine Art Fahrplan für Suchmaschinen. Image-Sitemaps sind ähnlich, aber es gibt einige wichtige Unterschiede.

Eine XML-Sitemap ist eine umfassende Liste aller Seiten Ihrer Website. Sie enthält URLs für alle Arten von Inhalten, einschließlich Blogs, Artikel und Produktseiten. Sie können auch Bild-URLs zu einer XML-Sitemap hinzufügen, damit Google sie crawlen und indizieren kann. Dies wird als Hinzufügen von Bild-Sitemap-Tags bezeichnet. Wenn Sie mehr darüber erfahren möchten, lesen Sie den Sitemap-Leitfaden von Google.

Bild-Sitemaps liefern Google eine Liste aller Bilder auf Ihrer Website.

Dadurch erhöht sich die Wahrscheinlichkeit, dass sie in bildspezifischen Suchergebnissen wie Google Images angezeigt werden, da Google sie finden und indizieren kann. Auf diese Weise erreichen Sie mehr Nutzer, die speziell nach visuellen Inhalten suchen.

Bei der Erstellung einer regulären XML-Sitemap, die Bild-URLs enthält, oder einer Bild-Sitemap müssen bestimmte Bild-Tags eingefügt werden. Hier sind die Ratschläge direkt von Google:

Was sind Open-Graph-Meta-Tags?

Open Graph-Meta-Tags sind Codeschnipsel, die steuern, wie URLs angezeigt werden, wenn sie in sozialen Medien geteilt werden.

Sie sind Teil des Open-Graph-Protokolls von Facebook und werden auch von anderen Social Media Websites verwendet, darunter LinkedIn und Twitter (falls keine Twitter Cards vorhanden sind).

Sie finden sie im -Abschnitt einer Webseite. Alle Tags mit og: vor einem Eigenschaftsnamen sind Open-Graph-Tags.

Hier sind einige Beispiele aus unserem Leitfaden, wie man ein SEO-Experte wird:

Warum sind Open Graph-Tags wichtig?

Es ist wohl wahrscheinlicher, dass Menschen geteilte Inhalte mit optimierten OG-Tags sehen und anklicken, was mehr Social Media Traffic auf Ihrer Website bedeutet.

Hierfür gibt es drei Gründe:

Sie machen die Inhalte in den sozialen Medien auffälliger. Sie sagen den Leuten auf einen Blick, worum es in dem Inhalt geht. Sie helfen Facebook zu verstehen, worum es in den Inhalten geht, was die Sichtbarkeit Ihrer Marke bei der Suche erhöhen kann. Gehen wir näher auf diesen letzten Punkt ein, da er oft übersehen wird.

Hier sind die Ergebnisse einer Facebook-Suche nach "alternativen Suchmaschinen":

Welche Open Graph-Tags sollten Sie verwenden?

Facebook listet in seiner offiziellen Dokumentation 17 OG-Tags auf, plus Dutzende von Objekttypen. Wir werden hier nicht auf alle eingehen. Nur vier sind für Facebook erforderlich, um die Grundlagen Ihrer Seite zu verstehen, und es gibt noch ein paar andere, die manchmal hilfreich sind.

Schauen wir uns diese an.

og:Titel Der Titel deiner Seite.

Syntax Bewährte Praktiken Fügen Sie ihn zu allen "teilbaren" Seiten hinzu. Achten Sie auf Genauigkeit, Wert und Anklickbarkeit. Halten Sie sie kurz, um einen Überlauf zu vermeiden. Es gibt keine offiziellen Richtlinien dafür, aber 40 Zeichen für mobile Geräte und 60 für Desktop-Computer sind ungefähr der richtige Wert. Verwenden Sie den Rohtitel. Fügen Sie kein Branding ein (z. B. den Namen Ihrer Website). og:url Die URL des Inhalts.

Syntax Bewährte Praktiken Verwenden Sie die kanonische URL. Sie hilft dabei, alle verbundenen Daten, wie z. B. Likes, über alle veröffentlichten doppelten URLs hinweg zu konsolidieren. og:image Die URL eines Bildes für das Social Snippet.

Beachten Sie, dass dies vielleicht das wichtigste Open Graph-Tag ist, da es den meisten Platz im sozialen Feed einnimmt.

Syntax Bewährte Praktiken Verwenden Sie benutzerdefinierte Bilder für "teilbare" Seiten (z. B. Homepage, Artikel usw.) Verwenden Sie Ihr Logo oder ein anderes Markenbild für den Rest Ihrer Seiten. Verwenden Sie Bilder mit einem Seitenverhältnis von 1,91:1 und einer empfohlenen Mindestgröße von 1200x630 für optimale Klarheit auf allen Geräten. og:Typ Die Art des Objekts, das Sie teilen. (z.B. Artikel, Website, etc.)

Syntax Bewährte Praktiken Verwenden Sie article für Artikel und website für den Rest Ihrer Seiten. Beschreiben Sie die Objekttypen gegebenenfalls weiter (optional). og:description Eine kurze Beschreibung des Inhalts.

Syntax Bewährte Praktiken Ergänzen Sie den Titel, um das Snippet so ansprechend und klickenswert wie möglich zu gestalten. Kopieren Sie hier Ihre Meta-Beschreibung, wenn sie sinnvoll ist. Halten Sie sie kurz und bündig. Facebook empfiehlt 2-4 Sätze, aber das wird oft abgeschnitten. og:Gebietsschema Legt die Sprache des Inhalts fest.

Syntax Bewährte Praktiken Nur für Inhalte verwenden, die nicht in amerikanischem Englisch (en_US) verfasst sind. Facebook geht davon aus, dass Inhalte ohne dieses Tag in dieser Sprache verfasst sind.

Wie wirkt sich Lazy Loading auf die Ladezeiten einer Seite aus?

Lazy Loading ist eine Optimierungstechnik, die dazu dient, die Reaktionszeit einer Webseite zu erhöhen. Dabei werden Inhalte auf der Seite oder im Browser nur dann geladen, wenn sie benötigt oder angefordert werden.

Das bedeutet, dass Inhalte, die nicht unmittelbar auf einer Seite zu sehen sind oder mit denen interagiert wird, erst dann geladen werden, wenn sie benötigt werden.

Der Hauptvorteil von "Lazy Loading" besteht darin, dass es die Leistung einer Website verbessern kann, indem es die Ladezeiten der Seite verkürzt. Da der Inhalt nur bei Bedarf geladen wird, kann dies zu einer kürzeren Ladezeit und einer höheren Geschwindigkeit der Seite führen. Außerdem werden die Serverlast und die Bandbreitennutzung verringert, was zur Schonung der Webserver-Ressourcen beiträgt.

Auf einer eher technischen Ebene kann Lazy Loading dazu beitragen, eine Webseite für ein schnelleres Laden und Rendern zu optimieren, indem die Gesamtgröße des DOM-Baums (Document Object Model) reduziert wird. Dieser Baum besteht aus allen Elementen, die an einer Webseite beteiligt sind. Dazu gehören Stile, Skripte und Bilder. Indem Inhalte nur dann geladen werden, wenn sie benötigt werden, wird die Gesamtgröße des DOM-Baums reduziert. Dies führt zu effizienteren Seitenwiedergabezeiten und schnelleren Ladezeiten.

Neben der Verkürzung der Seitenladezeit kann Lazy Loading auch zur Verbesserung der SEO-Rankings beitragen. Denn die Optimierung der Seitengeschwindigkeit ist ein wichtiger Rankingfaktor für Suchmaschinen. Eine Website, die schnell lädt, wird in den Suchmaschinen-Rankings eher besser abschneiden als eine, die langsam geladen wird. Eine schnellere Ladezeit erhöht die Nutzerzufriedenheit, steigert das Nutzerengagement und verbessert wiederum die Platzierung der Website in den SERPs.

Es ist wichtig zu beachten, dass sich das langsame Laden nicht für alle Seitenelemente eignet. Einige Seitenelemente, wie z. B. Videos und Bilder, werden am besten geladen, wenn ein Nutzer scrollt oder mit der Seite interagiert. Auf diese Weise wird das beste Erlebnis für den Benutzer gewährleistet. Außerdem sollten Inhalte von Drittanbietern, wie z. B. Anzeigen, nicht verzögert geladen werden. Denn wenn die Anzeigen zu spät geladen werden, sind sie möglicherweise nicht mehr so relevant oder aktuell.

Lazy Loading kann eine gute Möglichkeit sein, die Ladegeschwindigkeit einer Webseite zu verbessern. Indem Inhalte und Ressourcen nur bei Bedarf geladen werden, können die Ladezeiten drastisch reduziert und die Benutzerzufriedenheit erhöht werden. Durch die Optimierung von Seiten auf Geschwindigkeit kann auch die Platzierung in Suchmaschinen verbessert werden. Es sollte jedoch darauf geachtet werden, dass der Inhalt zum richtigen Zeitpunkt geladen wird und nicht zu lange auf sich warten lässt.

Warum ein Bild-CDN verwenden?

Bild-Content-Delivery-Networks (CDNs) eignen sich hervorragend zur Optimierung von Bildern. Durch den Wechsel zu einem Bild-CDN kann die Größe von Bilddateien um 40-80 % verringert werden. Theoretisch ist es möglich, die gleichen Ergebnisse nur mit Build-Skripten zu erzielen, aber in der Praxis ist das selten.

Was ist ein CDN für Bilder?

Bild-CDNs sind auf die Umwandlung, Optimierung und Bereitstellung von Bildern spezialisiert. Man kann sie auch als APIs für den Zugriff auf und die Bearbeitung von Bildern auf Ihrer Website betrachten. Bei Bildern, die von einem Bild-CDN geladen werden, gibt eine Bild-URL nicht nur an, welches Bild geladen werden soll, sondern auch Parameter wie Größe, Format und Qualität. So lassen sich leicht Variationen eines Bildes für verschiedene Anwendungsfälle erstellen.

Asset-Caching zur Verbesserung der SEO nutzen

Die Seitengeschwindigkeit, d. h. die Zeit, die der Browser eines Nutzers benötigt, um Informationen von Ihrem Server zu erhalten und eine Seite zu laden, ist eines der wichtigsten Ranking-Signale in den Google-Suchergebnissen. Da das Abrufen von Inhalten über das Netzwerk Zeit und Ressourcen kostet, ist die Reduzierung der Anzahl der Inhalte eine gute Möglichkeit, die Ladezeit zu verkürzen.

Was ist Browser-Caching?

Browser-Caching ist die Fähigkeit eines Webbrowsers, Dateien direkt auf Ihrem Computer zu speichern und diese Dateien beim nächsten Besuch der Seite von dort zu laden. Auf diese Weise müssen diese Dateien nicht erneut heruntergeladen werden, was die Ladezeit der Seite erheblich verkürzen kann.

Wenn ein Browser eine Webseite anzeigt, muss er viele verschiedene Dinge laden:

Bilder CSS-Dateien Skripte Verschiedene andere Widgets und Dateien Wenn Sie das nächste Mal eine Seite aufrufen, laden Sie sie mit geöffnetem Netzwerkfenster. Hier wird angezeigt, welche Elemente geladen werden, wenn die Seite angezeigt wird, und wie lange jedes Element zum Laden benötigt.

Wahrscheinlich werden Sie feststellen, dass sich die Ladezeit für bestimmte Elemente erheblich verkürzt, wenn Sie die Seite ein zweites Mal laden. Dies ist dem Caching zu verdanken. Diese Dateien werden direkt von Ihrem lokalen Computer geladen, was die Effizienz der Verbindung zwischen Ihrem Browser und dem Server der Seite erhöht.

Wie man Browser-Caching für SEO nutzen kann

Es gibt 2 Möglichkeiten, das Browser-Caching zu nutzen, um die Ladezeit Ihrer Seite zu beschleunigen:

Expires-Header Cache-control-Header Beide Methoden werden durch Hinzufügen von Code zur .htaccess-Datei Ihrer Website aktiviert.

Die .htaccess-Datei ist sehr wichtig für Ihre Website. Wenn Sie also mit der Arbeit mit einer solchen Datei nicht vertraut sind, lesen Sie diesen Leitfaden über htaccess, bevor Sie versuchen, Änderungen vorzunehmen.

1. Expires-Kopfzeilen Um Expires-Header in Ihrer .htaccess-Datei zu verwenden, fügen Sie den folgenden Code an den Anfang:

EXPIRES CACHING

Wenn Sie diesen Abschnitt Zeile für Zeile durchgehen, können Sie sehen, dass die Idee hinter den Expires-Headern gar nicht so kompliziert ist.

Die Zeile ExpiresActive On aktiviert das Expires-Modul. Jede weitere Zeile legt fest, wie lange ein Browser einen bestimmten Dateityp in seinem Cache behalten soll. Im obigen Beispiel sollten JPEGs und GIFs, d. h. alle Dateien, die auf .jpg, jpeg oder .gif enden, ein Jahr lang zwischengespeichert werden, während CSS einen Monat lang zwischengespeichert werden sollte.

Um diese Zeiten zu ändern, ersetzen Sie einfach "1 Monat" durch eine beliebige Anzahl von Monaten, Wochen oder Jahren, die Sie wünschen.

2. Cache-control-Kopfzeilen

Die Expires-Methode der Zwischenspeicherung funktioniert bei den meisten Servern. Allerdings arbeiten nicht alle Server mit Expires. Außerdem ist es etwas umständlich, für jeden Dateityp, den Sie zwischenspeichern wollen, eine eigene Zeile zu haben.

Eine einfachere, aber etwas fortschrittlichere Möglichkeit, die Zwischenspeicherung zu aktivieren, ist die Verwendung der so genannten Cache-Control.

Um Cache-Control zu verwenden, fügen Sie den folgenden Code in Ihre .htaccess ein:

1 Monat für die meisten statischen Inhalte

<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$"> Header-Set Cache-Control "max-age=2592000, public"

Die erste Zeile, die mit der Raute, ist nur ein Hinweis. Ihre Datei wird sie ignorieren, aber es ist sinnvoll, sie für andere zu hinterlassen, die möglicherweise an Ihrer Website arbeiten, insbesondere wenn Ihre Caching-Optimierung komplexer wird.

Die nächste Zeile, <filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">, besagt, dass etwas mit jedem Dateityp geschehen soll, der mit einem aus der Liste übereinstimmt. In diesem Fall CSS, JPG, PNG, GIF, JS und ICO. Wenn Sie nicht wollen, dass eine dieser Dateien genauso lange zwischengespeichert wird wie die anderen, entfernen Sie sie einfach aus dieser Zeile.

In der dritten Zeile, Header set Cache-Control "max-age=2592000, public", wird der eigentliche Header eingefügt und die Zwischenspeicherzeit festgelegt.

Der Teil "Header set Cache-Control" legt die Kopfzeile fest, während der Teil "max-age=2592000" besagt, dass der Browser die Dateien einen Monat lang (2592000 Sekunden) speichern soll. Die Zeitangaben sind hier immer in Sekunden.

Der public-Teil besagt, dass die Datei auf Ihrem Server öffentlich ist.

Schließlich schließt die letzte Zeile den Codeblock ab.