Seo

SEO fyrir viðbragðs JavaScript með því að nota React eða Vue með NodeJS og öðrum bakendastöflum

Í beinni umræðu okkar um hvernig á að Power SEO Friendly Markup með HTML5, CSS3 og Javascript earlier this year, we spent a good deal of time talking about React. I’m going to dig into the nuances for React what you need to keep in mind for SEO. We’ll be using code for analysis by Russ Jeffrey, director of strategic integrations at Duda, who participated in the discussion.

Að bregðast við, eða ekki að bregðast við?

Viðbragðsrammi getur látið vefsíðu (forrita) líða eins og það sé töfrar að springa upp undir þeim þar sem upplýsingar um mælaborðið eru í samráði við samfélag líflegra notenda, eins og upplifunin sem þú býst við af Facebook og Twitter.

Viðskiptakröfur verða hins vegar að ráða því hvaða tækni þú endar með í verkefni. Ef þú ert að skrifa app sem þarfnast Facebook tegundar af krafti, þá muntu vilja fjárfesta í að búa til viðbragðsgátt til að skila því. Samt, í raun og veru, hafa mjög fáar síður slíkar kröfur. Í flestum tilfellum ertu betur settur með jQuery, eða vanillu JavaScript ef þú kemst upp með það, af helstu frammistöðuástæðum.

Ef þú notar einn hvarfgjarnan þátt á handfylli af síðum, þá eru leiðir til að takmarka hvar og hvenær hans er þörf. Skrifaðu skilyrtan kóða miðlarans (eða jafnvel viðskiptavinarhliðar) til að hlaða honum. Ef allt sem þú vilt gera er kraftur sprettiglugga, gagnvirkum valmyndumog efni með flipa o.s.frv., þá mun miðað við kostnað og ávinning af viðbragðsbókasöfnum ekki hagræða þeim á móti öðrum aðferðum.

Útgáfuaðferðir fyrir SEO

Þú þarft örugglega að hugsa öðruvísi um hvernig og hvenær vefforritið þitt gefur mikilvægt efni fyrir SEO. Það er lærdómurinn sem Russ færði okkur í seinni hluta umræðunnar. Hann sýnir dæmi um hvernig á að smíða miðlarahlið og senda bjartsýni appskel samhliða JavaScript svo skriðlarar geti fengið það sem er nauðsynlegt fyrir SEO og afgangurinn er sýndur við viðskiptavini með því að nota „vökvun“.

Sjáðu umræðuna í heild sinni hér.

ramma

Forritun í þessu samhengi felur venjulega í sér meira en framenda bókasafnið eitt og sér. Samþykkt um útlitshönnun stillingarskráa með tólaforskriftum getur myndað það sem vísað er til sem ramma fyrir React eða Vue. Next og Nuxt eru NodeJS byggðir React og Vue rammar í sömu röð.

Rammar einfalda verkefnaskrár vinnupalla og þjónustu samkvæmt hefðbundnum forskriftum og bestu starfsvenjum. Russ útvegaði okkur tengla á GitHub verkefni sem sýndu hvernig á að samþætta React og Vue við nokkur önnur vinsæl bakenda forritunarmál. Skoðaðu þá ef þú vilt annað keyrsluferli á bakendanum en NodeJS.

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

SEO kóðabútar með NodeJS

Þegar þú nærð kröfum um fyrirtæki eða upphafsstig getur verið að þjónustustigssamningur með ramma sé ekki mögulegur. Russ leiðir okkur í gegnum að byrja með SEO kóðabútum byggðum á NodeJS (með Express) einum saman.

Þrjár lykilskrár í bæði sýnishorn React og Vue verkefna innihalda nauðsynlegan kóða fyrir greiningu okkar:

  • The app.js skrá stjórnar „blogg“ app skel.
  • The server.js skrá dregur í Express bókasafnið, stillir það fyrir meðhöndlun beiðna, þar með talið flutningsaðferðir fyrir SSR.
  • index.js skráin, þjónar sem inngangspunktur fyrir NodeJS keyrslutímaferlið.

SEO-vingjarnlegur React

The App.js dæmi um React sýnir beina SEO vingjarnlegum leiðum að vefslóðum sem treysta ekki á brot fyrir SPA-stíl sýndarsíðu skoðanir. Í server.js 'samhengi' gagnahlutur felur í sér upplýsingar um tilföng til að hringja ReactDOMServer.renderToString() til að birta app skelina okkar með samhengi byggt á vefslóð og hugsanlega öðrum forsendum.

The server.js skrá hefur gagnasamhengishlutinn fyrir frekari betrumbætur. Russ sýnir að skipta um titil og önnur metagögn til að klára SEO fyrir smíðuð app skel áður en hann loksins sendir hana á leið í vafrann.

Loksins, index.js þjónar sem upphafspunktur NodeJS ferlisins og ReactDOM.hydrate() er notað til að útfæra appið okkar með minna mikilvægu aukaefni eftir að skelin er hlaðin.

'Build' skrá inniheldur index.html sem markskrá fyrir SSR sniðmátsgerð. Tvær aðrar skrár, íhlutirnir Heim og Posts, eru geymdar með því að nota a JavaScript útlit framlengingu, sem felst í samþykktum og þarf því ekki að vera skýrt útskýrt í innflutningsyfirlitum. Við ætlum að sleppa skynsamlega greiningu á íhlutaskrám, nema að segja að það er dæmigert að finna íhlutaskrár endurskipulagðar í hlutis undirskrá.

Í dæmum Russ eru allar skrár, þar á meðal íhlutaskrár, staðsettar í grunnskrá verkefnisins. Svona lítur möpputréð fyrir React skrárnar út:
├── App.js
├── Home.js
├── Posts.js
├── smíða
│ └── index.html
├── index.js
└── server.js

Ef þú þekkir ekki JSX setningafræði, þá er það JavaScript tungumálaviðbót sem ætlað er fyrir React íhlutakóðun með XML svo að sniðmátsskrár geti innihaldið JavaScript. Undirhlutar eru fluttir inn og síðar vísað til þeirra með nafnavenjum (Home.js og Posts.js kort til og í sömu röð) í XML sniðmátareitnum.

Russ nýtir sér bregðast við leið-dom bókasöfn (sem þú gætir þurft að setja upp í gegnum NPM): Router og StaticRouter, Switch og NavLink. Þessi bókasöfn bjóða upp á tilbúna aðstoðarmenn til þæginda við algeng verkefni, eins og að nota NavLink 'to' hjálparann ​​til að búa til HTML tengla á slóð slóð eða tilföng, sem er nokkuð hliðstætt 'link_to' hjálpar Rail.

Í gegnum Switch og Router inn App.js Russ sýnir setningafræðina fyrir samsvörun vefslóða. Taktu eftir „nákvæmu“ lykilorðinu fyrir vísitöluleiðsögnina. Það þarf að passa aðeins nákvæmlega við '/', annars myndi það passa við hverja slóð forritsins! Með því að nota „nákvæmt“ leitarorðið breytist sjálfgefna viðmiðin úr gráðugri samsvörun sem passar við „/posts“ og einnig „/posts/hello-world“ o.s.frv.

In server.js Russ notar sameiginlegan utanaðkomandi ramma sem kallast Express til að setja upp forritið okkar með nauðsynlegum porthlustara og viðbragðsaðferðum sem þarf til að þjóna appinu okkar á netinu. Ef þú ert að vinna á staðnum, viltu koma á staðbundinni umhverfisbreytu PORT til að passa við opið gátt sem þú ætlar að vinna með í gegnum localhost beiðnir. Í framleiðslu þarf þetta venjulega að stilla á port 80.

Vue ramma

Að lokum er Vue ramma einn af aðgengilegri viðbragðsramma og sú hugmynd finnst frá upphafi. Sniðmátsskrár eru bókstaflega HTML með JavaScript innskot í stýrisstíl. Ef þú ert að nota Vue, þá er líklegra að þú sért að vinna með þinn eigin bakenda, þó að Nuxt sé fullkominn rammi fyrir Vue ef þú ákveður að fara þá leið.

Russ bendir okkur á Vue SSR skjölin og kóðabútar hans starfa með því að nota í meginatriðum sömu skráarbyggingu og uppsetningu fyrir útfærslu á Vue útgáfu bloggforritsins okkar. Finndu kóðann fyrir bæði React og Vue sem er fáanlegur hér að neðan í eftirfarandi Gist.

tengdar greinar

0 Comments
Inline endurgjöf
Skoða allar athugasemdir
Til baka efst á hnappinn