Seo

SEO for reaktiv JavaScript ved å bruke React eller Vue med NodeJS og andre backend-stabler

Under vår direkte diskusjon om hvordan Kraft SEO-vennlig markering med HTML5, CSS3 og Javascript tidligere i år brukte vi mye tid på å snakke om React. Jeg skal grave i nyansene for React hva du trenger å huske på for SEO. Vi skal bruke kode for analyse av Russ Jeffrey, direktør for strategiske integrasjoner i Duda, som deltok i diskusjonen.

Å reagere, eller ikke å reagere?

Et react-rammeverk kan få nettsider (applikasjoner) til å føles som om det er magi som sprudler opp under dem ettersom dashborddetaljer holdes i samspill med et fellesskap av livlige brukere, på en måte som opplevelsen du forventer fra Facebook og Twitter.

Forretningskrav må imidlertid diktere hvilken teknologi du ender opp med å bruke på et prosjekt. Hvis du skriver en app som trenger en Facebook-type dynamikk, vil du investere i å lage et reaktivt rammeverk for å levere det. Men i virkeligheten er det svært få nettsteder som har slike krav. I de fleste tilfeller har du det bedre med jQuery, eller vanilla JavaScript hvis du kan komme unna med det, av grunnleggende ytelsesgrunner.

Hvis du bruker ett reaktivt element på en håndfull sider, er det måter å begrense den reaktive koden til hvor og når den er nødvendig. Skriv server-side, (eller til og med klient-side), betinget kode for å laste den. Hvis alt du vil gjøre er makt popup-modaler, interaktive menyerog innhold med faner osv., så vil kostnad vs. nyttevurdering av reaktive biblioteker ikke favorisere dem mot andre tilnærminger.

Gjengivelsesstrategier for SEO

Du må definitivt tenke annerledes om hvordan og når nettappen din gjengir viktig innhold for SEO. Det er læren Russ ga oss i andre halvdel av diskusjonen vår. Han viser eksempler på hvordan man bygger server-side og sender et optimalisert app-skall sammen med JavaScript, slik at robotsøkeprogrammer kan få det som er nødvendig for SEO og resten gjengis på klientsiden ved hjelp av "hydrering".

Se hele diskusjonen her.

rammer

Applikasjonsprogrammering i denne sammenhengen involverer vanligvis mer enn frontend-biblioteket alene. En konvensjon over konfigurasjonsfillayoutdesign med verktøyskript kan utgjøre det som omtales som et rammeverk for React eller Vue. Next og Nuxt er henholdsvis NodeJS-baserte React- og Vue-rammeverk.

Frameworks forenkler stillasprosjektfiler og tjenester i henhold til konvensjonelle spesifikasjoner og beste praksis. Russ ga oss lenker til GitHub-prosjekter som demonstrerer hvordan vi kan integrere React og Vue med flere andre populære programmeringsspråk for backend. Sjekk dem ut hvis du vil ha en annen kjøretidsprosess på backend enn NodeJS.

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

SEO-kodebiter med NodeJS

Når du når krav til bedrifts- eller oppstartsnivå, kan det hende at en tjenestenivåavtale med et rammeverk ikke er mulig. Russ leder oss gjennom å komme i gang med SEO-kodebiter basert på NodeJS (med Express) alene.

Tre nøkkelfiler i både React- og Vue-eksempler inneholder den nødvendige koden for analysen vår:

  • De app.js filen styrer et "blogg"-appskall.
  • De server.js fil trekker inn Express-biblioteket, konfigurerer det for forespørselshåndtering inkludert gjengivelsesmetoder for SSR.
  • index.js-filen fungerer som inngangspunkt for NodeJS-kjøretidsprosessen.

SEO-vennlig React

De App.js eksempel for React demonstrerer rute SEO-vennlige stier til URL-er som ikke er avhengige av fragmenter for SPA-stil virtuell side visninger. I server.js et 'kontekst'-dataobjekt innebærer ressursdetaljer for anrop ReactDOMServer.renderToString() å gjengi app-skallet vårt med kontekst basert på URL og potensielt andre kriterier.

De server.js filen har datakontekstobjektet for flere forbedringer. Russ demonstrerer å erstatte tittel og andre metadata for å fullføre SEO for et konstruert app-skall før han til slutt sender det på vei til nettleseren.

Til slutt, index.js fungerer som utgangspunkt for NodeJS-prosessen og ReactDOM.hydrate() brukes til å spesifisere appen vår med mindre viktig hjelpeinnhold etter at skallet er lastet inn.

En 'build'-katalog inneholder index.html som en målfil for SSR-malkonstruksjon. To andre filer, komponentene Hjem og innlegg, lagres ved hjelp av en . Js utvidelse, som er underforstått av konvensjon og derfor ikke trenger å være eksplisitt spesifisert i importerklæringene. Vi skal hensiktsmessig hoppe over analyse av komponentfiler, bortsett fra å si at det er typisk å finne komponentfiler omorganisert til en komponents underkatalog.

I Russ sine eksempler er alle filer, inkludert komponentfiler, plassert i prosjektets basiskatalog. Slik ser katalogtreet for React-filene ut:
├── App.js
├── Home.js
├── Posts.js
├── bygge
│ └── indeks.html
├── index.js
└── server.js

Hvis du ikke er kjent med JSX-syntaks, er det en JavaScript-språkutvidelse ment for React-komponentkoding med XML, slik at malfiler kan inkludere JavaScript. Underordnede komponenter importeres og refereres senere etter navnekonvensjon (Home.js og Posts.js kartlegger til og henholdsvis) i XML-malblokken.

Russ benytter seg av reagere-ruter-dom biblioteker (som du kanskje må installere via NPM): Ruter og StaticRouter, Switch og NavLink. Disse bibliotekene gir ferdige hjelpere for enkelhets skyld med vanlige oppgaver, for eksempel å bruke NavLink 'til'-hjelperen for å generere HTML-lenker til en url-bane eller -ressurs, noe som er noe analogt med Rails 'link_to'-hjelper.

Gjennom bryter og ruter inn App.js Russ demonstrerer syntaksen for matchende url-baner. Legg merke til det "eksakte" nøkkelordet for indeksbanesetningen. Det er påkrevd å matche bare nøyaktig '/', ellers ville det samsvare med alle banene til applikasjonen! Ved å bruke «eksakt» søkeord endres standardkriteriene fra grådig samsvar som samsvarer med «/posts» og også «/posts/hello-world» osv.

In server.js Russ bruker et felles eksternt rammeverk kalt Express for å sette opp applikasjonen vår med de nødvendige portlytter- og responsmetodene som trengs for å betjene appen vår på nettverket. Hvis du jobber lokalt, vil du etablere en lokal miljøvariabel PORT for å matche en åpen port som du planlegger å jobbe med via lokale vertsforespørsler. I produksjon må dette vanligvis settes til port 80.

Vue rammeverk

Til slutt, Vue-rammeverket er et av de mer tilgjengelige reaktive rammeverkene, og det konseptet merkes fra starten. Malfiler er bokstavelig talt HTML med JavaScript-interpolering i styrestil. Hvis du bruker Vue, er det mer sannsynlig at du jobber med din egen backend, selv om Nuxt er et topp moderne rammeverk for Vue hvis du bestemmer deg for å gå den veien.

Russ peker oss på Vue SSR-dokumentasjonen og kodebitene hans bruker i hovedsak samme filstruktur og layout for implementering av Vue-versjonen av bloggappen vår. Finn koden for både React og Vue tilgjengelig nedenfor i følgende sammendrag.

Relaterte artikler

0 kommentarer
Inline tilbakemeldinger
Se alle kommentarer
Tilbake til toppen-knappen