Ας υποθέσουμε ότι έχετε έναν ιστότοπο κατασκευασμένο σε μια πλατφόρμα που υπερέχει στο σχεδιασμό και είναι διαθέσιμος σε example.com. Αλλά αυτή η πλατφόρμα υστερεί στο blogging. Έτσι σκέφτεστε μόνοι σας, «Τι θα γινόταν αν μπορούσα να χρησιμοποιήσω μια διαφορετική πλατφόρμα ιστολογίων και να την κάνω διαθέσιμη στο example.com/blog; "

Οι περισσότεροι θα σας έλεγαν ότι αυτό έρχεται σε αντίθεση με τον τρόπο με τον οποίο υποτίθεται ότι λειτουργούν το DNS και οι ιστότοποι και ότι αντ' αυτού χρησιμοποιούν έναν υποτομέα. Ωστόσο, υπάρχουν πλεονεκτήματα από τη διατήρηση του περιεχομένου σας στον ριζικό τομέα, τα οποία απλά δεν έχουμε με τους υποτομείς.

Υπάρχει τρόπος να προβάλλετε δύο διαφορετικές πλατφόρμες στην ίδια διεύθυνση URL. Και θα σας δείξω τη μυστική σάλτσα ώστε, μέχρι το τέλος αυτού του άρθρου, να τη φτιάξουμε blog.example.com χρησιμεύει ως example.com/blog.

Γιατί θέλετε να το κάνετε αυτό

Επειδή είστε εδώ, πιθανότατα γνωρίζετε ήδη γιατί αυτό είναι ένα μονοπάτι που πρέπει να ακολουθήσετε. Αλλά θα ήθελα να βεβαιωθώ ότι είστε εδώ για τον κύριο λόγο για να το κάνετε αυτό: SEO. Δείτε αυτά 14 περιπτωσιολογικές μελέτες που δείχνουν θετικά αποτελέσματα όταν οι χρήστες μετακινούν τους υποτομείς τους σε υποκαταλόγους. Θέλετε το ιστολόγιό σας και ο τομέας σας να μοιράζονται την αξία SEO. Η τοποθέτηση του σε έναν υποτομέα θα αποσυνδέει κάπως τα δύο.

Αυτός ήταν ο λόγος μου και ολοκλήρωσα τη συγχώνευση δύο πλατφορμών, όπου ο κύριος τομέας ήταν στο WordPress και ο υποτομέας στο Drupal. Αλλά αυτό το σεμινάριο είναι αγνωστικιστικό για την πλατφόρμα — θα λειτουργήσει σχεδόν με οποιαδήποτε πλατφόρμα.

Τούτου λεχθέντος, η προσέγγιση Cloudflare που καλύπτουμε σε αυτό το σεμινάριο δεν είναι συμβατό με το Shopify εκτός αν πληρώσετε για το πρόγραμμα της Cloudflare Enterprise. Αυτό συμβαίνει επειδή το Shopify χρησιμοποιεί επίσης το Cloudflare και δεν μας επιτρέπει να διαμεσολαβήσουμε την κυκλοφορία στο δωρεάν επίπεδο τιμολόγησης.

Βήμα 0 (Προεπισκόπηση)

Πριν πηδήξω, θέλω να εξηγήσω το υψηλό επίπεδο του τι πρόκειται να συμβεί. Εν ολίγοις, θα έχουμε δύο ιστότοπους: τον κύριο μας (example.com) και τον υποτομέα (blog.example.com). Χρησιμοποιώ το "blog" ως παράδειγμα, αλλά στην περίπτωσή μου, έπρεπε να βάλω στο Drupal με διαφορετικό τύπο περιεχομένου. Αλλά ένα blog είναι η τυπική περίπτωση χρήσης.

Αυτή η προσέγγιση βασίζεται στη χρήση του Cloudflare για DNS και λίγο επιπλέον κάτι που θα προσφέρει τη μαγεία. Θα το πούμε στο Cloudflare όταν κάποιος επισκέπτεται example.com/blog, θα έπρεπε:

1. υποκλέψει αυτό το αίτημα (γιατί example.com/blog δεν υπάρχει στην πραγματικότητα),
2. ζητήστε διαφορετικό τομέα (blog.example.com/blog) στα παρασκήνια, και
3. παραδώσει τα αποτελέσματα από αυτό το τελευταίο βήμα στον επισκέπτη που καλύπτεται example.com/blog.

Εντάξει, ας το βουτήξουμε με περισσότερες λεπτομέρειες!

Βήμα 1: Χρήση του Cloudflare

Και πάλι, χρησιμοποιούμε Cloudflare για το DNS. Η κατάδειξη του DNS του τομέα σας είναι το πρώτο βήμα για να ξεκινήσετε.

Ο λόγος για το Cloudflare είναι ότι μας επιτρέπει να δημιουργούμε Οι εργαζόμενοι που μπορούν να εκτελούν ένα κομμάτι κώδικα κάθε φορά που κάποιος επισκέπτεται συγκεκριμένες διευθύνσεις URL (που ονομάζονται Διαδρομές που θα δημιουργήσουμε στο βήμα 3). Αυτός ο κωδικός θα είναι υπεύθυνος για την εναλλαγή των ιστότοπων στα παρασκήνια.

Το Cloudflare έχει έναν εξαιρετικό οδηγό ξεκινώντας. Ο στόχος είναι να κατευθύνετε τον τομέα σας — όπου κι αν είναι καταχωρημένος — στους διακομιστές ονομάτων του Cloudflare και να επιβεβαιώσετε ότι το Cloudflare είναι συνδεδεμένο στον λογαριασμό σας στο Cloudflare.

Βήμα 2: Δημιουργήστε το Worker

Αυτός ο κωδικός θα είναι υπεύθυνος για την εναλλαγή των ιστότοπων στα παρασκήνια. Κατευθυνθείτε προς Οι εργαζόμενοι και κάντε κλικ στο κουμπί Δημιουργήστε μια Υπηρεσία.

Ονομάστε την υπηρεσία σας και, στη συνέχεια, επιλέξτε "HTTP handler":

Πατήστε Δημιουργία υπηρεσίας και στη συνέχεια Γρήγορη επεξεργασία.

Επικολλήστε τον παρακάτω κώδικα και αντικαταστήστε τα ονόματα τομέα με τα δικά σας στη γραμμή 16:

// 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' }
  })
}

Τέλος, κάντε κλικ Αποθήκευση και ανάπτυξη.

Βήμα 3: Προσθήκη Διαδρομών

Τώρα ας ενημερώσουμε το Cloudflare σε ποιες διευθύνσεις URL (γνωστές και ως Routes) θα εκτελείται αυτός ο κώδικας. Μεταβείτε στον ιστότοπο στο Cloudflare και, στη συνέχεια, κάντε κλικ Οι εργαζόμενοι.

Υπάρχει η ενότητα Workers στην κύρια οθόνη του Cloudflare, όπου επεξεργάζεστε τον κώδικα και, στη συνέχεια, υπάρχει η ενότητα Workers σε κάθε ιστότοπο όπου προσθέτετε τις διαδρομές. Είναι δύο διαφορετικά μέρη, και είναι μπερδεμένο.

Πρώτα, κάντε κλικ Προσθήκη διαδρομής:

Επειδή προσθέτουμε ένα ιστολόγιο που έχει πολλές θυγατρικές σελίδες, θα το χρησιμοποιήσουμε https://example.com/blog*. Σημειώστε ότι ο αστερίσκος λειτουργεί ως μπαλαντέρ για ταίριασμα. Αυτός ο κώδικας θα εκτελείται στη σελίδα του ιστολογίου και σε κάθε σελίδα που ξεκινά με blog.

Αυτό μπορεί να έχει ανεπιθύμητες συνέπειες. Ας πούμε, για παράδειγμα, ότι έχετε μια σελίδα που ξεκινά με "blog" αλλά δεν αποτελεί μέρος του πραγματικού ιστολογίου, όπως https://example.com/blogging-services. Αυτό θα γινόταν αντιληπτό με αυτόν τον κανόνα.

Στη συνέχεια, επιλέξτε το Worker στο Υπηρεσία αναπτυσσόμενο.

Έχουμε κάνει πολλή δουλειά, αλλά υπάρχουν περισσότερες διαδρομές που πρέπει να προσθέσουμε — το CSS, το JavaScript και άλλες διαδρομές αρχείων από τις οποίες εξαρτάται το ιστολόγιο (εκτός εάν όλα τα αρχεία φιλοξενούνται σε διαφορετική διεύθυνση URL, όπως σε CDN). Ένας καλός τρόπος για να τα βρείτε είναι να δοκιμάσετε τη διαδρομή σας και να ελέγξετε την κονσόλα.

Επικεφαλής στο σας https://example.com/blog και βεβαιωθείτε ότι κάτι φορτώνει. Θα φαίνεται μπερδεμένο επειδή λείπουν τα αρχεία θεμάτων. Αυτό είναι εντάξει προς το παρόν, αρκεί να μην παράγει σφάλμα 404. Το σημαντικό είναι να ανοίξετε τα DevTools του προγράμματος περιήγησής σας, να ενεργοποιήσετε την κονσόλα και να σημειώσετε όλες τις κόκκινες διευθύνσεις URL που δεν μπορεί να βρει ή να φορτώσει (συνήθως 404 ή 403) που αποτελούν μέρος του τομέα σας.

Θα θελήσετε να τα προσθέσετε ως διαδρομές… αλλά κάντε μόνο τις γονικές διαδρομές. Έτσι, εάν το κόκκινο URL σας είναι https://example.com/wp-content/themes/file1.css, τότε κάνε https://example.com/wp-content* ως διαδρομή σας. Μπορείτε να προσθέσετε και μια θυγατρική διαδρομή, αν θέλετε να γίνετε πιο συγκεκριμένοι, αλλά η ιδέα είναι να χρησιμοποιήσετε μία διαδρομή για να πιάσετε τα περισσότερα από τα αρχεία.

Μόλις προσθέσετε αυτές τις διαδρομές, ελέγξτε τη διεύθυνση URL και δείτε αν μοιάζει με τον υποτομέα σας. Εάν δεν το κάνει, ελέγξτε τα προηγούμενα βήματα. (Το πιθανότερο είναι ότι θα χρειαστεί να προσθέσετε περισσότερες διαδρομές.)

Είναι καλύτερο να κάνετε έναν ποιοτικό έλεγχο πλοηγώντας σε πολλές σελίδες και βλέποντας εάν λείπει κάτι. Συνιστώ επίσης να ανοίξετε το DevTools και να αναζητήσετε τον υποτομέα σας (blog.example.com). Εάν αυτό εμφανίζεται, θα πρέπει είτε να προσθέσετε διαδρομές για να στοχεύσετε αυτούς τους πόρους or κάντε κάτι με την πλατφόρμα σας για να σταματήσετε την έξοδο αυτών των URL. Για παράδειγμα, η πλατφόρμα μου έβγαζε μια κανονική ετικέτα με τον υποτομέα μου, έτσι βρήκα μια προσθήκη για να τροποποιήσω την κανονική διεύθυνση URL ώστε να είναι ο ριζικός τομέας μου.

Βήμα 4: Οι πιο μυστικές σάλτσες (noindex)

Ίσως δείτε ότι έχουμε πρόβλημα. Οι διευθύνσεις URL μας είναι διαθέσιμες σε δύο διαφορετικές διευθύνσεις URL. Ναι, μπορούμε να χρησιμοποιήσουμε το canonical χαρακτηριστικό για να ενημερώσουμε την Google ποια διεύθυνση URL είναι η «κύρια» μας, αλλά ας μην αφήσουμε στην Google να επιλέξει τη σωστή.

Πρώτον, ορίστε ολόκληρο τον υποτομέα σας ως noindex (ο τρόπος για να γίνει αυτό θα διαφέρει ανά πλατφόρμα). Στη συνέχεια, στο Cloudflare Worker, θα προσθέσουμε την ακόλουθη γραμμή κώδικα, η οποία βασικά λέει να αφαιρέσετε noindex όταν γίνεται πρόσβαση στην τρέχουσα διεύθυνση URL μέσω του διακομιστή μεσολάβησης.

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

Η πλήρης λύση κώδικα παρέχεται στο τέλος αυτού του άρθρου.

Βήμα 5: Τροποποιήστε τον χάρτη ιστότοπου

Το τελευταίο πράγμα που πρέπει να κάνετε είναι να τροποποιήσετε τον χάρτη ιστότοπου του υποτομέα, ώστε να μην χρησιμοποιεί τον υποτομέα σε αυτόν. Ο τρόπος για να το κάνετε αυτό θα διαφέρει ανάλογα με την πλατφόρμα, αλλά ο στόχος είναι να τροποποιήσετε τη βάση/απόλυτο/τομέα στο χάρτη ιστοτόπου σας ώστε να εκτυπώνεται example.com/mypost) αντί blog.exmaple.com/mypost. Ορισμένα πρόσθετα και λειτουργικές μονάδες θα το επιτρέπουν χωρίς προσαρμοσμένο κώδικα.

Αυτό είναι αυτό! Η λύση πρέπει να λειτουργεί!

Περιορισμοί

Αυτή η μαγεία του Cloudflare δεν είναι χωρίς τα μειονεκτήματά της. Για παράδειγμα, δέχεται μόνο GET αιτήματα, που σημαίνει ότι μπορούμε να λάβουμε πράγματα μόνο από τον διακομιστή. Δεν μπορούμε POST που είναι αυτό που χρησιμοποιούν οι μορφές. Έτσι, εάν πρέπει να βάλετε τους επισκέπτες σας να συνδεθούν ή να υποβάλουν φόρμες, θα υπάρχει περισσότερη δουλειά πέρα ​​από αυτό που έχουμε ήδη κάνει. Συζήτησα διάφορες λύσεις για αυτό στο ένα άλλο άρθρο.

Όπως σημειώθηκε νωρίτερα, ένας άλλος περιορισμός είναι ότι η χρήση αυτής της προσέγγισης στο Shopify απαιτεί την εγγραφή στο επίπεδο τιμολόγησης Enterprise του Cloudflare. Και πάλι, αυτό συμβαίνει επειδή το Shopify χρησιμοποιεί επίσης το Cloudflare και περιορίζει τη δυνατότητα διακίνησης μεσολάβησης στα άλλα σχέδιά του.

Μπορεί επίσης να αντιμετωπίσετε κάποια προβλήματα εάν προσπαθείτε να συγχωνεύσετε δύο παρουσίες των ίδιων πλατφορμών μαζί (π.χ. τόσο ο τομέας ανώτατου επιπέδου όσο και ο υποτομέας χρησιμοποιούν WordPress). Αλλά σε μια τέτοια περίπτωση, θα πρέπει να μπορείτε να ενοποιήσετε και να χρησιμοποιήσετε ένα παράδειγμα της πλατφόρμας.

Πλήρης λύση

Εδώ είναι ο κώδικας σε όλο του το μεγαλείο:

// 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' }
  })
}

Εάν χρειάζεστε βοήθεια στην πορεία, σας καλωσορίζω να επικοινωνήσετε μαζί μου μέσω του ιστότοπού μου CreateToday.io ή check out το YouTube μου για επίδειξη βίντεο.