Seo

SEO fir reaktiv JavaScript mat React oder Vue mat NodeJS an aner Backend Stacks

Während eiser liewen Diskussioun iwwer wéi Power SEO frëndlech Markup Mat HTML5, CSS3, An Javascript virdrun dëst Joer hu mir vill Zäit verbruecht iwwer React ze schwätzen. Ech gräifen an d'Nuancen fir React wat Dir braucht fir SEO am Kapp ze halen. Mir benotze Code fir Analyse vum Russ Jeffrey, Direkter vu strategesche Integratioune bei Duda, deen un der Diskussioun deelgeholl huet.

Reagéieren, oder net reagéieren?

E React-Framework kann Websäiten (Applikatiouns-) Säite fille wéi wann et Magie ënner hinnen opbréngt, well Dashboarddetailer a Concerte mat enger Gemeinschaft vu liewegen Benotzer gehale ginn, ähnlech wéi d'Erfahrung, déi Dir vu Facebook an Twitter erwaart.

Business Ufuerderunge musse diktéieren wéi eng Technologie Dir um Enn benotzt op engem Projet, awer. Wann Dir eng App schreift déi e Facebook Typ vun Dynamik brauch, da wëllt Dir investéiere fir e reaktive Kader ze kreéieren fir et ze liwweren. Awer, a Wierklechkeet, ganz wéineg Siten hunn dës Zort Ufuerderungen. Am meeschte Fäll sidd Dir besser mat jQuery, oder Vanille JavaScript, wann Dir mat et ewech kënnt, aus Basisleistungsgrënn.

Wann Dir een reaktivt Element op enger Handvoll Säiten benotzt, da ginn et Weeër fir Äre reaktive Code ze limitéieren wou a wann et néideg ass. Schreift Server-Säit, (oder souguer Client-Säit), bedingungscode fir et ze lueden. Wann alles wat Dir maache wëllt ass Kraaft Popup Modal, interaktiv Menue, an tabbed Inhalt etc., da wäert d'Käschte vs Benefice Iwwerleeung vu reaktive Bibliothéike se net géint aner Approche favoriséieren.

Rendering Strategien fir SEO

Dir musst definitiv anescht denken iwwer wéi a wéini Är Web App wichtegen Inhalt fir SEO mécht. Dat ass d'Léier de Russ eis an der zweeter Halschent vun eiser Diskussioun bruecht huet. Hie weist Beispiller fir d'Serversäit ze bauen an eng optimiséiert App Shell niewent JavaScript ze verschécken, sou datt Crawler kënne kréien wat néideg ass fir SEO an de Rescht gëtt Client-Säit mat 'Hydratatioun' gemaach.

Kuckt déi komplett Diskussioun hei.

Kaderen

Uwendungsprogramméierung an dësem Kontext beinhalt typesch méi wéi d'Frontendbibliothéik eleng. Eng Konventioun iwwer Konfiguratiounsdatei Layout Design mat Utility Scripten kann ausmaachen wat als Kader fir React oder Vue bezeechent gëtt. Next an Nuxt sinn NodeJS-baséiert React a Vue Kaderen respektiv.

Frameworks vereinfachen Steierprojetdateien a Servicer no konventionelle Spezifikatioune a beschten Praktiken. De Russ huet eis Linken op GitHub Projeten zur Verfügung gestallt, déi weisen wéi een React a Vue mat verschiddenen anere populäre Backend Programméierungssproochen integréiert. Préift se wann Dir en anere Runtime-Prozess am Backend wëllt wéi NodeJS.

  • Python React / Python Vue
  • PHP React / PHP Vue
  • Ruby React / Ruby Vue
  • Java React / Java Vue

SEO Code Snippets mat NodeJS

Wann Dir Entreprisen oder Startup Niveau Ufuerderunge erreecht, kann e Service Level Accord mat engem Kader net méiglech sinn. De Russ féiert eis duerch fir mat SEO Code Snippets unzefänken baséiert op NodeJS (mat Express) eleng.

Dräi Schlësseldateien a béid Probe React a Vue Projeten enthalen den néidege Code fir eis Analyse:

  • d' app.js Datei regéiert eng "Blog" App Shell.
  • d' server.js Fichier zitt an der Express Bibliothéik, konfiguréiert et fir Ufro Ëmgank dorënner Render- Methoden fir SSR.
  • D'index.js Datei, déngt als Entrée fir den NodeJS Runtime Prozess.

SEO-frëndlech Reaktioun

d' App.js Beispill fir React weist routing SEO frëndlech Weeër op URLen déi net op Fragmenter fir SPA-Stil vertrauen virtuell Säit Meenung. An server.js e 'Kontext' Dateobjekt implizéiert Ressourcedetailer fir ze ruffen ReactDOMServer.renderToString() fir eis App Shell mat Kontext ze maachen baséiert op URL a potenziell aner Critèren.

d' server.js Datei huet den Datekontextobjekt fir méi Verfeinerungen. De Russ demonstréiert den Titel an aner Meta-Daten z'ersetzen fir de SEO fir eng konstruéiert App-Shell ze kompletéieren ier se endlech op de Wee an de Browser schéckt.

gudder Lescht, index.js déngt als Startpunkt fir den NodeJS Prozess an ReactDOM.hydrate() gëtt benotzt fir eis App mat manner wichtegen Hilfsinhalt auszeschaffen nodeems d'Schuel gelueden ass.

E 'build' Verzeechnes enthält index.html als Zildatei fir SSR Schablounkonstruktioun. Zwee aner Dateien, d'Komponenten Home an posts, gi gespäichert mat engem .js Extensioun, déi vun der Konventioun implizéiert ass an dofir net explizit an den Importerklärungen ausgeschriwwe muss ginn. Mir wäerten d'Analyse vu Komponentdateien zougänglech iwwersprangen, ausser ze soen datt et typesch ass Komponentdateien ze fannen déi nei organiséiert sinn an eng Komponents Ënnerverzeechnes.

An Russ d'Beispiller sinn all Fichieren, dorënner Komponent Fichieren, am Projet Basis directory. Dëst ass wéi de Verzeichnisbaum fir d'React Dateien ausgesäit:
‰ ─ App.js
├── Home.js
├── Posts.js
├── bauen
│ └── index.html
‰ ─ index.js
└── server.js

Wann Dir net mat JSX Syntax vertraut sidd, ass et eng JavaScript Sproochextensioun geduecht fir React Komponent Kodéierung mat XML sou datt Schabloundateien JavaScript kënnen enthalen. D'Kandkomponente ginn importéiert a gi spéider mam Nummkonventioun referenzéiert (Home.js a Posts.js Kaart op an respektiv) am XML Schablounblock.

Russ mécht Gebrauch vun reagéieren-Router-dom Bibliothéiken (déi Dir eventuell iwwer NPM installéiere musst): Router a StaticRouter, Switch, an NavLink. Dës Bibliothéike bidden readymade Helfer fir d'Bequemlechkeet mat gemeinsamen Aufgaben, wéi zum Beispill den NavLink 'zu' Helfer ze benotzen fir HTML Linken op en URL Wee oder Ressource ze generéieren, wat e bëssen analog ass mam Rail 'link_to' Helper.

Duerch Schalter a Router an App.js Russ weist d'Syntax fir passende URL Weeër. Notéiert dat 'exakt' Schlësselwuert fir den Indexwee Ausso. Et ass erfuerderlech nëmme exakt '/' ze passen oder soss géif et all Wee vun der Applikatioun passen! D'Benotzung vum 'exakt' Schlësselwuert ännert d'Default Critèrë vum giereg Match deen '/ posts' passt an och '/ posts/hallo-world' etc.

In server.js De Russ benotzt e gemeinsame externe Kader genannt Express fir eis Applikatioun mat den erfuerderlechen Hafenlauschterer an Äntwertmethoden opzestellen fir eis App am Netz ze déngen. Wann Dir lokal schafft, wëllt Dir eng lokal Ëmfeld Variabel PORT etabléieren fir en oppene Port ze passen mat deem Dir plangt iwwer localhost Ufroen ze schaffen. An der Produktioun muss dëst normalerweis op den Hafen 80 gesat ginn.

Vue Kader

Schlussendlech ass de Vue Kader ee vun de méi accessibele reaktive Kaderen an dat Konzept gëtt vun Ufank un gefillt. Schabloundateien si wuertwiertlech HTML mat JavaScript Interpolatioun vum Handlebar-Stil. Wann Dir Vue benotzt, dann ass et méi wahrscheinlech datt Dir mat Ärem eegene Backend schafft, obwuel Nuxt e modernste Kader fir Vue ass wann Dir décidéiert de Wee ze goen.

De Russ weist eis op d'Vue SSR Dokumentatioun a seng Code Snippets funktionnéieren am Wesentlechen déiselwecht Dateistruktur a Layout fir d'Ëmsetzung vun der Vue Versioun vun eiser Blog App. Fannt de Code fir béid React a Vue verfügbar hei ënnen am folgende Gist.

Verbonnen Artikelen

Hannerlooss eng Äntwert

Är E-Mail-Adress gëtt net publizéiert ginn.

Zréck erop zum Knäppchen