លោក Seo

SEO សម្រាប់ reactive JavaScript ដោយប្រើ React ឬ Vue ជាមួយ NodeJS និង backend stacks ផ្សេងទៀត។

ក្នុងអំឡុងពេលនៃការពិភាក្សាផ្ទាល់របស់យើងអំពីរបៀបធ្វើ ថាមពល SEO Friendly Markup ជាមួយ HTML5, CSS3, និង Javascript កាលពីដើមឆ្នាំនេះ យើងបានចំណាយពេលវេលាដ៏ល្អក្នុងការនិយាយអំពី React ។ ខ្ញុំនឹងជីកចូលទៅក្នុង nuances សម្រាប់ React អ្វីដែលអ្នកត្រូវចងចាំសម្រាប់ SEO ។ យើងនឹងប្រើប្រាស់កូដសម្រាប់ការវិភាគដោយ Russ Jeffrey នាយកនៃសមាហរណកម្មយុទ្ធសាស្ត្រនៅ Duda ដែលបានចូលរួមក្នុងការពិភាក្សា។

ប្រតិកម្ម ឬមិនប្រតិកម្ម?

ក្របខ័ណ្ឌប្រតិកម្មអាចធ្វើឱ្យគេហទំព័រ (កម្មវិធី) ទំព័រមានអារម្មណ៍ដូចជាមានវេទមន្តផ្ទុះឡើងនៅពីក្រោមពួកវា ដោយសារព័ត៌មានលំអិតនៃផ្ទាំងគ្រប់គ្រងត្រូវបានរក្សាទុកនៅក្នុងការប្រគុំតន្ត្រីជាមួយសហគមន៍នៃអ្នកប្រើប្រាស់ដ៏រស់រវើក ដូចជាបទពិសោធន៍ដែលអ្នករំពឹងពី Facebook និង Twitter ។

តម្រូវការអាជីវកម្មត្រូវតែកំណត់ថាតើបច្ចេកវិទ្យាអ្វីដែលអ្នកបញ្ចប់ការប្រើប្រាស់នៅលើគម្រោងមួយ។ ប្រសិនបើអ្នកកំពុងសរសេរកម្មវិធីដែលត្រូវការប្រភេទថាមវន្តរបស់ Facebook នោះអ្នកនឹងចង់វិនិយោគលើការបង្កើតក្របខ័ណ្ឌដែលមានប្រតិកម្មដើម្បីចែកចាយវា។ ប៉ុន្តែតាមពិត គេហទំព័រតិចតួចណាស់ដែលមានប្រភេទនៃតម្រូវការទាំងនោះ។ ក្នុងករណីភាគច្រើន អ្នកមានភាពល្អប្រសើរជាមួយ jQuery ឬ vanilla JavaScript ប្រសិនបើអ្នកអាចគេចចេញពីវា ដោយសារហេតុផលដំណើរការជាមូលដ្ឋាន។

ប្រសិនបើអ្នកប្រើធាតុប្រតិកម្មមួយនៅលើទំព័រមួយក្តាប់តូច នោះមានវិធីដើម្បីបង្ខាំងលេខកូដប្រតិកម្មរបស់អ្នកទៅកន្លែង និងពេលណាដែលវាត្រូវការ។ សរសេរផ្នែកខាងម៉ាស៊ីនមេ (ឬសូម្បីតែផ្នែកខាងអតិថិជន) កូដតាមលក្ខខណ្ឌដើម្បីផ្ទុកវា។ បើអ្នកចង់ធ្វើគឺអំណាច ម៉ូឌុលលេចឡើង, ម៉ឺនុយអន្តរកម្ម, និង មាតិកាផ្ទាំង ល. បន្ទាប់មកការចំណាយធៀបនឹងអត្ថប្រយោជន៍ការពិចារណានៃបណ្ណាល័យដែលមានប្រតិកម្មនឹងមិនអនុគ្រោះពួកគេប្រឆាំងនឹងវិធីសាស្រ្តផ្សេងទៀត។

យុទ្ធសាស្ត្របង្ហាញសម្រាប់ SEO

អ្នកប្រាកដជាត្រូវគិតខុសគ្នាអំពីរបៀប និងពេលដែលកម្មវិធីបណ្តាញរបស់អ្នកបង្ហាញមាតិកាសំខាន់ៗសម្រាប់ SEO ។ នោះគឺជាការរៀន Russ បាននាំយើងនៅក្នុងពាក់កណ្តាលទីពីរនៃការពិភាក្សារបស់យើង។ គាត់បង្ហាញឧទាហរណ៍សម្រាប់របៀបបង្កើតផ្នែកខាងម៉ាស៊ីនមេ និងដឹកជញ្ជូនសែលកម្មវិធីដែលប្រសើរឡើងរួមជាមួយ JavaScript ដូច្នេះអ្នកស្រាវជ្រាវអាចទទួលបានអ្វីដែលចាំបាច់សម្រាប់ SEO ហើយអ្វីដែលនៅសេសសល់ត្រូវបានបង្ហាញផ្នែកអតិថិជនដោយប្រើ 'ជាតិទឹក'។

ទស្សនាការពិភាក្សាទាំងស្រុងនៅទីនេះ។

ក្របខ័ណ្ឌ

ការសរសេរកម្មវិធីនៅក្នុងបរិបទនេះ ជាធម្មតាពាក់ព័ន្ធនឹងបណ្ណាល័យផ្នែកខាងមុខតែម្នាក់ឯង។ អនុសញ្ញាស្តីពីការរចនាប្លង់ឯកសារកំណត់រចនាសម្ព័ន្ធជាមួយស្គ្រីបឧបករណ៍ប្រើប្រាស់អាចបង្កើតបាននូវអ្វីដែលហៅថាក្របខ័ណ្ឌសម្រាប់ React ឬ Vue ។ បន្ទាប់ និង Nuxt គឺជា React ដែលមានមូលដ្ឋានលើ NodeJS និង Vue frameworks រៀងគ្នា។

Frameworks សម្រួលឯកសារគម្រោង និងសេវាកម្មរន្ទា ទៅតាមលក្ខណៈបច្ចេកទេសធម្មតា និងការអនុវត្តល្អបំផុត។ Russ បានផ្តល់ឱ្យយើងនូវតំណភ្ជាប់ទៅកាន់គម្រោង GitHub ដែលបង្ហាញពីវិធីរួមបញ្ចូល React និង Vue ជាមួយនឹងភាសាកម្មវិធីខាងក្រោយដ៏ពេញនិយមមួយចំនួនទៀត។ ពិនិត្យមើលពួកវាថាតើអ្នកចង់បានដំណើរការពេលដំណើរការខុសគ្នានៅលើផ្នែកខាងក្រោយជាង NodeJS ដែរឬទេ។

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

អត្ថបទកូដ SEO ជាមួយ NodeJS

នៅពេលដែលអ្នកឈានដល់តម្រូវការកម្រិតសហគ្រាស ឬការចាប់ផ្តើមអាជីវកម្ម កិច្ចព្រមព្រៀងកម្រិតសេវាកម្មជាមួយនឹងក្របខ័ណ្ឌមួយប្រហែលជាមិនអាចទៅរួចនោះទេ។ Russ ដើរយើងតាមរយៈការចាប់ផ្តើមជាមួយនឹងអត្ថបទកូដ SEO ដោយផ្អែកលើ NodeJS (ជាមួយ Express) តែម្នាក់ឯង។

ឯកសារសំខាន់ៗចំនួនបីនៅក្នុងគម្រោង React និង Vue គំរូមានកូដចាំបាច់សម្រាប់ការវិភាគរបស់យើង៖

  • នេះ app.js ឯកសារគ្រប់គ្រងសែលកម្មវិធី "ប្លុក" ។
  • នេះ server.js ទាញឯកសារនៅក្នុងបណ្ណាល័យ Express កំណត់រចនាសម្ព័ន្ធវាសម្រាប់ការដោះស្រាយសំណើ រួមទាំងវិធីសាស្ត្របង្ហាញសម្រាប់ SSR ។
  • ឯកសារ index.js បម្រើជាចំណុចចូលសម្រាប់ដំណើរការពេលដំណើរការ NodeJS ។

ប្រតិកម្មដែលងាយស្រួលប្រើ SEO

នេះ App.js ឧទាហរណ៍សម្រាប់ React បង្ហាញពីការបញ្ជូនផ្លូវដែលងាយស្រួល SEO ទៅកាន់ URLs ដែលមិនពឹងផ្អែកលើបំណែកសម្រាប់រចនាប័ទ្ម SPA ទំព័រនិម្មិត ទស្សនៈ។ នៅក្នុង server.js វត្ថុទិន្នន័យ 'បរិបទ' បង្កប់ន័យព័ត៌មានលម្អិតអំពីធនធានសម្រាប់ការហៅទូរសព្ទ ReactDOMServer.renderToString() ដើម្បីបង្ហាញសែលកម្មវិធីរបស់យើងជាមួយនឹងបរិបទដោយផ្អែកលើ URL និងលក្ខណៈវិនិច្ឆ័យផ្សេងទៀតដែលមានសក្តានុពល។

នេះ server.js ឯកសារមានវត្ថុបរិបទទិន្នន័យសម្រាប់ការកែលម្អបន្ថែមទៀត។ Russ បង្ហាញការជំនួសចំណងជើង និងទិន្នន័យមេតាផ្សេងទៀត ដើម្បីបំពេញ SEO សម្រាប់សែលកម្មវិធីដែលបានសាងសង់ មុនពេលចុងក្រោយបញ្ជូនវាទៅកម្មវិធីរុករក។

ជាចុងក្រោយ, index.js ។ បម្រើជាចំណុចចាប់ផ្តើមសម្រាប់ដំណើរការ NodeJS និង ReactDOM.hydrate() ត្រូវបានប្រើដើម្បីបញ្ចេញកម្មវិធីរបស់យើងជាមួយនឹងមាតិកាជំនួយដែលមិនសូវសំខាន់បន្ទាប់ពីសែលផ្ទុក។

ថត 'Build' មាន index.html ជាឯកសារគោលដៅសម្រាប់ការសាងសង់គំរូ SSR ។ ឯកសារពីរផ្សេងទៀត សមាសភាគ ទំព័រដើម និង ប្រកាសត្រូវបានរក្សាទុកដោយប្រើ ក .js ផ្នែកបន្ថែម ដែលបង្កប់ន័យដោយអនុសញ្ញា ដូច្នេះហើយ មិនចាំបាច់សរសេរយ៉ាងច្បាស់លាស់នៅក្នុងរបាយការណ៍នាំចូលនោះទេ។ យើង​នឹង​រំលង​ការ​វិភាគ​នៃ​ឯកសារ​សមាសភាគ​ដោយ​ប្រញាប់​ប្រញាល់ លើក​លែង​តែ​និយាយ​ថា វា​ជា​រឿង​ធម្មតា​ក្នុង​ការ​ស្វែងរក​ឯកសារ​សមាសភាគ​ដែល​រៀបចំ​ឡើង​វិញ​ជា សមាសភាគs ថតរង។

នៅក្នុងឧទាហរណ៍របស់ Russ ឯកសារទាំងអស់ រួមទាំងឯកសារសមាសភាគ មានទីតាំងនៅក្នុងថតមូលដ្ឋានគម្រោង។ នេះជាអ្វីដែលមែកធាងថតសម្រាប់ឯកសារ React មើលទៅដូច៖
├──។ App.js
├── Home.js
├── Posts.js
├──សាងសង់
│ └── index.html
├──។ index.js ។
└──។ server.js

ប្រសិនបើអ្នកមិនសូវស្គាល់វាក្យសម្ព័ន្ធ JSX ទេ វាគឺជាផ្នែកបន្ថែមភាសា JavaScript ដែលមានន័យសម្រាប់ការបំប្លែងសមាសធាតុ React ជាមួយ XML ដូច្នេះឯកសារគំរូអាចរួមបញ្ចូល JavaScript ។ សមាសធាតុ​កុមារ​ត្រូវ​បាន​នាំ​ចូល និង​ត្រូវ​បាន​យោង​នៅ​ពេល​ក្រោយ​ដោយ​អនុសញ្ញា​ឈ្មោះ (Home.js និង Posts.js ផែនទី​ទៅ និង រៀងគ្នា) នៅក្នុងប្លុកគំរូ XML ។

Russ ប្រើ ប្រតិកម្ម-រ៉ោតទ័រ-ដូម បណ្ណាល័យ (ដែលអ្នកប្រហែលជាត្រូវដំឡើងតាមរយៈ NPM): Router និង StaticRouter, Switch និង NavLink ។ បណ្ណាល័យទាំងនេះផ្តល់ជំនួយដែលផលិតរួចរាល់សម្រាប់ភាពងាយស្រួលជាមួយនឹងកិច្ចការទូទៅ ដូចជាការប្រើ NavLink 'to' helper ដើម្បីបង្កើតតំណភ្ជាប់ HTML ទៅកាន់ផ្លូវ url ឬធនធាន ដែលមានលក្ខណៈស្រដៀងទៅនឹងជំនួយ 'link_to' របស់ Rail ។

តាមរយៈ Switch និង Router ចូល App.js Russ បង្ហាញវាក្យសម្ព័ន្ធសម្រាប់ការផ្គូផ្គងផ្លូវ url ។ សូមកត់សម្គាល់ពាក្យគន្លឹះ 'ពិតប្រាកដ' សម្រាប់សេចក្តីថ្លែងការណ៍ផ្លូវលិបិក្រម។ វាត្រូវបានទាមទារដើម្បីផ្គូផ្គងតែ '/' ពិតប្រាកដ ឬបើមិនដូច្នេះទេវានឹងផ្គូផ្គងគ្រប់ផ្លូវនៃកម្មវិធី! ការប្រើពាក្យគន្លឹះ 'ពិតប្រាកដ' ផ្លាស់ប្តូរលក្ខណៈវិនិច្ឆ័យលំនាំដើមពីការផ្គូផ្គងលោភលន់ដែលត្រូវគ្នានឹង '/posts' និង '/posts/hello-world' ជាដើម។

In server.js Russ ប្រើប្រាស់ក្របខ័ណ្ឌខាងក្រៅទូទៅដែលហៅថា Express ដើម្បីដំឡើងកម្មវិធីរបស់យើងជាមួយនឹងឧបករណ៍ស្តាប់ច្រកដែលត្រូវការ និងវិធីសាស្ត្រឆ្លើយតបដែលត្រូវការដើម្បីបម្រើកម្មវិធីរបស់យើងនៅលើបណ្តាញ។ ប្រសិនបើអ្នកកំពុងធ្វើការក្នុងស្រុក អ្នកនឹងចង់បង្កើត PORT អថេរបរិស្ថានក្នុងតំបន់ ដើម្បីផ្គូផ្គងច្រកបើកចំហដែលអ្នកមានគម្រោងធ្វើការជាមួយតាមរយៈសំណើម៉ាស៊ីនមូលដ្ឋាន។ នៅក្នុងការផលិត វាជាធម្មតាត្រូវកំណត់ទៅច្រក 80។

ក្របខ័ណ្ឌ Vue

ចុងក្រោយ ក្របខណ្ឌ Vue គឺជាក្របខ័ណ្ឌប្រតិកម្មដែលអាចចូលទៅជិតបានច្រើនជាងមុន ហើយគំនិតនោះត្រូវបានគេគិតតាំងពីដំបូង។ ឯកសារ​គំរូ​គឺ​ជា HTML តាម​ព្យញ្ជនៈ​ដែល​មាន​ការ​បញ្ចូល JavaScript រចនាប័ទ្ម​របារ​ដោះស្រាយ។ ប្រសិនបើអ្នកកំពុងប្រើ Vue នោះវាទំនងជាអ្នកកំពុងធ្វើការជាមួយផ្នែកខាងក្រោយផ្ទាល់ខ្លួនរបស់អ្នក ទោះបីជា Nuxt គឺជាស្ថានភាពនៃក្របខ័ណ្ឌសិល្បៈសម្រាប់ Vue ប្រសិនបើអ្នកសម្រេចចិត្តទៅផ្លូវនោះ។

Russ ចង្អុលយើងទៅឯកសារ Vue SSR ហើយកំណាត់កូដរបស់គាត់ដំណើរការដោយប្រើរចនាសម្ព័ន្ធឯកសារដូចគ្នា និងប្លង់សម្រាប់ការអនុវត្តកំណែ Vue នៃកម្មវិធីប្លក់របស់យើង។ ស្វែងរកលេខកូដសម្រាប់ React និង Vue ដែលមាននៅខាងក្រោមក្នុង Gist ខាងក្រោម។

អត្ថបទ​ដែល​ទាក់ទង

សូមផ្ដល់យោបល់

អាស័យដ្ឋានអ៊ីមែលរបស់អ្នកនឹងមិនដាក់បង្ហាញជាសាធារណះ។

ត្រលប់ទៅកំពូល