Seo

NodeJS және басқа серверлік стектермен React немесе Vue көмегімен реактивті JavaScript үшін SEO

Тікелей эфирдегі пікірталас барысында HTML5, CSS3 және Javascript көмегімен күшті SEO қолайлы белгілеу осы жылдың басында біз React туралы сөйлесуге көп уақыт жұмсадық. Мен React үшін нюанстарды зерттеймін, SEO үшін нені есте ұстау керек. Талқылауға қатысқан Дуданың стратегиялық интеграциялар жөніндегі директоры Русс Джеффридің талдау үшін кодын қолданамыз.

Әрекет ету керек пе, жоқ па?

Реактивті жүйе веб-сайт (қолданба) беттерін олардың астында сиқырлы жанып тұрғандай сезінуі мүмкін, өйткені бақылау тақтасының мәліметтері Facebook пен Twitter-тен күткен тәжірибе сияқты белсенді пайдаланушылар қауымдастығымен бірге сақталады.

Дегенмен, бизнес талаптары жобада қандай технологияны қолданатыныңызды анықтауы керек. Егер сіз Facebook динамикалық түрін қажет ететін қолданбаны жазып жатсаңыз, оны жеткізу үшін реактивті негізді жасауға инвестиция салғыңыз келеді. Дегенмен, шын мәнінде, мұндай талаптар өте аз сайттарда бар. Көптеген жағдайларда сіз jQuery немесе ванильді JavaScript-ті пайдаланудың негізгі себептеріне байланысты құтыла алсаңыз, жақсырақ.

Егер сіз бірнеше беттерде бір реактивті элементті пайдалансаңыз, реактивті кодты қай жерде және қашан қажет болатынымен шектеудің жолдары бар. Оны жүктеу үшін серверлік (немесе тіпті клиенттік) шартты кодты жазыңыз. Егер сіз тек күшпен айналысқыңыз келсе қалқымалы модальдар, интерактивті мәзірлер, және қойындысы бар мазмұн т.б., онда реактивті кітапханалардың құны мен пайдасын қарастыру оларды басқа тәсілдерге қарсы көтермейді.

SEO үшін рендеринг стратегиялары

Сіздің веб-қолданбаңыз SEO үшін маңызды мазмұнды қалай және қашан көрсететіні туралы басқаша ойлауыңыз керек болады. Бұл біздің талқылауымыздың екінші жартысында Русс бізге әкелген білім. Ол сервер жағын құру және оңтайландырылған қолданба қабықшасын JavaScript-пен бірге жіберу мысалдарын көрсетеді, осылайша тексеріп шығушылар SEO үшін қажет нәрсені ала алады, ал қалғаны «ылғалдандыру» арқылы клиент тарапынан көрсетіледі.

Толық талқылауды мына жерден қараңыз.

негіздер

Бұл контексттегі қолданбалы бағдарламалау әдетте тек фронтондық кітапханадан көп нәрсені қамтиды. Утилита сценарийлері бар конфигурация файлының орналасу дизайнына қатысты конвенция React немесе Vue үшін негіз деп аталатын нәрсені құра алады. Next және Nuxt сәйкесінше NodeJS негізіндегі React және Vue фреймворктері.

Фреймворктар кәдімгі спецификацияларға және ең жақсы тәжірибелерге сәйкес тірек жобасының файлдары мен қызметтерін жеңілдетеді. Russ бізге GitHub жобаларына сілтемелер берді, онда React және Vue-ті бірнеше басқа танымал серверлік бағдарламалау тілдерімен біріктіру жолы көрсетіледі. Егер серверде NodeJS-тен басқа орындалу процесі қажет болса, оларды тексеріңіз.

  • Python реакциясы / Python Vue
  • PHP реакциясы / PHP Vue
  • Ruby React / Ruby Vue
  • Java реакциясы / Java Vue

NodeJS көмегімен SEO код үзінділері

Кәсіпорын немесе іске қосу деңгейінің талаптарына жеткенде, құрылыммен қызмет көрсету деңгейі келісімі мүмкін болмауы мүмкін. Russ тек NodeJS (Express көмегімен) негізіндегі SEO код үзінділерімен жұмысты бастау жолын көрсетеді.

Үлгі React және Vue жобаларындағы үш негізгі файл біздің талдауымыз үшін қажетті кодты қамтиды:

  • The app.js файл «блог» қолданбасының қабығын басқарады.
  • The server.js файлды экспресс кітапханаға тартады, оны сұрауды өңдеу үшін конфигурациялайды, соның ішінде SSR үшін көрсету әдістері.
  • index.js файлы NodeJS орындалу процесі үшін кіру нүктесі ретінде қызмет етеді.

SEO-ға қолайлы реакция

The App.js React үлгісі SPA стиліндегі фрагменттерге сенбейтін URL мекенжайларына SEO қолайлы жолдарды бағыттауды көрсетеді. виртуалды бет көріністер. жылы server.js «контекст» деректер нысаны шақыру үшін ресурс мәліметтерін білдіреді ReactDOMServer.renderToString() URL және ықтимал басқа критерийлер негізінде контекстпен қолданба қабығын көрсету.

The server.js файлда қосымша нақтылаулар үшін деректер контекстік нысаны бар. Russ браузерге жібермес бұрын, құрастырылған қолданба қабығына арналған SEO аяқтау үшін тақырыпты және басқа метадеректерді ауыстыруды көрсетеді.

Ақырында, index.js NodeJS процесі үшін бастапқы нүкте ретінде қызмет етеді және ReactDOM.hydrate() қабық жүктелгеннен кейін маңыздылығы аз көмекші мазмұны бар қолданбамызды жаңарту үшін қолданылады.

«Құру» каталогында бар index.html SSR үлгісін құру үшін мақсатты файл ретінде. Басқа екі файл, құрамдас бөліктер Home және Хабарлар, a көмегімен сақталады .js ұзарту, ол конвенциямен түсіндіріледі, сондықтан импорт туралы мәлімдемелерде нақты жазылуы қажет емес. Біз құрамдас файлдарды талдауды мақсатты түрде өткізіп жібереміз, тек құрамдас файлдарды қайта топтастыруға тән деп айтудан басқа құрамдасs ішкі каталогы.

Russ мысалдарында барлық файлдар, соның ішінде құрамдас файлдар, жобаның негізгі каталогында орналасқан. React файлдарының каталогтар ағашы келесідей көрінеді:
Δη App.js
├── Home.js
├── Posts.js
├── құрастыру
│ └── index.html
Δη index.js
└─. server.js

JSX синтаксисімен таныс болмасаңыз, бұл үлгі файлдары JavaScript-ті қамтуы үшін XML арқылы React компонентін кодтауға арналған JavaScript тілінің кеңейтімі. Еншілес құрамдас бөліктер импортталады және кейінірек атау шарты бойынша сілтеме жасалады (Home.js және Posts.js картасы және тиісінше) XML үлгі блогында.

Russ пайдаланады реакция-роутер-дом кітапханалар (NPM арқылы орнату қажет болуы мүмкін): Router және StaticRouter, Switch және NavLink. Бұл кітапханалар жалпы тапсырмаларға ыңғайлы болу үшін дайын көмекшілерді қамтамасыз етеді, мысалы, url жолына немесе ресурсына HTML сілтемелерін жасау үшін NavLink «to» көмекшісін пайдалану, бұл Rail бағдарламасының «link_to» көмекшісіне біршама ұқсас.

Коммутатор және маршрутизатор арқылы App.js Russ url жолдарын сәйкестендіруге арналған синтаксисті көрсетеді. Индекс жолы мәлімдемесі үшін «дәл» кілт сөзіне назар аударыңыз. Ол тек '/' сәйкес келуі керек, әйтпесе ол қолданбаның әрбір жолына сәйкес келеді! «Дәл» кілт сөзін пайдалану әдепкі критерийлерді «/posts» және «/posts/hello-world» және т.б. сәйкес келетін ашкөз сәйкестіктен өзгертеді.

In server.js Russ қосымшаны қажетті порт тыңдаушысымен және желіде қолданбаға қызмет көрсету үшін қажет жауап беру әдістерімен орнату үшін Express деп аталатын жалпы сыртқы құрылымды пайдаланады. Жергілікті түрде жұмыс істеп жатсаңыз, жергілікті хост сұраулары арқылы жұмыс істеуді жоспарлаған ашық портқа сәйкестендіру үшін PORT жергілікті айнымалы ортасын орнатқыңыз келеді. Өндірісте бұл әдетте 80 портқа орнатылуы керек.

Vue шеңбері

Соңында, Vue құрылымы ең қолжетімді реактивті құрылымдардың бірі болып табылады және бұл тұжырымдама басынан бастап сезіледі. Үлгі файлдары – руль стиліндегі JavaScript интерполяциясы бар HTML. Егер сіз Vue қолданбасын пайдалансаңыз, онда сіз өзіңіздің серверіңізбен жұмыс істеп жатқаныңыз ықтимал, дегенмен Nuxt бұл бағытқа баруды шешсеңіз, Vue үшін ең заманауи құрылым болып табылады.

Russ бізді Vue SSR құжаттамасына нұсқайды және оның код үзінділері біздің блог қолданбасының Vue нұсқасын іске асыру үшін бірдей файл құрылымы мен орналасуын пайдалана отырып жұмыс істейді. Төмендегі Gist ішінен React және Vue үшін кодты табыңыз.

Қатысты Мақалалар

пікір қалдыру

Сіздің электрондық пошта мекенжайы емес жарияланады.

Басына оралу