Automatische Website-Screenshots mit WordPress erstellen

Warum automatische Website-Screenshots nützlich sind

Wer auf einer WordPress-Website andere Internetseiten zeigt, benötigt häufig ein passendes Vorschaubild. Das kann beispielsweise bei einem Webdesign-Portfolio, einer Linkliste, einem Kundenverzeichnis oder einer Sammlung hilfreicher Werkzeuge der Fall sein.

Normalerweise müsste jede Website einzeln im Browser geöffnet, fotografiert, zugeschnitten und anschließend in die WordPress-Mediathek hochgeladen werden. Ändert sich die dargestellte Website, ist das Bild außerdem schnell veraltet.

Automatisch erzeugte Website-Screenshots vereinfachen diesen Ablauf. Statt einer Bilddatei wird nur die Adresse der gewünschten Website angegeben. Ein externer Screenshot-Dienst ruft die Seite auf und erzeugt daraus ein Vorschaubild.

Die kostenlose Lösung mit WordPress.com mShots

WordPress.com betreibt mit mShots einen Dienst, der aus einer öffentlich erreichbaren Internetadresse ein Vorschaubild erzeugt. Für eine einfache Nutzung ist weder ein eigenes Benutzerkonto noch ein API-Schlüssel erforderlich.

Die gewünschte Internetadresse wird an den mShots-Endpunkt übergeben. Breite und Höhe des Bildes können als Parameter ergänzt werden. Das erzeugte Bild lässt sich anschließend wie eine normale Grafik auf der eigenen Website anzeigen.

Schritt 1: Den Screenshot-Shortcode zu WordPress hinzufügen

Für die Einbindung wird ein kleiner PHP-Code benötigt. Dieser registriert in WordPress den Shortcode [website_screenshot].

Der Code sollte nicht direkt in das Haupt-Theme geschrieben werden. Bei einem Theme-Update könnten solche Änderungen verloren gehen. Sinnvoller ist die Verwendung eines eigenen kleinen Plugins, eines Child-Themes oder eines gepflegten Code-Snippet-Plugins.

Bei Verwendung eines Code-Snippet-Plugins wird der folgende Code ohne ein zusätzliches öffnendes <?php eingefügt:

/**
 * Erstellt einen automatischen Website-Screenshot
 * über WordPress.com mShots.
 *
 * Beispiel:
 * [website_screenshot url="https://wordpress.org" width="1200" height="800"]
 */
function tm_website_screenshot_shortcode( $atts ) {

    $atts = shortcode_atts(
        array(
            'url'    => '',
            'width'  => 1200,
            'height' => 800,
            'alt'    => '',
            'link'   => 'yes',
        ),
        $atts,
        'website_screenshot'
    );

    $url = esc_url_raw( trim( $atts['url'] ) );

    if ( empty( $url ) || ! wp_http_validate_url( $url ) ) {
        return '';
    }

    $width  = max( 200, min( 1280, absint( $atts['width'] ) ) );
    $height = max( 150, min( 960, absint( $atts['height'] ) ) );

    $host = wp_parse_url( $url, PHP_URL_HOST );

    $alt = sanitize_text_field( $atts['alt'] );

    if ( empty( $alt ) ) {
        $alt = sprintf(
            'Screenshot der Website %s',
            $host ? $host : $url
        );
    }

    $screenshot_url = add_query_arg(
        array(
            'w' => $width,
            'h' => $height,
        ),
        'https://s.wordpress.com/mshots/v1/' . rawurlencode( $url )
    );

    $image = sprintf(
        '<img class="tm-website-screenshot" src="%1$s" width="%2$d" height="%3$d" alt="%4$s" loading="lazy" decoding="async">',
        esc_url( $screenshot_url ),
        $width,
        $height,
        esc_attr( $alt )
    );

    if ( 'no' === strtolower( $atts['link'] ) ) {
        return $image;
    }

    return sprintf(
        '<a class="tm-website-screenshot-link" href="%1$s" target="_blank" rel="noopener noreferrer">%2$s</a>',
        esc_url( $url ),
        $image
    );
}

add_shortcode(
    'website_screenshot',
    'tm_website_screenshot_shortcode'
);

Nachdem das Snippet gespeichert und aktiviert wurde, steht der neue Shortcode in Beiträgen, Seiten und anderen Inhaltsbereichen zur Verfügung.

Schritt 2: Einen automatischen Screenshot einfügen

Im WordPress-Editor kann der Screenshot jetzt mit einem Shortcode eingefügt werden:

[website_screenshot url="https://wordpress.org" width="1200" height="800" alt="Startseite von WordPress.org"]

Nach dem Speichern zeigt WordPress an dieser Stelle automatisch das von mShots erzeugte Vorschaubild an.

Soll der Screenshot nicht auf die dargestellte Website verlinken, kann der Shortcode so verwendet werden:

[website_screenshot url="https://wordpress.org" width="1200" height="800" link="no"]

Schritt 3: Die Darstellung mit CSS verbessern

Damit sich der Screenshot an unterschiedliche Bildschirmgrößen anpasst, kann zusätzlich etwas CSS verwendet werden. Der Code kann im Child-Theme oder im zentralen Stylesheet der Website hinterlegt werden.

.tm-website-screenshot-link {
    display: block;
    text-decoration: none;
}

.tm-website-screenshot {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #f8fafc;
    object-fit: cover;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tm-website-screenshot-link:hover .tm-website-screenshot {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
}

Durch width: 100% und height: auto bleibt das Vorschaubild auch auf Smartphones und Tablets innerhalb des verfügbaren Inhaltsbereichs.

Was beim Aufruf des Screenshots technisch passiert

Der Shortcode erstellt die Aufnahme nicht direkt auf dem eigenen WordPress-Server. Stattdessen wird eine Bildadresse zum Screenshot-Dienst von WordPress.com erzeugt.

1. Ein Besucher öffnet die Seite mit dem eingebundenen Screenshot.
2. Der Browser fordert das Bild bei WordPress.com an.
3. mShots ruft die angegebene öffentliche Website auf.
4. Der Dienst erzeugt daraus ein Vorschaubild.
5. Das Bild wird für eine bestimmte Zeit zwischengespeichert und ausgeliefert.

Wird der Screenshot automatisch aktualisiert?

Die Aufnahme wird vom Screenshot-Dienst zwischengespeichert. Ändert sich die dargestellte Website, erscheint deshalb nicht zwingend sofort eine neue Version.

Wie lange ein Screenshot gespeichert bleibt, lässt sich bei der kostenlosen Lösung nicht zuverlässig steuern. Es gibt auch keinen Parameter, mit dem jederzeit eine vollständig neue Aufnahme erzwungen werden kann.

Der Begriff „automatisch“ bedeutet hier deshalb vor allem, dass der Screenshot nicht manuell erstellt und hochgeladen werden muss. Er bedeutet nicht, dass bei jedem Seitenaufruf garantiert eine sekundengenaue Neuaufnahme entsteht.

Die wichtigsten Grenzen der kostenlosen Lösung

Für einfache Website-Vorschauen ist mShots praktisch. Vor der Verwendung sollten jedoch einige Einschränkungen berücksichtigt werden.

Datenschutz und externe Verbindungen beachten

Bei der hier gezeigten einfachen Variante wird das Screenshot-Bild direkt von s.wordpress.com geladen. Beim Öffnen der eigenen Seite stellt der Browser des Besuchers deshalb eine Verbindung zu einem externen Server von WordPress.com her.

Dabei können technisch notwendige Verbindungsdaten wie die IP-Adresse, Browserinformationen und möglicherweise die aufrufende Seite übertragen werden. Die Einbindung ist damit nicht vollständig lokal und sollte bei der Datenschutzprüfung der Website berücksichtigt werden.

Auch die Adresse der Website, von der eine Aufnahme erstellt werden soll, wird an den jeweiligen Screenshot-Dienst übertragen. Bei öffentlichen Internetseiten ist die Adresse zwar bereits öffentlich erreichbar, die Nutzung eines externen Dienstes sollte trotzdem transparent bewertet werden.

Wann eine professionelle Screenshot-API sinnvoller ist

Für ein einfaches Portfolio oder eine kleine Linkübersicht kann mShots ausreichen. Sobald Screenshots jedoch zuverlässig erzeugt, lokal gespeichert oder in automatisierte Berichte eingebaut werden sollen, ist eine professionelle Lösung meist geeigneter.

Spezialisierte Screenshot-APIs bieten je nach Anbieter zusätzliche Funktionen:

Entsprechende WordPress-Plugins verbinden die Website meistens mit einer externen Screenshot-API. Dafür ist häufig ein Benutzerkonto oder API-Schlüssel erforderlich. Je nach Anbieter können außerdem laufende Kosten entstehen.

Eine weitere Möglichkeit ist ein eigener sogenannter Headless-Browser mit Playwright oder Puppeteer. Dabei wird ein Browser automatisiert auf einem Server ausgeführt. Diese Lösung bietet viel Kontrolle, benötigt aber eine geeignete Serverumgebung und ist auf klassischem Shared Hosting häufig nicht ohne Weiteres möglich.

Welche Lösung für welchen Anwendungsfall passt

Häufige Fragen zu automatischen WordPress-Screenshots

Fazit: Praktisch für Vorschauen, begrenzt für professionelle Prozesse

Automatische Website-Screenshots lassen sich auch heute noch vergleichsweise einfach in WordPress einbinden. Mit mShots und einem eigenen Shortcode entsteht ohne manuelles Fotografieren und Hochladen eine dynamische Vorschau öffentlicher Websites.

Für kleine Portfolios, Linklisten und einfache Darstellungen kann diese Lösung ausreichend sein. Die fehlende Kontrolle über Aktualität, Speicherung, Datenschutz und vollständige Seitenaufnahmen macht sie jedoch ungeeignet für wichtige Berichte, verbindliche Dokumentationen oder geschäftskritische Automatisierungen.

Entscheidend ist deshalb nicht nur, ob ein Screenshot automatisch erzeugt werden kann. Entscheidend ist auch, wie zuverlässig, aktuell und kontrollierbar das Ergebnis sein muss.