Wie man eine Webseite umleitet

Avatar of Robin Rendle
Robin Rendle am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Eine Umleitung erfolgt, wenn eine Webseite unter einer bestimmten URL aufgerufen wird und zu einer anderen URL wechselt. Zum Beispiel besucht eine Person „website.com/seite-a“ in ihrem Browser und wird stattdessen zu „website.com/seite-b“ *umgeleitet*. Dies ist sehr nützlich, wenn wir eine bestimmte Seite an einen neuen Ort umleiten möchten, die URL-Struktur einer Website ändern möchten, den „www.“-Teil der URL entfernen möchten oder Benutzer sogar auf eine ganz andere Website umleiten möchten (um nur einige zu nennen).

Nehmen wir an, wir haben gerade unsere Website verschoben und möchten die alte abschalten. Wir möchten jedoch nicht, dass all diese Seiten von der alten Website den gefürchteten Status **404 Not Found** liefern. Wir brauchen etwas, damit diese alten Links zur gleichen Inhalt auf unserer neuen Website umleiten.

Hier ist unser Beispiel: Wir möchten, dass old-website.com/blog/post zu new-website.com/blog/post umgeleitet wird, zusammen mit allen anderen Beiträgen, die das gleiche URL-Format verwenden. Außerdem wäre es schön, wenn unsere Umleitungen den Suchmaschinen melden würden, dass diese Änderung dauerhaft ist, damit sie entsprechend aktualisiert werden.

Wie machen wir das also? Nun, bevor wir anfangen, müssen wir ein wenig über HTTP lernen.

HTTP-Antwortcodes

Jedes Mal, wenn wir eine URL eingeben oder eine Anfrage von einem Browser senden, verwenden wir das *Hypertext Transfer Protocol* (HTTP). Obwohl dies wie ein wirklich cooler Name für einen Sci-Fi-Krimi klingt, ist es tatsächlich der Prozess, mit dem wir Assets wie CSS, HTML und Bilder von einem Server anfordern. Nachdem wir eine Anfrage gesendet haben, geben diese Assets eine Antwort wie „Hey, ich bin da, los geht’s!“ (Antwortcode HTTP 200 OK). Es gibt viele verschiedene Arten von HTTP-Antwortcodes, vielleicht sind die bekanntesten **404 Not Found**; Webseiten können mit einem 404-Status antworten, aber das kann auch jedes andere Asset, das wir anfordern, egal ob es ein Bild oder irgendeine andere Art von Asset ist.

Jede HTTP-Antwort wird unter einer bestimmten dreistelligen Zahl kategorisiert, sodass **404 Not Found** ein 4XX-Statuscode ist, der verdeutlicht, dass es sich um einen Client-Fehler handelt, und 200 gehört zur 2XX-Kategorie, um anzuzeigen, dass es sich um eine Erfolgsmeldung irgendeiner Art handelt. Wir sind an der 3XX-Kategorie von HTTP-Antworten interessiert, wie **301 Moved Permanently** oder **302 Found**, da dies die Statuscodes sind, die speziell für Umleitungen reserviert sind. Je nachdem, welche Methode wir wählen, müssen wir diese Codes nicht unbedingt kennen, aber für andere sind sie unerlässlich.

In unserem Fall verwenden wir eine 301-Umleitung, da einige Webbrowser oder Proxyserver diesen Typ zwischenspeichern können, wodurch die alte Seite unzugänglich wird, was in diesem Fall genau das ist, was wir wollen.

Wie leiten wir also tatsächlich eine Webseite um?

HTML-Umleitungen

Vielleicht ist der einfachste Weg, zu einer anderen URL umzuleiten, das Meta-Refresh-Tag. Wir können dieses Meta-Tag im <head> am Anfang jeder HTML-Seite platzieren, so:

<meta http-equiv="refresh" content="0; URL='http://new-website.com'" />

Das Attribut content gibt die Verzögerung an, bevor der Browser zur neuen Seite umleitet, also haben wir es hier auf 0 Sekunden eingestellt. Beachten Sie, dass wir keinen HTTP-Statuscode festlegen müssen, aber es ist wichtig, die seltsame Öffnungs- und Schließung der Anführungszeichen oben noch einmal zu überprüfen (es gibt Anführungszeichen innerhalb von Anführungszeichen, daher müssen sie unterschiedliche Typen haben und übereinstimmen).

Obwohl diese Methode der einfachste Weg ist, zu einer Webseite umzuleiten, gibt es einige Nachteile. Laut dem W3C gibt es einige Browser, die mit dem Meta-Refresh-Tag Probleme haben. Benutzer sehen möglicherweise einen kurzen Aufblitz, während Seite A geladen wird, bevor sie zu Seite B umgeleitet werden. Es deaktiviert auch die Zurück-Schaltfläche in älteren Browsern. Es ist keine ideale Lösung und es wird *generell von der Verwendung abgeraten*.

Eine sicherere Option könnte darin bestehen, die Website mit JavaScript umzuleiten.

JavaScript-Umleitungen

Die Umleitung zu einer anderen URL mit JavaScript ist ziemlich einfach, wir müssen einfach die Eigenschaft location des window-Objekts ändern

window.location = "http://new-website.com";

JavaScript ist allerdings seltsam, es gibt VIELE Möglichkeiten, dies zu tun.

window.location = "http://new-website.com";
window.location.href = "http://new-website.com";
window.location.assign("http://new-website.com");
window.location.replace("http://new-website.com");

Ganz zu schweigen davon, dass man einfach location verwenden könnte, da das window-Objekt impliziert ist. Oder self oder top.

Mit dem location-Objekt können wir auch viele andere nette Dinge tun, wie die Seite neu zu laden oder den Pfad und den Ursprung der URL zu ändern.

Es gibt hier ein paar Probleme

  1. JavaScript muss aktiviert und heruntergeladen/ausgeführt werden, damit dies überhaupt funktioniert.
  2. Es ist nicht klar, wie Suchmaschinen darauf reagieren.
  3. Es gibt keine Statuscodes, sodass Sie sich auf Informationen über die Umleitung nicht verlassen können.

Was wir brauchen, ist eine serverseitige Lösung, die uns hilft, indem sie 301-Antworten an Suchmaschinen und Browser sendet.

Apache-Umleitungen

Die vielleicht gebräuchlichste Methode, eine Webseite umzuleiten, ist das Hinzufügen spezifischer Regeln zu einer `.htaccess`-Datei auf einem Apache-Webserver. Dann können wir den Server alles regeln lassen.

` .htaccess` ist ein Dokument, das uns die Möglichkeit gibt, Apache, der Software, die auf dem Server läuft, Befehle zu geben. Um Benutzer auf unsere neue Website umzuleiten, erstellen wir eine neue .htaccess-Datei (oder bearbeiten die vorhandene) und fügen sie in das Stammverzeichnis der alten Website ein. Hier ist die Regel, die wir hinzufügen werden:

Redirect 301 / http://www.new-website.com

Jede Seite, die der Benutzer auf der alten Website besucht, wird nun auf die neue umgeleitet. Wie Sie sehen können, haben wir den HTTP-Antwortcode ganz am Anfang der Umleitungsregel platziert.

Es ist erwähnenswert, dass diese Art von Umleitung nur auf Linux-Servern mit aktiviertem mod_rewrite funktioniert, einem Apache-Modul, das es uns ermöglicht, angeforderte URLs auf dem Server umzuleiten, indem ein bestimmtes Muster geprüft wird und bei Übereinstimmung die Anfrage in irgendeiner Weise modifiziert wird. Die meisten Hosting-Unternehmen haben dies standardmäßig aktiviert, aber wenn es ein Problem gibt, ist es am besten, sie zu kontaktieren. Wenn Sie weitere Informationen zu mod_rewrite suchen, gibt es ein tolles Tutorial auf tuts+. Hier auf CSS-Tricks gibt es auch viele .htaccess-Snippets.

Zurück zu unserem Beispiel: Wenn wir den obigen Code verwenden, würde ein Benutzer zu „old-website.com/blog/post“ gehen und zu „new-website.com“ gesendet werden, was nicht sehr benutzerfreundlich ist, da er die angeforderte Seite nicht sieht. Stattdessen fügen wir die folgende Regel zu unserer `.htaccess`-Datei hinzu, um all diese Blog-Posts an den richtigen Ort umzuleiten:

RedirectMatch 301 /blog(.*) http://www.new-website.com$1

Oder vielleicht möchten wir einzelne Seiten sehr spezifisch umleiten. Wir können die Regeln wie folgt hinzufügen:

Redirect 301 /page.html http://www.old-website/new-page.html

Und bei Fehlern können wir Benutzer zu unserer 404-Seite umleiten (wahrscheinlich voller Wortspiele und Gifs)

<IfModule mod_rewrite.c>
  RewriteEngine on
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule .* 404.html [L]
</IfModule>

Zuerst prüfen wir, ob das mod_rewrite-Modul verfügbar ist, dann können wir es aktivieren und, wenn die Datei oder das Verzeichnis nicht gefunden wird, leiten wir den Benutzer zu unserer 404-Seite weiter. Es ist irgendwie nett, dass der Inhalt der Seite, die sie sehen, von der Datei 404.html stammt, während die angeforderte URL gleich bleibt.

Wenn Sie sich nicht wohl dabei fühlen, mit `.htaccess`-Dateien zu hantieren, und Sie WordPress installiert haben, gibt es eine nette Erweiterung, die diese Dinge für uns erledigen kann.

Nginx-Umleitungen

Wenn Ihr Server Nginx als Webserver verwendet, können Sie in der Datei `nginx.conf` einen Server-Block hinzufügen, um diese Umleitungsanfragen zu bearbeiten:

server {
  listen 80;
  server_name old-website.com;
  return 301 $scheme://new-website.com$request_uri;
}

Auch hier verwenden wir die 301-HTTP-Antwort, und mit der Variablen scheme fordern wir http:// oder https:// an, je nachdem, was der ursprüngliche Website verwendet hat. Es wäre ratsam, sich die HTML5 Boilerplate nginx.conf genauer anzusehen, um Best Practices für andere Nginx-bezogene Dinge zu erfahren.

Lighttpd-Umleitungen

Für Server, die einen Lighttpd-Webserver ausführen, nimmt man eine Umleitung vor, indem man zuerst das mod_redirect-Modul importiert und url.redirect verwendet:

server.modules  = (
  "mod_redirect"
)

$HTTP["host"] =~ "^(www\.)?old-website.com$" {
  url.redirect = (
    "^/(.*)$" => "http://www.new-website.com/$1",
  )
}

PHP-Umleitungen

Mit PHP können wir die header-Funktion verwenden, die ziemlich geradlinig ist:

<?php 
  header('Location: http://www.new-website.com');
  exit;
?>

Dies muss vor jeglicher Markierung oder Inhalt anderer Art gesetzt werden, allerdings gibt es einen kleinen Haken. Standardmäßig sendet die Funktion eine 302-Umleitungsantwort, die allen mitteilt, dass der Inhalt nur vorübergehend verschoben wurde. Angesichts unseres spezifischen Anwendungsfalls müssen wir die Dateien dauerhaft auf unsere neue Website verschieben, sodass wir stattdessen eine 301-Umleitung vornehmen müssen:

<?php
  header('Location: http://www.new-website.com/', true, 301);
  exit();
?>

Der optionale Parameter true oben ersetzt eine zuvor gesetzte Header-Information und die 301 am Ende ändert den Antwortcode auf den richtigen.

Ruby on Rails-Umleitungen

Von jedem Controller in einem Rails Projekt können wir mit redirect_to und der Option :status auf :moved_permanently gesetzt, schnell zu einer neuen Website umleiten. So überschreiben wir den Standard-302-Statuscode und ersetzen ihn durch Moved Permanently

class WelcomeController < ApplicationController
  def index
    redirect_to 'http://new-website.com', :status => :moved_permanently 
  end
end

In Rails 4 gibt es eine einfachere Möglichkeit, diese Anfragen zu bearbeiten, indem wir einen redirect in der Datei routes.rb hinzufügen, der automatisch eine 301-Antwort sendet.

get "/blog" => redirect("http://new-website.com")

Oder wenn wir jeden Artikel im Blog auf die neue Website umleiten wollen, können wir das tun, indem wir das obige durch Folgendes ersetzen:

get "/blog/:post" => redirect("http://new-website.com/blog/%{post}")

.NET-Umleitungen

Ich habe noch nie etwas mit dem .NET-Framework geschrieben, aber es sieht so aus, als ob es klare Dokumentation auf dem Microsoft Developer Network gibt.

Node.js-Umleitungen

Hier ist ein sehr schnelles lokales Setup, das erklärt, wie Umleitungen mit Node funktionieren. Zuerst binden wir das http-Modul ein und erstellen einen neuen Server, gefolgt von der .writeHead()-Methode:

var http = require("http");

http.createServer(function(req, res) {
  res.writeHead(301,{Location: 'http://new-website.com'});
  res.end();
}).listen(8888);

Wenn Sie eine neue Datei namens index.js erstellen, den obigen Code einfügen und dann node index.js in der Befehlszeile ausführen, finden Sie die lokale Version der Website, die auf new-website.com umgeleitet wird. Um jedoch alle Beiträge im /blog-Bereich umzuleiten, müssen wir die URL aus der Anfrage mit dem praktischen url-Modul von Node parsen:

var http = require("http");
var url = require("url");

http.createServer(function(req, res) {
  var pathname = url.parse(req.url).pathname;
  res.writeHead(301,{Location: 'http://new-website.com/' + pathname});
  res.end();
}).listen(8888);

Mit der Funktion .writeHead() können wir dann den Pfadnamen aus der Anfrage an das Ende des URL-Strings anhängen. Jetzt wird sie zum gleichen Pfad auf unserer neuen Website umgeleitet. Juhu für JavaScript!

Flask-Umleitungen

Mit dem Flask-Framework aufbauend auf Python können wir einfach eine Route erstellen, die mit der Funktion redirect auf Unterseiten verweist. Wiederum muss 301 eine Option sein, die am Ende übergeben wird, da der Standard auf 302 gesetzt ist:

@app.route('/notes/<page>')
def thing(page):
  return redirect("http://www.new-website.com/blog/" + page, code=301)

Wenn Sie weitere Tricks zur Umleitung einer Webseite kennen, fügen Sie unten einen Kommentar hinzu und ich werde diesen Beitrag mit den neuesten Informationen aktualisieren.