SEO automatisieren

Schlagwort: Ladezeit

  • Bilder für SEO optimieren: Größe, Format und Alt-Text

    IMG_2034

    Bilder machen Inhalte verständlich – und sie sind auf vielen Websites der größte Grund für lange Ladezeiten. Gleichzeitig sind sie für Suchmaschinen schwer zu lesen: Ohne Text drumherum weiß Google nur ungefähr, was ein Bild zeigt. Diese Anleitung erklärt, wie Sie Bilder in Größe, Format und Beschreibung so vorbereiten, dass sie schnell laden und richtig verstanden werden.

    Abmessung und Dateigröße sind zwei verschiedene Dinge

    Die Abmessung ist die Zahl der Pixel in Breite und Höhe, etwa 4000 × 3000 Pixel. Die Dateigröße ist das Gewicht der Datei, etwa 3,4 MB. Ein Foto direkt aus der Kamera hat oft beides im Übermaß. Wird es auf der Website nur 800 Pixel breit angezeigt, lädt der Browser trotzdem die volle Datei – und der Besucher wartet.

    Die Regel ist einfach: Liefern Sie Bilder nicht größer aus, als sie angezeigt werden – mit Reserve für hochauflösende Bildschirme. Für ein Bild, das 800 Pixel breit dargestellt wird, reichen meist Varianten mit 800 und 1600 Pixeln Breite.

    Balkendiagramm: Klicks aus der Google-Suche von Januar bis Juni, mit Anstieg im April
    Diagramm (1200 × 628 px)

    Das passende Format

    • WebP und AVIF: Moderne Formate mit deutlich kleineren Dateien bei gleicher Qualität. Alle aktuellen Browser unterstützen sie.
    • JPEG: Für Fotos weiterhin geeignet, wenn moderne Formate nicht möglich sind.
    • PNG: Für Grafiken mit Transparenz oder scharfen Kanten – für Fotos fast immer zu schwer.
    • SVG: Für Logos und Symbole, die bei jeder Größe scharf bleiben sollen.
    SEO automatisieren SEO Tools SEO Automatisierung Bilder SEO

    Mehrere Größen mit srcset

    Mit dem Attribut srcset bietet eine Seite dasselbe Bild in mehreren Breiten an, und der Browser wählt die passende Variante für den Bildschirm. WordPress erzeugt diese Varianten beim Hochladen automatisch, solange das Bild über die Mediathek eingebunden wird.

    Breite und Höhe angeben

    Steht im HTML die Breite und Höhe eines Bildes, kann der Browser den Platz reservieren, bevor das Bild geladen ist. Fehlen die Angaben, springt der Text nach unten, sobald das Bild erscheint. Diese Verschiebung misst der Wert CLS, mehr dazu im Beitrag Core Web Vitals verbessern.

    Aufgeklappter Laptop auf einem Sofa, der ein Dashboard mit Diagrammen zeigt

    Lazy Loading – aber nicht überall

    Mit loading=“lazy“ lädt der Browser Bilder erst, wenn sie in die Nähe des sichtbaren Bereichs kommen. Das spart Daten bei langen Seiten. Das wichtigste Bild im ersten Bildschirm sollte dagegen sofort laden, sonst erscheint der Hauptinhalt später.

    Alternativtexte richtig schreiben

    Der Alternativtext beschreibt, was auf dem Bild zu sehen ist. Er wird von Screenreadern vorgelesen und hilft Suchmaschinen, das Bild einzuordnen.

    • Gut: „Balkendiagramm: Klicks aus der Google-Suche von Januar bis Juni, mit Anstieg im April“.
    • Schlecht: „IMG_2034“ oder „Bild“.
    • Ebenfalls schlecht: „SEO automatisieren SEO Tools SEO Automatisierung“ – eine Aufzählung von Suchbegriffen ist keine Beschreibung.
    • Dekorative Bilder: Reine Schmuckgrafiken erhalten ein leeres alt-Attribut, damit Screenreader sie überspringen.

    Dateinamen

    Ein beschreibender Dateiname hilft ein wenig bei der Einordnung und viel bei der Pflege. Verwenden Sie Kleinbuchstaben und Bindestriche und verzichten Sie auf Leerzeichen, Umlaute und ß: „klicks-diagramm-halbjahr.webp“ statt „Klicks Übersicht Größe.PNG“.

    Text gehört nicht nur ins Bild

    Informationen, die nur in einer Grafik stehen, kann Google kaum lesen. Steht in einer Infografik eine wichtige Zahl oder Aussage, sollte sie zusätzlich im Text der Seite vorkommen.

    Infografik

    Bilder für Vorschauen und strukturierte Daten

    Für Artikel empfiehlt Google hochauflösende Bilder; für die Anzeige in Google Discover sollten sie mindestens 1200 Pixel breit sein. Für Vorschauen in sozialen Netzwerken hat sich ein Format von 1200 × 630 Pixeln etabliert. Wichtig ist, dass die angegebene Bildadresse tatsächlich erreichbar ist und das Bild zum Inhalt passt.

    Übliche Größen im Überblick

    VerwendungEmpfohlene Größe
    Vorschaubild für soziale Netzwerke1200 × 630 px
    Beitragsbild im Blog1600×900
    Bild für Google Discovermindestens 1.200 Pixel Breite
    Produktfoto2000 * 2000 px
    Flyer zum Ausdrucken (Endformat)14,8 × 21 cm
    Übliche Bildgrößen im Überblick
    Vorschaubild mit dem Titel Bilder für SEO optimieren
    Vorschaubild im Format 1200*630
    Beitragsbild 1600 × 1000: Schreibtisch mit Laptop und Monitor

    Automatisch prüfen

    1. Bilder ohne Alternativtext und mit Dateinamen als Alternativtext finden.
    2. Dateien über einer festen Größe markieren, etwa 300 KB.
    3. Bilder finden, die deutlich größer ausgeliefert als angezeigt werden.
    4. Bilder ohne Breiten- und Höhenangabe auflisten.
    5. Prüfen, ob das Hauptbild im ersten Bildschirm verzögert geladen wird.

    Fazit

    Gute Bilder sind klein, beschreibend benannt und mit einem ehrlichen Alternativtext versehen. Die meisten Prüfungen lassen sich automatisieren – und weil Bilder auf fast jeder Seite vorkommen, ist der Effekt oft größer als bei jeder anderen technischen Verbesserung.

  • Core Web Vitals verbessern: LCP, INP und CLS verständlich erklärt

    Schreibtisch mit Laptop und Monitor

    Die Core Web Vitals sind drei Messwerte, mit denen Google die Nutzererfahrung beim Laden und Bedienen einer Seite bewertet. Sie fließen in die Bewertung der Seitenerfahrung ein. Ein schlechter Wert allein wirft eine gute Seite nicht aus den Suchergebnissen, aber bei vergleichbaren Inhalten kann er den Unterschied machen – und er wirkt sich direkt darauf aus, ob Besucher bleiben.

    Die drei Werte im Überblick

    LCP – Largest Contentful Paint

    Der LCP misst, wann das größte sichtbare Element im ersten Bildschirm geladen ist, meist ein Bild oder eine große Überschrift. Als gut gilt ein Wert von höchstens 2,5 Sekunden.

    INP – Interaction to Next Paint

    Der INP misst, wie schnell die Seite sichtbar auf Eingaben reagiert, etwa auf einen Klick oder eine Eingabe in ein Formular. Gut sind höchstens 200 Millisekunden. Der INP hat im März 2024 den früheren Wert FID abgelöst.

    CLS – Cumulative Layout Shift

    Der CLS misst, wie stark sich Inhalte beim Laden unerwartet verschieben. Gut ist ein Wert von höchstens 0,1. Typische Ursache sind Bilder ohne Größenangabe, nachgeladene Werbung oder Schriften, die spät ausgetauscht werden.

    Labordaten und Felddaten

    Es gibt zwei Arten von Messwerten. Labordaten entstehen, wenn ein Werkzeug wie Lighthouse die Seite unter festen Bedingungen lädt. Sie sind sofort verfügbar und gut zum Testen. Felddaten stammen von echten Besuchern mit Chrome und werden im Chrome UX Report gesammelt. Google bewertet die Seitenerfahrung anhand der Felddaten, und zwar am 75. Perzentil: Drei von vier Besuchen müssen den Grenzwert erreichen.

    Kleine Websites haben oft zu wenig Besucher, um Felddaten zu erhalten. Dann bleiben nur die Labordaten – sie zeigen die Richtung, aber nicht den tatsächlichen Wert für echte Nutzer.

    Die häufigsten Ursachen und Lösungen

    • Große Bilder: Bilder in passender Größe ausliefern, moderne Formate wie WebP oder AVIF nutzen und mit srcset verschiedene Größen anbieten.
    • Lazy Loading am falschen Bild: Das Hauptbild im ersten Bildschirm darf nicht verzögert geladen werden, sonst steigt der LCP.
    • Blockierende Skripte und Stylesheets: Nicht benötigte Dateien entfernen, Skripte verzögert laden.
    • Fehlende Bildgrößen: Breite und Höhe im HTML angeben, damit der Browser den Platz reserviert.
    • Langsamer Server: Eine lange Antwortzeit des Servers verzögert alle anderen Werte.

    Automatisch messen

    Mit der Programmierschnittstelle von PageSpeed Insights lassen sich Labordaten und – wenn vorhanden – Felddaten für wichtige Seiten regelmäßig abrufen. Sinnvoll ist eine wöchentliche Messung der Startseite und der meistbesuchten Seiten, getrennt nach Mobilgerät und Desktop. Werte schwanken von Messung zu Messung; achten Sie deshalb auf Trends statt auf einzelne Ergebnisse.

    Fazit

    Die Core Web Vitals sind messbar, verständlich und gut automatisierbar. Beginnen Sie mit den Seiten, die die meisten Besucher haben, und mit den Ursachen, die viele Seiten gleichzeitig betreffen – oft sind es die Bilder. Wie Sie Bilder richtig vorbereiten, zeigt der Beitrag Bilder für SEO optimieren.