Vue.js SEO-Дружалюбны АГР: Саветы, інструменты і прыклад Папярэдне апрацоўваць

1. Агульныя парады па SEO
2. → Мета-тэгі 🏷️
3. → Мабільная аптымізацыя 📱
4. → HTTPS 🛡️
5. → Хуткасць Page 🚀
6. → Карта сайта 🗺️
7. → Спасылка будынак ⛓️
8. Канкрэтныя пытанні SEO Vue.js SPA
9. серверны рэндэрынгу
10. папярэдняя візуалізацыя
11. Vue.js SEO тэхнічны прыклад выкарыстання Папярэдняя візуалізацыя
12. 1. Усталёўка PreRender-спа-убудова
13. 2. Настройка Vue.js для PreRender
14. 3. Пабудова вашага SEO дружалюбнага сайта Vue.js
15. Жывая дэманстрацыя, Github РЭПО і відеэаурокі
16. закрыццё думкі

У спешцы? прапусціць Vue.js падручнік папярэдняй візуалізацыі або дэма ,

Вы ведаеце пра JavaScript Hulu трывае няўдачу гісторыі?

Яшчэ ў 2016 годзе, анлайн-сэрвіс струменевага відэа выпрабаваў 56% зніжэнне бачнасці з-за дрэннага апрацоўкі JS ,

Кашмар бізнэс не хоча, каб прайсці.

Каб пазбегнуць падобных катастроф, вы павінны ведаць, што вы робіце пры працы з сучаснымі фреймворк.

Тут на Snipcart, мы любім Vue.js , Але цалкам дасведчаныя аб пытаннях SEO з высмальваюць старонкі прыкладання Vue.js.

У гэтым пасце я хачу паказаць распрацоўшчык JS, як лёгка гэта зрабіць Vue SEO дружалюбным.

Я пайду праз:

• парады Агульнага SEO Вы заўсёды павінны прымяняцца.
• Канкрэтныя пытанні SEO Vue.js SPA.
• Інструменты, каб выправіць іх з сервера візуалізацыі і папярэдняй візуалізацыі.
• Тэхнічны прыклад Vue.js SEO з выкарыстаннем пререндер-спа-убудова.

Гэта цалкам абноўленая версія нашага Vue.js SEO рэсурсу. Арыгінальны адзін рушылі ўслед дзве іншыя часткі каля JS пытанняў рамкі SEO, для React , і вуглаваты , Там таксама відэа версія гэтага кантэнту, які вы можаце знайсці ў канец гэты пост.

Агульныя парады па SEO

Перш чым мы разгледзім пытанні SEO, спецыфічныя для ООТА JavaScript, давайце разгледзім лепшыя практык распрацоўшчыкі павінны прыняць пры стварэнні пошукавых сістэм, аптымізаваных сайтаў.

Гэты спіс натхнёны некаторымі з найбуйнейшых гульцоў SEO, такіх як Мос, Backlinko і ​​Ahrefs. Я дадаў спасылкі на свае рэсурсы, калі вы хочаце капаць глыбей.

→ Мета-тэгі 🏷️

Мета-тэгі нізка віслыя плён. Яны дазваляюць паказваць пошукавыя сістэмы менавіта тое, што ваш кантэнт кс.

Аднак, не ўсе тэгі нараджаюцца роўнымі. Вы павінны засяродзіць сваю энергію толькі на некаторых з іх, а менавіта:

• Мета тыпу кантэнту -Имеет прысутнічаць на кожнай старонцы, аб'яўляе свой набор знакаў для старонкі.
• Назва -Выберите унікальнае назву , якое ловіць шукальнік ўвагу , а дакладна апісваюць змест старонкі. Трымаеце яго кароткім!
• Мета апісанне -Ён павінен пераканаць SERP (Search Engine Вынікі Page) наведвальнікаў націсніце на спасылку , каб знайсці адказы на іх канкрэтных даследаванняў намеры.
• Viewport -существенный для добрага мабільнага вопыту.

Чытаць далей: SEO Мета-тэгі , Па Мозу.

вя-мета з'яўляецца надзейным інструментам для кіравання старонкі мета-дадзеныя ў кампанентах Vue 2.0.

Сацыяльныя тэгі таксама могуць аказаць істотны ўплыў на SEO , як яны дапамагаюць ваш кантэнт распаўсюджвацца на сацыяльныя платформы, тым самым павялічваючы вашыя SEO сацыяльныя сігналы. Ёсць канкрэтныя тэгі для ўсіх вялікіх платформаў (Facebook, Twitter, Pinterest, Google+).

Чытаць далей: Должн- Сацыяльныя мета-тэгі для Twitter, Google+, Facebook і многае іншае , Па Мозу.

→ Мабільная аптымізацыя 📱

Калі вы не ў курсе мабільна-першае індэксацыі кампаніі Google , Ну, лічаць гэта трывожным званком! Google цяпер дае больш любові плыўнаму мабільным вопыту, чым настольнае то, і гэта трэба.

Чытаць далей: Мабільны SEO: The Definitive Guide , Па Backlinko.

NativeScript сілы крос-platorm Vue.js мабільных прыкладанняў.

→ HTTPS 🛡️

Неіснуючая сертыфікацыя HTTPS або зламаныя канфігурацыі можа аштрафаваць ваш сайт. Хіба не зразумела, што пошукавыя сістэмы схільныя штурхаць сайты, якія з'яўляюцца даверанымі і сертыфікаванымі, у рэшце рэшт?

Нават калі гэта не было для SEO, вы, верагодна, хочаце, каб прапанаваць платформу як мага больш бяспечным для карыстальнікаў. Такім чынам, няма падстаў не адпавядаюць гэтаму крытэру!

Чытаць далей: HTTP супраць HTTPS для SEO: Што трэба ведаць, каб заставацца ў добрай грацыі кампаніі Google па ahrefs.

→ Хуткасць Page 🚀

Народная пядзю увагі короткозамыкателей пошукавікаў хутка адмовіцца ад павольнай загрузкі старонак. Google ведае, што і прапанаваць лепшы UX для шукальнікаў, аштрафуюць павольныя сайты.

Googlebots самі па сабе даволі нецярплівыя і не будзе чакаць сцэнара даўжэй, чым 5 секунд , Калі вы не ўкладзецеся ў гэты тайм-аўт, вы рызыкуеце не атрымаць ваша ўтрыманне аказваюцца адэкватна. Хуткасць яго!

Чытаць далей: On-Site SEO: Page Speed , Па Мозу.

→ Карта сайта 🗺️

Карта сайта дзейнічаюць як карта архітэктуры вашага сайта для searchbots. У ім павінны быць старонкі, якія лічаць, што добрага якасці пасадкі і навігацыі старонкі, годныя індэксацыі.

Sitemaps можа быць не так карысна для невялікіх сайтаў, але гэта па-ранейшаму з'яўляецца каштоўным інструментам SEO разгледзець.

Чытаць далей: XML Sitemaps: найбольш недаацэнены інструментаў у панэлі інструментаў аптымізатар пошукавых сістэм , Па Мозу.

Вы можаце стварыць sitemap.xml па Канфігурацыя В'ет-маршрутызатар ,

→ Спасылка будынак ⛓️

Стварэнне вашага аўтарытэту дамена застаецца ключавым SEO тактыкам. Як Google ведае, што вы сталі аўтарытэтным рэсурсам? Пры наяўнасці іншых адпаведных даменаў, якія б спасылаліся на ваш.

Там няма ніякай сакрэтнай формулы тут, для дасягнення гэтай мэты вы павінны ўпарта працаваць крафт вялікага ўтрымання. Матэрыялы, якія іншыя хочуць падзяліць і выкарыстоўваць у якасці рэсурсу на сваім уласным сайце!

Чым больш спасылак вы атрымаеце з адпаведных крыніц, тым больш ваш аўтарытэт будзе расці, тым больш вы будзеце зарабляць Google аддаюць перавагу, калі гаворка ідзе пра рэйтынг.

Чытаць далей: Спасылка будынка для SEO: The Definitive Guide , Па Backlinko.

Канкрэтныя пытанні SEO Vue.js SPA

Для наступнага ўроку я вырашыў выкарыстоўваць блог дэма мы зрабілі ў папярэднім пасце, таму што, калі шчыра, гэта выглядае дзіўным. Калі вы зацікаўлены ў веданні, як гэта было пабудавана, см гэты пост ,

Хоць гэта вялікі кавалак працы візуальна, ён не настроены ідэальна SEO-накрыж. Гэта поўны SPA, што пошукавыя сістэмы могуць мець цяжкі час паўзе і індэксацыю.

Чаму гэта?

Дадатак адной старонкі дадае кантэнт на старонках дынамічна, што мае свае перавагі, але прыносіць два важных пытання:

1. Мы не ведаем , у якой ступені Google можа сканаваць і карэктна адлюстроўваць JS. Яны казалі на працягу некалькіх гадоў, што Googlebots здольныя рабіць гэта. Аднак гэтыя прэтэнзіі заўсёды варта «але» ці два.
2. Google не адзіная пошукавая машына там. Калі ўсё яшчэ хістка на яго баку, мы ведаем, за тое, што іншыя гульцы там не поўзаць JS яшчэ, такім чынам, не сустракаючы фактычнае ўтрыманне старонкі.

Такім чынам, няма ніякага спосабу вакол яго. Калі вы хочаце, каб пераканацца, што ваш вэб-сайт Vue.js прыкладанне рангі на SERPs /, вы павінны дзейнічаць на ім.

Вашы варыянты?

серверны рэндэрынгу

Пры ўсталёўцы SSR, у вас ёсць логіка рэндэрынгу зроблена непасрэдна ў інтэрфейсе, у асяроддзі Node.js. прагляды HTML затым вяртаюцца кліенту, гатовыя служыць для пошуку бот.

Гэта выдатна падыходзіць для адчувальных да часу прыкладанняў, дзе вы хочаце, каб разгрузіць як мага больш логікі, наколькі гэта магчыма на сэрвэры, але пастаўляецца з цаной. Вы будзеце мець патрэбу ў надзейныя інфраструктурах для апрацоўкі стрэсу дадаванага да сервера, прашу больш часу распрацоўкі. Вы можаце таксама запаволіць працу сістэмы ў працэсе.

Але калі вы можаце справіцца з гэтым, гэта, безумоўна, шлях для вялікіх прыкладанняў. Nuxt.js без сумневу інструмент выкарыстоўваць для Сервер рендеренного Vue.js SPA ,

папярэдняя візуалізацыя

Часам, хоць, на боку сервера візуалізацыі можа адчуваць сябе залішнім, як і ў выпадку майго дэма. Для невялікай SPA толькі з некалькімі старонкамі, Папярэдняя візуалізацыя будзе рабіць трук толькі штрафам. Тым больш, калі ваша адзіная клопат SEO.

Такім чынам, няма ніякай неабходнасці, каб прымацаваць прыкладанне Vue.js да любога серверу. Прадастаўленне выконваецца на баку кліента з выкарыстаннем іншых убудоў такія як:

• Prerender.io - Сумяшчальнасць з усімі найбольш папулярнымі JS рамкі, у тым ліку Vue.js.
• PreRender-спа-убудова - гэта WebPack убудова, які будзе кампіляваць вашыя старонкі ў статычныя старонкі. Робіць усё змесціва даступна ў крыніцы, і індэксацыя з'яўляецца вецер.

Апошняе вельмі простая ў выкарыстанні і быў пабудаваны членам каманды асноўнага Vue.js, таму ён падыходзіць мой выпадак выкарыстання зусім тут.

Vue.js SEO тэхнічны прыклад выкарыстання Папярэдняя візуалізацыя

Час, каб выправіць блог Vue.js, паказаны раней. выкарыстанне PreRender-спа-убудова , Я буду мець SPA Vue.js, які знаходзіцца ў фаворы Google у самыя кароткія тэрміны.

перадумовы

• Базавыя веды Vue.js
• Node.js & ная ўстаноўка

1. Усталёўка PreRender-спа-убудова

Настройка ўбудовы вельмі простая. У гэтай ўстаноўцы, я буду запускаць убудова толькі пры стварэнні для вытворчасці. Вам не трэба, калі актыўна папярэдняй візуалізацыі распрацоўцы кампанентаў.

Пачніце з устаноўкай плагіна ад нага.

NPM ўсталяваць пререндер-спа-убудова

Затым адкрыйце зборкі / build.js файл. Там вы знойдзеце спецыяльныя рэчы для вытворчасці зборкі. Вам трэба імпартаваць убудова і дадаць гэтыя радкі ў верхняй частцы файла:

// /build/build.js Const PrerenderSPAPlugin = патрабуецца ( 'пререндер-спа-убудова'); Const рендерер = PrerenderSPAPlugin.PuppeteerRenderer;

Чаму PrerenderSPAPlugin.PuppeteerRenderer? Таму што вам трэба наладзіць рэндэру. Вы павінны ўводзіць некаторыя дадзеныя, каб прыкладанне ведаць, калі гэты час папярэдне сфарміравана. Ёсць такія рэчы, як Disqus каментары, якія вы не зможаце пререндер.

У 100% SEO-дружалюбныя прыкладання на гэта было б пераважней, каб атрымаць выгаду з гэтых каментароў, як адлюстроўваецца змесціва на вашых старонках. Калі ваш працоўны статычны генератар сайта, вы павінны разгледзець Staticman для статычнага карыстацкага кантэнту.

Вам трэба атрымаць усе запісы карыстальніка і стварыць спіс маршрутаў, якія будуць папярэдне сфармаваныя. У рэальным сцэнары вытворчасці, вы, верагодна, хочаце, каб выклікаць ваш абезгалоўленых CMS API або знешні сэрвіс, які дае кантэнт. У гэтым выпадку дадзеныя жыве ў простых JSON файлаў.

Прачытайце файл feed.json і ствараць свае маршруты:

// /build/build.js Const fileContent = fs.readFileSync (path.resolve (__ имя_директории, '..', 'статычнае', 'АПА', 'feed.json')); Const корму = JSON.parse (fileContent); Const prenderedRoutes = feed.results.map (х => `/ чытання / $ {x.id}`); prenderedRoutes.unshift ( '/');

Дадайце ўбудова да канфігурацыі WebPack:

// /build/build.js webpackConfig.plugins.push (новы PrerenderSPAPlugin ({staticDir: path.resolve (__ имя_директории, '..', 'адлегласць'), маршруты: prenderedRoutes, рендерер: новы Renderer ({injectProperty: «__PRERENDER_INJECTED », ўпырснуць: {папярэдне сфарміравана: праўдзівы}, renderAfterDocumentEvent: 'app.rendered'})}));

Вы будзеце мець доступ да акна .__ PRERENDER_INJECTED.prerendered зменнай, калі сайт папярэдняй візуалізацыі. Гэта будзе карысна, каб выключыць ўтрыманне, якое Вы не жадаеце пререндер.

Акрамя таго, неабходна ўказаць чаканне для app.rendered падзеі.

У гэтай дэманстрацыі я буду выкарыстоўваць алюр , Які з'яўляецца дзіўнай бібліятэкай, каб дадаць індыкатар на сайце хутка. Тым не менш, вы павінны пераканацца, што загрузка завершана да папярэдняй візуалізацыі сайта, калі няма, то вы будзеце ў канчатковым выніку атрымаць выпадковы індыкатар на некалькіх старонках.

2. Настройка Vue.js для PreRender

Затым вам неабходна прымяніць некаторыя нязначныя змены ў некаторых кампанентах. Каб зрабіць гэта, я змяніў шлях Pace быў пачаты. Я пазбавілася ад файла startup.cs і змясціць усё ў main.js.

Адкрыйце файл main.js і змяніць тое, як вашыя кампаненты App ўключаны:

// /main.js новы Ую ({маршрутызатар, візуалізацыі: ч => ч (App), усталяваны () {Pace.start () Pace.on ( 'шкура', () => {document.dispatchEvent (новае падзея ( 'app.rendered')) ;.})}}) $ мацаванне ( '# дадатак')

Пасля таго, як ваш галоўны кампанент усталяваны, запусціце пэйсы і адправіць вам app.rendered падзеі, калі пачатковая загрузка будзе завершана.

Апошняе абнаўленне вы павінны зрабіць, гэта пераканацца, што Disqus не загружана, калі сайт быў папярэдне сфармаваны.

Адкрыць файл BlogPost.vue, дзе вы будзеце ўключаць у сябе кампанент Disqus.

З-за спосабу PreRender-спа-убудова быў настроены на першы, вы будзеце мець доступ да зменнай, якая паказвае, што сайт быў папярэдне сфарміравана.

Абнавіце метад showComments наступным чынам:

// /BlogPost.vue showComments () {// Гэта ўпырскваецца пререндер-сп-убудова на час зборкі, мы не пререндер Disqus каментароў. калі (акно .__ PRERENDER_INJECTED && вокны .__ PRERENDER_INJECTED.prerendered) {вяртанне; } SetTimeout (() => {this.commentsReady = ісціна}, 1000)}

3. Пабудова вашага SEO дружалюбнага сайта Vue.js

Цяпер вы гатовыя стварыць свой сайт. У тэрмінале выкарыстоўвайце наступную каманду:

NPM запуску зборкі

Затым, калі вы паглядзіце на DIST тэчкі, вы павінны ўбачыць усе паведамленні ў тэчцы чытання. Статычны HTML-файл быў створаны для кожнага паста:

Вось так! Як лёгка было гэта, праўда?

Жывая дэманстрацыя, Github РЭПО і відеэаурокі

паглядзець дэма тут

См GitHub РЭПО тут

Для візуальнага прадстаўлення гэтага зместу:

закрыццё думкі

PreRender-спа-убудова акуратны убудова. Гэта лёгкі ў наладзе і дастаткова гнуткай, каб апрацоўваць выпадкі выкарыстання асінхроннай як той, які мы мелі з пэйсы.

Я выдаткаваў каля 2 гадзін, каб высветліць, як падключыць усе гэтыя рэчы разам і абнавіць наша першапачатковае заяву ў падтрымку папярэдняй візуалізацыі.

Як я ўжо згадваў раней, убудова просты і лепш за ўсё падыходзіць для простых прыкладанняў, такіх як статычны блог. Калі вы хочаце, каб пабудаваць нешта больш складанае, я прапаную вам зірнуць на Nuxt замест гэтага!

Калі вам спадабалася гэтая пасада, калі ласка , заняць другое месца падзяліцца на Twitter , Ёсць каментары, пытанні? Хіт раздзел ніжэй!