Angular Universal vs. Prerender.io

Ако сте разработчик на Angular, знаете, че SEO е космати ситуация. И ако сте като нас, вероятно Google потърси пътя ви към две основни решения. В тази статия искаме да разделим това на колко сложен е всеки процес и колко е ефективен. Обърнете внимание, че всичко това се основава на нашия опит. Ако мислите друго, не се колебайте да се свържете с нас!

1. Ъглова универсална

Документация: https://angular.io/guide/universal
Сложност: 7/10
Ефективност: 6/10

В нашия случай не използвахме ъглов универсален стартер. Вече бяхме изградили нашия уебсайт без един (проект Angular 7). И въпреки че процесът не е много дълъг, за да се интегрира в съществуващия ви проект Angular, определено е необходимо време, за да разберете какво се случва. За да омаловажи обяснението, Angular Universal създава две версии на вашето приложение. Едното е приложението „сървър“, което предварително превръща страниците ви в статичен html. Това се случва първо и от това ще се изтеглят SEO ботовете. Другата версия е приложението „браузър“. Това е вашето редовно динамично и напълно функционално ъглово приложение. Universal разменя приложението ви, предоставено от сървъра, с приложението на вашия браузър след приключване на зареждането му. По този начин може да видите леко трептене, особено при по-ниски скорости.

Тъй като това е статия най-вече за това защо да използваме един над друг, няма да изписваме твърде много код. Моля, прегледайте връзката за документи, предоставена по-горе.

Ние обаче искаме да правим коментари по проблеми, пред които сме изправени, и неща, които трябваше да направим, за да работим около тях:
1. Добавете скриптовете, които докът предлага за вас във вашия package.json. Поставянето му в целевата сървър angular.json ще доведе до грешка.
2. За вашия server.ts файл, когато импортирате вашия AppServerModuleNgFactory, вземете го от вашия файл ./dist/server/main, а не „./dist/server/main.bundle“
3. Ако използвате SCSS за вашия проект, не забравяйте да добавите този фрагмент под целта на сървъра angular.json. В противен случай би изхвърлил грешки при изграждането на сървърната цел.

"stylePreprocessorOptions": {"includePaths": ["src / scss"]}

4. Също така не забравяйте да проверите двойно своите изходни пътища за вашата редовна цел за изграждане и цел на сървъра. Изходният път за изграждане трябва да е като dist / име-проект / браузър, а изходният път на сървъра трябва да бъде като dist / име-проект / сървър

След като приключихме, можехме да видим целия код на нашата страница от „Преглед на източника на страницата“ на хром. Ние също интегрирахме динамични мета тагове (използвайки мета услугата) за нашия проект и можем да ги видим, когато инспектираме нашата страница. Ето сега плюсовете и минусите, след като разгърнахме нашия сайт и индексирахме страниците си в Google:

Професионалисти
- Всички наши страници се търсиха в Google
- Ботовете в Google успяха да изтеглят текст от нашите страници

Против
- Текстът, издърпан с ботове на Google, е случаен текст от нашите страници (като имената на линковете, неща в долния колонтитул, алт описания на изображения, телесен текст и т.н.)
- Ако се опитвате да обслужвате персонализирани експресни маршрути, ще се сблъскате с проблеми. Коефициенти е по-добре да въртите друг екземпляр на сървъра за вашите персонализирани маршрути.

2. Prerender.io

Документация: https://prerender.io/documentation
Сложност: 2/10
Ефективност: 7/10

Преди да изпробваме Angular Universal, ние изпробвахме Prerender.io. Това определено е маршрутът с НАЙ-малкото караница. За да реализирате това по начин, който работи с ботове на Google и Bing, бяха необходими само няколко реда код и регистриране на сайта им за означение. И в този пример използваме сървър на Express Node:

var prerender = изисквам ('prerender-node'). set ('prerenderToken', 'YOUR_TOKEN');
prerender.crawlerUserAgents.push ( "Googlebot");
prerender.crawlerUserAgents.push ( "bingbot ');
prerender.crawlerUserAgents.push ( "Yandex ');
app.use (Предварително изобразяване);

Ако използвате Express / Node, не забравяйте да има линия app.use (предварителна подготовка) над вашия Express.static междинен софтуер, който може да обслужва вашата директория dist.

С prerender.io по същество ще направи същото с универсалния. Той ще кешира статичен html на вашите страници и ще ги обслужва до ботове на Google, когато те обхождат вашия сайт.

Така че е супер лесно и работи добре със СПА, но дали беше ефективен?

Професионалисти
- Много бързо настройване
- Безплатната версия може да кешира до 250 страници
- Резултатите от търсенето в google за нашите страници са според описанието, което сме задали в мета услугата

Против
- До колкото звучи 250 безплатни страници, кеширането може да се проведе на множество версии на вашия URL адрес (използвайки нашия сайт като пример) https://www.brewcrewlabs.com и https://brewcrewlabs.com. Следващият слой е 20 000 страници за $ 15 / месец.

3. Присъдата

Присъдата е, че Angular Universal просто още не е готов. Въпреки че може да има неща, които бихме могли да разгледаме, за да изострим нашето SEO, Prerender.io е просто по-опростен и ефективен. Ако не мислите да създавате изобилие от страници всяка седмица, Prerender.io може да бъде решение за вас. Въпреки че Angular Universal работи по някакъв начин, той изисква повече работа на краката, за да работи на същото ниво като Prerender.io. Може би просто не знаем тайния сос до Angular Universal - ако го направите, моля, уведомете ни за вашето преживяване!

Надявам се тази статия да помогне на всеки друг в подобна ситуация!