Angenommen, Sie haben eine Website, die auf einer Plattform erstellt wurde, die sich durch hervorragendes Design auszeichnet und unter verfügbar ist example.com. Aber diese Plattform ist beim Bloggen unzureichend. Sie denken sich also: „Was wäre, wenn ich eine andere Blogging-Plattform nutzen und unter verfügbar machen könnte? example.com/blog? "

Die meisten Leute würden Ihnen sagen, dass dies gegen die Funktionsweise von DNS und Websites verstößt und stattdessen eine Subdomain verwendet wird. Aber es hat Vorteile, Ihre Inhalte auf der Root-Domain zu halten, die wir mit Subdomains einfach nicht bekommen.

Es gibt eine Möglichkeit, zwei verschiedene Plattformen unter derselben URL bereitzustellen. Und ich werde Ihnen die geheime Sauce zeigen, damit wir sie am Ende dieses Artikels herstellen können blog.example.com dienen als example.com/blog.

Warum Sie das tun möchten

Da Sie hier sind, wissen Sie wahrscheinlich bereits, warum dies ein Weg ist, den Sie verfolgen sollten. Aber ich möchte sicherstellen, dass Sie aus dem Hauptgrund hier sind: SEO. Schauen Sie sich diese an 14 Fallstudien die positive Ergebnisse zeigen, wenn Leute ihre Subdomains in Unterverzeichnisse verschieben. Sie möchten, dass Ihr Blog und Ihre Domain den SEO-Wert teilen. Es auf eine Subdomain zu setzen, würde die beiden etwas trennen.

Das war mein Grund und endete damit, zwei Plattformen zusammenzuführen, bei denen die Hauptdomain auf WordPress und die Subdomain auf Drupal war. Aber dieses Tutorial ist plattformunabhängig – es funktioniert mit fast jeder Plattform.

Das heißt, der Cloudflare-Ansatz, den wir in diesem Tutorial behandeln ist nicht mit Shopify kompatibel es sei denn, Sie zahlen für den Enterprise-Plan von Cloudflare. Das liegt daran, dass Shopify auch Cloudflare verwendet und es uns nicht erlaubt, den Datenverkehr auf ihrer kostenlosen Preisstufe zu proxieren.

Schritt 0 (Vorschau)

Bevor ich einsteige, möchte ich das hohe Niveau dessen erklären, was passieren wird. Kurz gesagt, wir werden zwei Websites haben: unsere Hauptwebsite (example.com) und die Subdomain (blog.example.com). Ich verwende „Blog“ als Beispiel, aber in meinem Fall musste ich Drupal mit einer anderen Art von Inhalten einfügen. Aber ein Blog ist der typische Anwendungsfall.

Dieser Ansatz beruht auf der Verwendung von Cloudflare für DNS und einem kleinen Extra, das für die Magie sorgt. Wir werden Cloudflare das mitteilen, wenn jemand zu Besuch kommt example.com/blog, es sollte:

1. diese Anfrage abfangen (weil example.com/blog gibt es eigentlich nicht),
2. eine andere Domain anfordern (blog.example.com/blog) hinter den Kulissen und
3. Liefern Sie die Ergebnisse dieses letzten Schritts an den durchmaskierten Besucher example.com/blog.

Okay, lasst uns genauer darauf eingehen!

Schritt 1: Verwenden von Cloudflare

Auch hier verwenden wir Cloudflare für den DNS. Das Verweisen auf das DNS Ihrer Domain ist der erste Schritt zum Einstieg.

Der Grund für Cloudflare ist, dass es uns erlaubt, zu erstellen Arbeitskräfte die in der Lage sind, jedes Mal, wenn jemand bestimmte URLs besucht, ein bisschen Code auszuführen (sogenannte Routen, die wir in Schritt 3 erstellen). Dieser Code ist für das Umschalten der Websites hinter den Kulissen verantwortlich.

Cloudflare hat eine ausgezeichnete Anleitung dazu Einstieg. Das Ziel besteht darin, Ihre Domain – unabhängig davon, wo sie registriert ist – auf die Nameserver von Cloudflare zu verweisen und zu bestätigen, dass Cloudflare mit Ihrem Cloudflare-Konto verbunden ist.

Schritt 2: Erstellen Sie den Worker

Dieser Code ist für das Umschalten der Websites hinter den Kulissen verantwortlich. Geh 'rüber zu Arbeitskräfte und klicken auf Erstellen Sie einen Dienst.

Benennen Sie Ihren Dienst und wählen Sie dann „HTTP-Handler“ aus:

Klicken Sie auf Kostenlos erhalten und dann auf Installieren. Dienst erstellen und dann Quick Edit.

Fügen Sie den folgenden Code ein und Ersetzen Sie die Domänennamen in Zeile 16 durch Ihre eigenen:

// Listen for every request and respond with our function.
// Note, this will only run on the routes configured in Cloudflare.
addEventListener('fetch', function(event) {
  event.respondWith(handleRequest(event.request))
})

// Our function to handle the response.
async function handleRequest(request) {
  // Only GET requests work with this proxy.
  if (request.method !== 'GET')
  return MethodNotAllowed(request);
  // The URL that is being requested.
  const url = new URL(request.url);
  // Request "origin URL" aka the real blog instead of what was requested.
  // This switches out the absolute URL leaving the relative path unchanged.
  const originUrl = url.toString().replace('https://example.com', 'https://blog.example.com');
  // The contents of the origin page.
  const originPage = await fetch(originUrl);
  // Give the response our origin page.
  const newResponse = new Response(originPage.body, originPage); return newResponse;
}

// Hey! GET requests only
function MethodNotAllowed(request) {
  return new Response(`Method ${request.method} not allowed.`, {
    status: 405,
    headers: { 'Allow': 'GET' }
  })
}

Zuletzt klicken Sie auf Speichern und bereitstellen.

Schritt 3: Routen hinzufügen

Lassen Sie uns nun Cloudflare darüber informieren, auf welchen URLs (auch bekannt als Routen) dieser Code ausgeführt werden soll. Gehen Sie zur Website in Cloudflare und klicken Sie dann auf Arbeitskräfte.

Auf dem Hauptbildschirm von Cloudflare gibt es den Abschnitt „Arbeiter“, in dem Sie den Code bearbeiten, und dann gibt es auf jeder Website den Abschnitt „Arbeiter“, in dem Sie die Routen hinzufügen. Es sind zwei verschiedene Orte, und es ist verwirrend.

Erstmal klicken Strecke hinzufügen:

Da wir einen Blog mit vielen untergeordneten Seiten hinzufügen, verwenden wir https://example.com/blog*. Beachten Sie, dass das Sternchen als Platzhalter für den Abgleich dient. Dieser Code wird auf der Blog-Seite und jeder Seite, die mit beginnt, ausgeführt blog.

Dies kann unbeabsichtigte Folgen haben. Angenommen, Sie haben eine Seite, die mit „Blog“ beginnt, aber nicht Teil des eigentlichen Blogs ist, wie z https://example.com/blogging-services. Das würde mit dieser Regel abgeholt werden.

Wählen Sie dann den Arbeiter in der aus Service Dropdown-Liste.

Wir haben einen Großteil der Arbeit erledigt, aber es gibt noch weitere Routen, die wir hinzufügen müssen – die CSS-, JavaScript- und andere Dateipfade, von denen der Blog abhängig ist (es sei denn, alle Dateien werden unter einer anderen URL gehostet, z CDN). Eine gute Möglichkeit, diese zu finden, besteht darin, Ihre Route zu testen und die Konsole zu überprüfen.

Kopf rüber zu deinem https://example.com/blog und stellen Sie sicher, dass etwas geladen wird. Es sieht durcheinander aus, weil die Designdateien fehlen. Das ist vorerst in Ordnung, solange es keinen 404-Fehler erzeugt. Das Wichtigste ist, die DevTools Ihres Browsers zu öffnen, die Konsole zu starten und alle roten URLs zu notieren, die sie nicht finden oder laden kann (normalerweise 404 oder 403), die Teil Ihrer Domäne sind.

Sie möchten diese als Routen hinzufügen ... aber nur die übergeordneten Pfade. Also, wenn Ihre rote URL ist https://example.com/wp-content/themes/file1.css, dann mach https://example.com/wp-content* als deine Route. Sie können auch einen untergeordneten Pfad hinzufügen, wenn Sie genauer sein möchten, aber die Idee ist, eine Route zu verwenden, um die meisten Dateien abzufangen.

Sobald Sie diese Routen hinzugefügt haben, überprüfen Sie Ihre URL und prüfen Sie, ob sie wie Ihre Subdomain aussieht. Wenn dies nicht der Fall ist, überprüfen Sie die vorherigen Schritte. (Möglicherweise müssen Sie weitere Routen hinzufügen.)

Führen Sie am besten eine Qualitätsprüfung durch, indem Sie zu mehreren Seiten navigieren und nachsehen, ob etwas fehlt. Ich empfehle auch, DevTools zu öffnen und nach Ihrer Subdomäne zu suchen (blog.example.com). Wenn dies angezeigt wird, müssen Sie entweder Routen hinzufügen, um auf diese Ressourcen abzuzielen or tun Sie etwas mit Ihrer Plattform, um die Ausgabe dieser URLs zu stoppen. Zum Beispiel gab meine Plattform ein kanonisches Tag mit meiner Subdomain aus, also fand ich ein Plugin, um die kanonische URL zu meiner Root-Domain zu ändern.

Schritt 4: Die geheimste aller Saucen (noindex)

Sie sehen vielleicht, dass wir ein Problem haben. Unsere URLs sind unter zwei verschiedenen URLs verfügbar. Ja, wir können die verwenden canonical -Attribut, um Google darüber zu informieren, welche URL unsere „Haupt“-URL ist, aber überlassen wir es nicht Google, die richtige auszuwählen.

Erstens Legen Sie Ihre gesamte Subdomain fest als noindex (Die Vorgehensweise variiert je nach Plattform). Dann fügen wir im Cloudflare Worker die folgende Codezeile hinzu, die im Grunde besagt, dass sie entfernt werden soll noindex wenn über den Proxy auf die aktuelle URL zugegriffen wird.

newResponse.headers.delete("x-robots-tag");

Die vollständige Codelösung finden Sie am Ende dieses Artikels.

Schritt 5: Ändern Sie die Sitemap

Das letzte, was Sie tun müssen, ist, die Sitemap der Subdomain so zu ändern, dass die darin enthaltene Subdomain nicht verwendet wird. Die Art und Weise, dies zu tun, ist je nach Plattform unterschiedlich, aber das Ziel besteht darin, die Basis/Absolut/Domain in Ihrer Sitemap so zu ändern, dass sie gedruckt wird example.com/mypost) Anstatt von blog.exmaple.com/mypost. Einige Plugins und Module ermöglichen dies ohne benutzerdefinierten Code.

Das ist das! Die Lösung sollte funktionieren!

Einschränkungen

Diese Cloudflare-Magie ist nicht ohne Schattenseiten. Zum Beispiel akzeptiert es nur GET Anfragen, was bedeutet, dass wir nur Dinge vom Server bekommen können. Wir können nicht POST das ist, was Formulare verwenden. Wenn Sie also Ihre Besucher dazu bringen müssen, sich anzumelden oder Formulare einzureichen, gibt es noch mehr Arbeit zusätzlich zu dem, was wir bereits getan haben. Ich habe mehrere Lösungen dafür in diskutiert ein anderer Artikel.

Wie bereits erwähnt, besteht eine weitere Einschränkung darin, dass die Verwendung dieses Ansatzes bei Shopify das Abonnieren der Enterprise-Preisstufe von Cloudflare erfordert. Das liegt wiederum daran, dass Shopify auch Cloudflare verwendet und die Möglichkeit einschränkt, den Datenverkehr auf seinen anderen Plänen weiterzuleiten.

Sie könnten auch einige Probleme bekommen, wenn Sie versuchen, zwei Instanzen derselben Plattformen zusammenzuführen (z. B. verwenden sowohl Ihre Top-Level-Domain als auch Ihre Subdomain WordPress). Aber in einem solchen Fall sollten Sie in der Lage sein, eine Instanz der Plattform zu konsolidieren und zu verwenden.

Komplettlösung

Hier ist der Code in seiner ganzen Pracht:

// Listen for every request and respond with our function.
// Note, this will only run on the routes configured in Cloudflare.
addEventListener('fetch', function(event) {
  event.respondWith(handleRequest(event.request))
})
// Our function to handle the response.
async function handleRequest(request) {
  // Only GET requests work with this proxy.
  if (request.method !== 'GET') return MethodNotAllowed(request);
  // The URL that is being requested.
  const url = new URL(request.url);
  // Request "origin URL" aka the real blog instead of what was requested.
  // This switches out the absolute URL leaving the relative path unchanged.
  const originUrl = url.toString().replace('https://example.com', 'https://blog.example.com');
  // The contents of the origin page.
  const originPage = await fetch(originUrl);
  // Give the response our origin page.
  const newResponse = new Response(originPage.body, originPage);
  // Remove "noindex" from the origin domain.
  newResponse.headers.delete("x-robots-tag");
  // Remove Cloudflare cache as it's meant for WordPress.
  // If you are using Cloudflare APO and your blog isn't WordPress, (but
  // your main domain is), then stop APO from running on your origin URL.
  // newResponse.headers.set("cf-edge-cache", "no-cache"); return newResponse;
}
// Hey! GET requests only
function MethodNotAllowed(request) {
  return new Response(`Method ${request.method} not allowed.`, {
    status: 405,
    headers:
    { 'Allow': 'GET' }
  })
}

Wenn Sie unterwegs Hilfe benötigen, freue ich mich über Ihre Kontaktaufnahme über meine Website CreateToday.io oder Besuche mein YouTube für eine Videodemonstration.