Externe Links und PDFs automatisch in neuem Tab öffnen

Dieses Snippet sorgt dafür, dass externe Links und Links zu PDF-Dateien automatisch in einem neuen Browser-Tab geöffnet werden.
Damit müssen wir target="_blank" nicht bei jedem Link manuell setzen.

Was macht das Snippet?

• Externe Links öffnen sich automatisch in einem neuen Tab.
• Links zu PDF-Dateien öffnen sich ebenfalls in einem neuen Tab.
• Interne Links bleiben im selben Tab.
• Ankerlinks wie #kontakt werden ignoriert.
• mailto:– und tel:-Links werden ignoriert.
• Bei Links, die in einem neuen Tab öffnen, ergänzt das Script automatisch rel="noopener noreferrer".

Snippet

function custom_external_links_new_tab() {
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        var links = document.querySelectorAll('a[href]');
        var siteHost = window.location.hostname;

        links.forEach(function (link) {
            var href = link.getAttribute('href');

            // Leere Links, Anker (#) oder mailto/tel überspringen
            if (!href || href.startsWith('#') || href.startsWith('mailto:') || href.startsWith('tel:')) {
                return;
            }

            var isExternal = false;
            var isPdf = href.toLowerCase().endsWith('.pdf');

            try {
                var url = new URL(href, window.location.origin);
                isExternal = (url.hostname !== siteHost);
            } catch (e) {
                // ungültige URL ignorieren
            }

            if (isExternal || isPdf) {
                link.setAttribute('target', '_blank');
                link.setAttribute('rel', 'noopener noreferrer');
            }
        });
    });
    </script>
    <?php
}
add_action('wp_footer', 'custom_external_links_new_tab');

Einbau in WordPress

Das Snippet kommt in die functions.php des Child-Themes oder in ein Snippet-Plugin.
Bei unseren Websites sollte dafür nach Möglichkeit die zentrale Snippet-Verwaltung verwendet werden, damit der Code nicht vom Theme abhängt.

So funktioniert es

Das Script läuft, sobald der Browser das HTML der Seite geladen hat. Es sucht anschließend alle Links mit einem href-Attribut.

Bei jedem Link prüft das Script zuerst, ob es sich um einen Anker-, E-Mail- oder Telefon-Link handelt. Solche Links überspringt es.
Danach vergleicht es den Hostnamen des Links mit dem Hostnamen der aktuellen Website.

Unterscheidet sich der Hostname, gilt der Link als extern. Zusätzlich prüft das Script, ob die URL auf .pdf endet.
Trifft mindestens eine der beiden Bedingungen zu, ergänzt das Script:

target="_blank"
rel="noopener noreferrer"

Beispiele

<!-- Bleibt im selben Tab -->
<a href="/leistungen/">Leistungen</a>

<!-- Öffnet sich in einem neuen Tab -->
<a href="https://www.example.com/">Externe Website</a>

<!-- Öffnet sich ebenfalls in einem neuen Tab -->
<a href="/downloads/preisliste.pdf">Preisliste herunterladen</a>

<!-- Wird nicht verändert -->
<a href="#kontakt">Zum Kontaktformular</a>

<!-- Wird nicht verändert -->
<a href="mailto:office@example.com">E-Mail schreiben</a>

<!-- Wird nicht verändert -->
<a href="tel:+43123456789">Anrufen</a>

Wichtige Hinweise

Das Script vergleicht den vollständigen Hostnamen. Eine Subdomain wie shop.example.com gilt daher auf www.example.com als externer Link und öffnet sich in einem neuen Tab.

Die PDF-Erkennung funktioniert bei URLs, die tatsächlich auf .pdf enden. Eine URL wie
datei.pdf?download=1 wird mit der aktuellen Version nicht über die PDF-Regel erkannt.
Liegt die Datei auf einer externen Domain, greift allerdings weiterhin die Regel für externe Links.

Warum rel=“noopener noreferrer“?

Bei Links mit target="_blank" setzen wir zusätzlich rel="noopener noreferrer".
noopener verhindert, dass die neu geöffnete Seite über JavaScript auf die ursprüngliche Seite zugreifen kann.
noreferrer verhindert zusätzlich, dass der Browser die ursprüngliche URL als Referrer mitsendet.

Kurzfassung

Das Snippet ist sinnvoll, wenn auf einer WordPress-Website alle externen Links und PDF-Dateien einheitlich in einem neuen Tab geöffnet werden sollen.
Redakteure müssen beim Setzen von Links nichts zusätzlich einstellen.