Nuxt.js SEO uchun eng yaxshi amaliyotlar

Nuxt.js-ning eng katta savdo nuqtalaridan biri bu sizning qidiruv tizimingizga Search Engine Optimization (SEO) yordamida yordam berish va Google-da yaxshi mavqega ega bo'lish. Ushbu maqolada, sizning Nuxt dasturingiz qidiruv tizimlarida tartiblash uchun to'g'ri o'rnatilganligiga ishonch hosil qilish uchun eng yaxshi amaliyotlarni ko'rib chiqamiz.

Ogohlantirishlar: Ushbu maqola SEO qo'llanmasi yoki Google-da yaxshi mavqega ega bo'lish bo'yicha qo'llanma emas. Bu sizning SEO-ga yordam beradigan Nuxt dasturida meta-teglar va qayta yo'naltirishlarni qanday qilib yaxshiroq o'rnatish haqida texnik maqola.

Nuxt.js sizga SEO bilan qanday yordam beradi

Sho'ng'ishdan oldin, Nuxt nima ekanligini va bu sizning arizangizni SEO maqsadlarida birlashtirishga qanday yordam berishi mumkinligini ko'rib chiqaylik.

Yagona sahifa ilovalari SEO uchun o'rnatilmagan

Odatda Vue.js yordamida siz bitta sahifali dastur yaratasiz. Bu shunchaki JavaScript-da yaratilgan dastur bo'lib, unda faqat bitta fayl, bo'sh indeks.html mavjud. Tarkib JavaScript boshlangandan keyin index.html ichiga joylashtiriladi va JavaScript shuningdek marshrutlarni almashtirish haqida ham g'amxo'rlik qiladi.

SPA-lar tezkor UI-larni yaratish uchun juda yaxshi, ammo SEO haqida gap ketganda, bitta sahifa ilovalari ideal emas, chunki ularda boshlang'ich tarkib yo'q. Bu Google va boshqa brauzerlarning (shu jumladan Facebook kabi ijtimoiy media qidiruv vositalarining) veb-saytingizni tarashini va qidirish natijalarida uni to'g'ri namoyish etishini qiyinlashtiradi.

Nuxt.js universal dasturni yaratishni soddalashtiradi

Umumjahon dastur bu SEOni yaxshilash, yuklanishni tezlashtirish va boshqa ko'pgina afzalliklar uchun dasturingizni veb-serverga oldindan yuklash va HTML-ni ilovangizdagi har bir marshrut uchun brauzerga javob sifatida yuborish haqida.

Umumjahon dastur bilan, har qanday JavaScript yuklanmasdan oldin va <meta> teglari <head> va <h1> teglaridagi sahifalar bo'ladi. Ushbu teglar ishlov beruvchilarga sahifada nima borligini aniqlashga yordam beradi.</p><h3>Nuxt.js sizning barcha sahifalaringiz uchun boshni qanday boshqaradi</h3><p>Nuxt sizning har bir sahifangizda <head> elementini boshqarish uchun vue-meta deb nomlangan kutubxonadan foydalanadi. Sahifa - bu shunchaki Nuxt-ning yo'nalishi, va ularning har biri sahifalar papkasida yashaydi.</p><p>Nuxt sizga ilovangiz sahifalarida <head> elementini o'rnatishning uchta usulini taqdim etadi. Endi ularni ko'rib chiqaylik.</p><h3>1) Barcha sahifalar uchun standart meta-teglarni o'rnatish</h3><p>Ilovangizdagi turli sahifalar bir xil meta-teglar bilan bo'lishishi juda kam uchraydi. Nuxt sizga nuxt.config.jsfile-da bosh xususiyatni o'rnatish orqali har bir sahifangiz uchun odatiy sozlamalarni o'rnatishga imkon beradi.</p><pre>modul.exports = {   bosh: {     sarlavha namunasi: '% s - Nuxt.js',     meta: [// Ushbu massivdagi har bir ob'ekt o'ziga xos teg-teg       {charset: 'utf-8'},       {name: 'viewport', tarkib: 'width = qurilma kengligi, boshlang'ich shkalasi = 1'},       {yashirilgan: 'tavsif', nomi: 'tavsif', tarkib: 'Meta tavsifi'}     ]   } };</pre><p>Bosh xususiyat ichida aniqlashingiz mumkin bo'lgan barcha xususiyatlarni ko'rish uchun bu erni bosing.</p><p>Eslatma: Nuxt.js ob'ektning nomi uchun boshni ishlatadi. vue-meta metaInfo-dan foydalanadi. Xuddi shu xususiyat.</p><h3>2) O'zingizning sahifalaringiz uchun meta teglarini sozlash</h3><p>Har bir Nuxt sahifangizning ichida siz bosh usulini aniqlashingiz mumkin. Siz alohida sahifalar uchun bosh teglarini qo'lda sozlashingiz mumkin va Nuxt nuxt.config.jsfile-da standart qilib qo'yganingizning ustiga yozadi.</p><p>Mana, About.vue faylining bosh metadagi o'z teglari mavjud bo'lgan misol:</p><pre><template>   <h1> Sahifa haqida </h1> </template></pre><pre><script> standart eksport {   bosh () {     return {       sarlavha: 'Biz haqimizda - Nuxt.js',       meta: [         {yashirin: 'description', nomi: 'description', tarkib: 'Nuxt.js kompaniyamiz haqida'}       ]     }   } } </script></pre><h3>3) Dinamik sahifalaringiz uchun meta teglarini o'rnatish</h3><p>Bundan tashqari, siz meta teglaringizni dinamik sahifalar bilan sozlashingiz mumkin - bu erda bitta yo'nalishni boshqacha ko'rsatadigan sahifalar. Bir misol, foydalanuvchi profilining sahifasi bo'lishi mumkin.</p><p>Dinamik marshrutlar sizning .vue komponentingizni yoki katalogingizni pastki qavat ostidagi sahifalar papkasida oldindan belgilash orqali aniqlanadi.</p><pre>sahifalar / - | foydalanuvchilar / ----- | _username.vue</pre><p>Bu sizning Vue.js marshrut kodingizni quyidagicha yaratadi:</p><pre>yo'riqnoma: {   yo'nalishlar: [{     nomi: 'users-id',     yo'l: '/ users /: username?',     komponent: 'sahifalar / foydalanuvchilar / _username.vue'   }] }</pre><p>Va bosh usulning ichki qismida siz o'zingizning tarkibiy ma'lumotlaringizga kirish huquqiga ega bo'lasiz. Ushbu tarkibiy qismdan kirishingiz mumkin bo'lgan ma'lumotlardan sizning tarkibiy ma'lumotlaringiz bilan meta-teglar qanday ishlashini sozlash uchun foydalanishingiz mumkin.</p><p>Bu foydalanuvchi profilidagi meta-teglar qanday ko'rsatilishini ko'rsatadigan misol:</p><pre><script>   bosh () {     foydalanuvchiga ruxsat bering = this.user;          return {       sarlavha: `$ {user.fullName} @ ($ {user.userName}) - Nuxt.js`,       meta: [{         yashirdi: `iOSUrl`,         mulk: 'al: ios: url',         tarkib: `myapp: // user? screen_name = $ {user.userName}`       },       {         yashirgan: `tavsif ',         nomi: "tavsif",         tarkib: `$ {user.fullName} ning Nuxt.js`dagi ommaviy profil       }]     }   } </script></pre><h3>Yashirin nima va bu SEOga qanday yordam beradi?</h3><p>Ehtimol siz yuqoridan keltirilgan meta-teglardagi yashirin mulkni payqagan bo'lishingiz mumkin. Bu odatiy vue-meta xatti-harakatlarini yumshatish uchun ishlatiladigan xususiyat.</p><p>Odatiy bo'lib, vue-meta-dan foydalanganda, asl yorliqni almashtirish o'rniga takroriy teglar yaratiladi. Ammo Google sizning veb-saytingizni ko'rib chiqayotganda takroriy teglar qilganingiz uchun sizni jazolashi mumkin, shuning uchun har bir meta-teglarda ularni aniq aniqlash uchun har doim noyob yashirin xususiyatga ega bo'lish yaxshidir. Yashirin mulkka ega bo'lish vue-meta-ga tegni nusxalash o'rniga uni almashtirish to'g'risida signal beradi.</p><p>Ikkilamchi meta-teglar va ularni qanday yashirish mumkinligi haqida ko'proq bilish uchun bu erni bosing.</p><h3>Qayta yo'naltirishlar Nuxt.js bilan</h3><p>HubSpot-ga ko'ra, 301-ga yo'naltirish bu bitta URL-manzildan boshqasiga doimiy yo'naltirishdir. 301 qayta yo'naltirishlar saytga tashrif buyuruvchilar va qidiruv tizimlarini brauzerda avval kiritgan yoki qidiruv tizimlari natijalari sahifasida tanlanganidan boshqa URLga yuboradi.</p><p>301 qayta yo'naltirishlar sizning veb-saytingiz tuzilishi o'zgarganda foydalanish uchun odatiy holdir va siz hali ham asl havolaning reytingini saqlab turishni xohlaysiz.</p><p>Nuxt sizga nuxt.config.js faylingiz ichida serverMiddleware xususiyatini o'rnatish orqali ushbu ishda yordam beradi. ServerMiddleware xususiyati sahifa server tomonida ko'rsatilganda ishga tushadigan o'rta dasturlarni o'rnatishga yordam beradi.</p><p>Sizning ilovangiz uchun 301 qayta yo'naltirishni amalga oshiradigan funktsiyani sozlash uchun ushbu xususiyatdan foydalanishga misol.</p><pre>modul.exports = {   serverMiddleware: [     '~ / servermiddleware / seo.js'   ] };</pre><p>Siz /301.json deb nomlangan fayl ichida qayta yo'naltirilishi kerak bo'lgan marshrutlarni aniqlab, uni seo.js O'rta dasturiga import qilishingiz mumkin.</p><pre>[   {"dan": "/ eski", "dan": "/ yangi"},   {"dan": "/ veryold", "dan": "/ verynew"},   {"dan": "/" juda eski "," dan ":" / yangi "} ]</pre><p>Keyin siz 301.json-da aniqlagan marshrutlar orqali faylni ishga tushirishingiz va tegishli HTTP sarlavhalari bilan birga har biri uchun 301 ta javobni qaytarishingiz mumkin.</p><pre>qayta yo'naltirishlar = talab ('../ 301.json');</pre><pre>module.exports = funktsiya (req, rez, keyingi) {      const redirect = yo'naltirishlar.find (r => r.from === req.url);</pre><pre>  agar (qayta yo'naltirish) {     console.log (`yo'naltirish: $ {redirect.from} => $ {redirect.to}`);     res.writeHead (301, {Manzil: redirect.to});     res.end ();   } else {     Keyingi();   }</pre><pre>}</pre><p>Nuxt.js-ning o'rta dasturlari va bu nafaqat qayta yo'naltirishlardan ko'ra ko'proq yordam berishi mumkinligi haqida ko'proq bilish uchun bu erni bosing.</p><h3>Ilova spa rejimida taqdim etilganda SEO effektlari</h3><p>Nuxt ilovalarida bir nechta tuzilish rejimi mavjud. Siz ilovangizni universal yoki kurort sifatida taqdim etishni tanlashingiz mumkin.</p><p>Agar siz o'zingizning ilovangizni spa rejimida ko'rsatishni tanlasangiz, <head> dagi barcha teglarni boshqarish qanday ta'sir qiladi?</p><p>Server tomonidan ko'rsatish jarayoni amalga oshirilmayotganligi sababli, o'zingizning sahifangizda dastlab tarkibga kirishning hech qanday afzalliklariga ega bo'lmaysiz. vue-meta hanuzgacha <head> bilan ishlash vazifasini bajarmoqda, lekin agar siz o'zingizning ilovangizni bitta sahifa ilovasi sifatida taqdim qilsangiz, dastlab sahifada hech qanday tarkib yo'q, chunki JavaScript-ni yuklaganingizdan so'ng barcha teglar yaratiladi. Faqatgina effektlar faqat oldingi qismdir. Masalan, foydalanuvchi qarashlarni o'zgartirganda sarlavha yorlig'ini yangilash.</p><h3>Xulosa</h3><p>Nuxt sizga universal dasturda <head> elementini qanday ko'rsatishingiz ustidan ko'p boshqarish imkonini beradi, bu SEO-ga yordam beradi. Siz nuxt.config.js faylining ichida global birlamchi sozlamalarni o'rnatish uchun juda ko'p imkoniyatlarga egasiz, shuningdek har bir alohida sahifada siz narsalarni sozlashingiz mumkin bo'lgan bosh usuliga kirishingiz mumkin. Va nihoyat, siz havolaning martabali kuchini saqlab qolish uchun 301 qayta yo'naltirishlar kabi narsalar bilan shug'ullanadigan serverMiddleware-ni o'rnatishingiz mumkin.</p><p>Keyingi oylarda VueMastery.com Nuxt ilovalarida tarkib yaratadi, bugungi kunda bepul hisob yaratadi va chiqarilgani haqida xabar beradi.</p><h3>O'qishni davom eting</h3><ul><li>Nuxt.js-dan foydalanishning 10 ta sababi</li><li>VuePress va Nuxt.js</li><li>Vue.js o'tishini qanday yaratish kerak</li></ul></div><div class="neighbor-articles"><h4 class="ui header">Shuningdek qarang</h4><a href="/deal/how-a-bubble-plot-reveals-the-best-cities-to-live-in-the-us-f7a111/" title="Qabariqsimon fitna AQShda yashash uchun eng yaxshi shaharlarni qanday ochib beradi">Qabariqsimon fitna AQShda yashash uchun eng yaxshi shaharlarni qanday ochib beradi</a><a href="/deal/the-5-best-resources-for-learning-java-0af458/" title="Java tilini o'rganish uchun 5 ta eng yaxshi manbalar">Java tilini o'rganish uchun 5 ta eng yaxshi manbalar</a><a href="/deal/is-javascript-the-best-language-for-new-coders-ca55bd/" title="JavaScript yangi kodlovchilar uchun eng yaxshi tilmi?">JavaScript yangi kodlovchilar uchun eng yaxshi tilmi?</a><a href="/deal/the-best-way-to-move-forward-is-right-behind-you-a8766d/" title="Oldinga siljishning eng yaxshi usuli sizning orqangizda">Oldinga siljishning eng yaxshi usuli sizning orqangizda</a><a href="/deal/the-best-new-ways-to-transcribe-eeaf54/" title="Transkriptning eng yaxshi yangi usullari">Transkriptning eng yaxshi yangi usullari</a></div></main><div class="push"></div></div><footer style="height:50px">finleyandoliver.com<!-- --> © <!-- -->2019<!-- --> <a href="https://vi.finleyandoliver.com/deal/best-practices-for-nuxt-js-seo-a8aafd" title="https://finleyandoliver.com">finleyandoliver.com</a></footer></div></div></div><script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"></script><script> window.cookieconsent.initialise({ "palette": { "popup": { "background": "#eaf7f7", "text": "#5c7291" }, "button": { "background": "#56cbdb", "text": "#ffffff" } }, "showLink": false }); </script><script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><script> (adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-3845662922897763", enable_page_level_ads: true }); </script></body></html>