Блог уютное место для бесед Обратно в студию

Сышышь ты, выходи сюда,
поговорим !

Як зробити свій Angular 4 додаток SEO дружнім

  1. Початок роботи з створенням нашого Angular 4 додатка SEO дружнього
  2. Налаштування нашого тестового додатка Angular 4
  3. Створення Angular 4 застосування SEO дружніх
  4. Тестування нашої SEO дружньої програми Angular 4
  5. Висновок

Кутові 4 додатки завантажують перший вміст HTML перед тим, як потягнути вміст HTML для сторінки, що завантажується за допомогою XMLHttpRequest. Програми для однієї сторінки приголомшливі! Вони швидко завантажуються і дають вам великий контроль над тим, як ви хочете, щоб ваша програма працювала. Вони проаналізовані браузером і таким чином ви маєте контроль над елементами DOM і всім цим добром.

Тим не менш, СПА не є SEO дружніми від битою, тому що вони повинні динамічно змінювати мета-теги і вміст за допомогою JavaScript, і ця зміна зазвичай не підбирається ботом пошукової системи. Оскільки деякі пошукові роботи не можуть розібрати JavaScript під час сканування веб-сайту, вони бачитимуть лише перший вміст кожного разу.

Хоча Google говорить їхні боти тепер здатні виводити JavaScript, він все ще є невизначеною областю, і помилка на стороні обережності буде кращим способом піти в цьому питанні. Також є інші пошукові системи, які не працюють з JavaScript. Ця стаття буде розповідати про те, як зробити вашу програму Angular 4 SEO дружньою і, таким чином, простіше споживати ботами пошукових систем.

And Це не підручник з Angular 4, і ми не будемо охоплювати специфіку в рамках Angular 4. Ми просто покажемо вам, як використовувати рендеринг на сервері для обслуговування повністю створеної HTML-сторінки.

Початок роботи з створенням нашого Angular 4 додатка SEO дружнього

Перш ніж розпочати навчання, давайте створимо просте додаток, яке буде використано для перевірки нашої реалізації. Програма буде сторінкою, на якій буде перелік груп тем на домашній сторінці. Ми не будемо підключатися до будь-якого джерела даних, але замість цього ми будемо жорстко кодувати дані в компонент.

Налаштування нашого тестового додатка Angular 4

Щоб налаштувати наше Angular додаток, ми будемо використовувати ng-cli , і ми будемо викликати додаток Blogist .

Створення нової програми за допомогою ng-cli
Для налаштування ми будемо використовувати команду ng new для створення програми Angular 4.

$ ng new Blogist

: Примітка: Для правильного функціонування цієї програми вам знадобиться остання версія Angular CLI. Остання версія є 1.3.x як на момент написання цієї статті.

Далі, ми просто створимо компонент, де ми зможемо додати логіку нашого коду. Для цього скористаємося командою ng g компонента:

$ ng g компонент ./blog/posts

Додавання макетних даних до нашого PostComponent
Для стислості ми не будемо підключатися до зовнішнього API. Замість цього, ми просто створимо деякі макетні дані та використовуємо ці дані в нашій програмі.

Відкрийте файл ./src/app/blog/posts.component.ts, ми додамо логіку до коду, щоб переконатися, що він працює так, як ми хочемо. По-перше, давайте затвердимо деякі дані до файлу. Додайте новий компонент до методу postsData.

private postsData () {return [{"title": "Створення Angular.js в реальному часі з Websockets по мармуру", "pubDate": "2017-08-23 14:41:52", "посилання": "https: // blog.pusher.com/making-angular-js-realtime-with-pusher/#comment-10372 "," guid ":" http://blog.pusher.com/?p=682#comment-10372 "," author ":" marble "," thumbnail ":" "," description ":" завжди великий шанувальник посилань на блогерів, яким я користуюся, але не отримую великого посилання "", "content": "<p> завжди великий шанувальник посилань на блогерів, які мені подобаються, але не отримують величезного посилання з </p> "," enclosure ": []," categories ": []}, {" title ":" Making Angular .js в реальному часі з Websockets за допомогою ремінця без бретелей "," pubDate ":" 2017-08-23 05:05:08 "," посилання ":" https://blog.pusher.com/making-angular-js-realtime -with-pusher / # comment-10371 "," guid ":" http://blog.pusher.com/?p=682#comment-10371 "," автор ":" без бретелей "," мініатюра ": "", "description": "дуже багато інтернет-сайтів, які піддаються деталізації нижче, з нашої точки зору безсумнівно, належним чином варто перевірити "," вміст ":" <p> дуже багато веб-сайтів, які піддаються деталізації нижче, з нашої точки зору, безумовно, належним чином варто перевірити </p> "," enclosure ": [], "categories": []}, {"title": "Створення Angular.js в реальному часі за допомогою Websockets за допомогою обмежень" "," pubDate ":" 2017-08-22 17:09:17 "," link ": "https://blog.pusher.com/making-angular-js-realtime-with-pusher/#comment-10370", "guid": "http://blog.pusher.com/?p=682#comment -10370 "," автор ":" обмеження зв'язків "," мініатюра ":" "," опис ":" дуже багато веб-сайтів, які знаходяться на глибині нижче, з нашої точки зору, безумовно, належним чином варто перевірити " , "content": "<p> дуже багато веб-сайтів, які знаходяться на глибині нижче, з нашої точки зору, безумовно, варто перевірити </p>", "enclosure": [], "categories": []}]; }

Щоб скористатися нашими макетними даними, створеними вище, замініть метод конструктора класу PostComponent кодом нижче:

публічні повідомлення; constructor () {this.posts = this.postsData (); }

У наведеному вище коді ми просто привласнили властивість повідомлень значення, яке повертає postsData, яке є нашою відповіддю на виклик API.

Створення перегляду для нашого повідомленняComponent
Тепер, коли ми маємо дані про насмішки повідомлень. Ми створимо вигляд, який буде відображати всі публікації з наших макетних даних.

Відкрийте перегляд ./app/blog/posts.component.html і введіть код нижче:

<div class = "jumbotron"> <h1> Блоґіст </h1> <p> Це найкращий ресурс для найкращих посад веб-розробки. </p> </div> <div class = "row"> <div class = "col-xs-12 col-md-12"> <ul class = "список-група"> <li class = "list-group-item" * ngFor = "додати повідомлення"> <h4> {{ post.title}} </h4> </li> </ul> </div> </div>

Наведений вище код просто приймає дані повідомлень і цикли через нього; кожного разу відображаючи назву повідомлення.

Потім відкрийте файл index.html і в <head> змініть вміст наступним кодом. Вона в основному використовує Bootstrap і додає пусту панель навігації:

<! doctype html> <html lang = "uk"> <head> <meta charset = "utf-8"> <title> блог </title> <база даних href = "/"> вміст <meta name = "viewport" = "width = device-width, initial-scale = 1"> <link rel = "icon" type = "image / x-icon" href = "favicon.ico"> <link rel = "stylesheet" href = "https : //cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css "> </head> <body> <nav class =" navbar navbar-default "> <div class = "container-fluid"> <div class = "navbar-header"> <a class="navbar-brand" href="#"> Блогер </a> </div> <ul class = "nav navbar- nav "> <li class =" active "> <a href="#"> Повідомлення </a> </li> <li> <a href="#"> Веб-розробка </a> </li> < li> <a href="#"> Графічний дизайн </a> </li> </ul> </div> </nav> <div class = "container"> <app-root> Завантаження ... < / app-root> </div> </body> </html>

Зареєструйте PostsComponent з нашим прикладним модулем
Наступне, що ми зробимо, це зареєструвати PostComponent за допомогою нашого прикладного модуля.

Using Примітка за допомогою команди ** ng g component ** автоматично реєструє компонент у вашому прикладному модулі. Таким чином, вам не доведеться робити це знову. Якщо це було зроблено для вас, ви можете пропустити цей крок.

Якщо він не був зареєстрований автоматично, відкрийте файл ./src/app/app.module.ts та імпортуйте компонент PostComponent:

імпортувати {PostsComponent} з "./blog/posts.component";

Потім у масиві NgModule оголошень додайте до списку PostComponent:

@NgModule ({декларації: [... Посткомпонент,], ...})

Відображення програми Angular
Після реєстрації нашого компонента Повідомлення ми включимо його у наш файл ./src/app/app.component.html, щоб відобразити компонент повідомлень. Відкрийте файл ./src/app/app.component.html та додайте в нього наступний код:

<додавання> </app-posts>

Це все!

Тепер, коли ви запустите ng-службу і перейдіть до URL-адреси, наданої вам на вашому терміналі. Ви повинні бачити сторінку з нашими повідомленнями:

Великий, це саме те, що ми очікували. Однак, коли ви переглядаєте джерело URL-адреси, ви помітите, що відсутнє все тіло сторінки і видно лише частину <app-root> завантаження ... </app-root>.

Це пояснюється способом роботи кутового. Спочатку він завантажував батьківський шаблон, а потім після цього сам завантажувався.

Потім він почне процес маніпулювання DOM, який вставить вміст кожної наступної сторінки в тег <app-root>.

Таким чином, коли пошуковий бот запитує цю сторінку, він отримує HTML <app-root> Loading ... </app-root> вище, а вміст сторінки, який повинен був сприяти SEO, тепер невідомий для движка.

Створення Angular 4 застосування SEO дружніх

Тепер, коли ми побудували приклад програми, ми бачимо, що відразу він не є SEO-дружнім. Таким чином, ми будемо використовувати Angular універсальний сервер платформи для попередньої візуалізації на серверній стороні шаблонів і виконувати те, що при завантаженні сторінки.

Проект Angular Universal складається з API базової платформи та навколишніх інструментів, які дозволяють розробникам робити рендеринг на стороні сервера (або попередній рендерінг) Angular-додатків.

Для початку ми встановимо пакет angular / platform-server і пакет angular / animations. Для того, щоб сервер платформи працював належним чином, потрібні обидва. Сервер платформи буде надавати серверну візуалізацію.

Запустіть команду нижче у вашому терміналі, щоб встановити залежності, необхідні для рендеринга на сервері Angular:

$ npm install --save @ angular / platform-server @ angular / animations

Після успішного встановлення пакунків за допомогою NPM відкрийте ./src/app.modules.ts і внесіть наступні зміни до оголошення BrowserModule:

@NgModule ({... імпортується: [BrowserModule.withServerTransition ({appId: 'blogist'})], ...})

У наведеному вище коді ми додавали метод withServerTransition до BrowserModule і там ми передавали appId, що дорівнює імені блога програми. Це доповнення "налаштовує додаток, засноване на браузері, на переході з додатка, що відображається на сервері, якщо він присутній на сторінці".

Наступне, що ми зробимо, - створити модуль сервера додатків. Створіть новий файл ./src/app/app-server.module.ts

імпортувати {NgModule} з '@ angular / core'; імпортувати {AppModule} з "./app.module"; імпортувати {AppComponent} з "./app.component"; імпортувати {ServerModule} з '@ angular / platform-server'; @NgModule ({імпортує: [ServerModule, AppModule,], bootstrap: [AppComponent]}) клас експорту AppServerModule {}

Це основний модуль Angular, який буде діяти як наш серверний модуль. Найбільше, що слід зазначити в вищезазначеному, є те, що ми імпортуємо наш AppModule в серверний модуль, тому він тепер стане частиною AppServerModule. Цей модуль буде, де ми будемо завантажувати нашу програму з сервера.

Додавання назви та мета-тегів до нашої програми Angular
Останнє, що ми додамо до програми, це підтримка мета-тегів і заголовка на кожній сторінці. За допомогою Angular universal, робити це дуже просто.

Відкрийте файл ./src/app/blog/posts.component.ts і всередині:

Імпортуйте мета та назву з пакета @ angular / platform-browser:

імпортувати {Meta, Title} з '@ angular / platform-browser';

Тепер у методі конструктора додайте до нього наступні рядки коду:

конструктор (meta: Meta, title: Title) {this.posts = this.postsData (); // Встановлює <title> </title> title.setTitle ('Blogist'); // Встановлює тег <meta> для сторінки meta.addTags ([{name: 'author', content: 'Blogist'}, {name: 'description', content: 'Це опис.'},]) ; }

Наведений вище код дозволяє встановити назву для кожної зі сторінок, які ви створюєте, і вони будуть попередньо відображатися за допомогою Angular Universal. Це дозволяє краще контролювати мета і назву різних сторінок.

Створення Експрес-сервера, щоб зробити ваш Angular додаток SEO дружнім
Створимо Express-сервер. Це, в основному, дозволить візуалізацію сторінки на стороні сервера.

Створіть новий файл у ./src/server.ts, а потім додайте вміст нижче:

імпортувати "reflection-metadata"; імпортувати "zone.js / dist / zone-node"; імпортувати {renderModuleFactory} з '@ angular / platform-server' імпортувати {enableProdMode} з '@ angular / core' імпорту * як експрес з 'express'; імпортувати з 'шляху'; імпортувати {readFileSync} з 'fs'; import {AppServerModuleNgFactory} з '../dist/ngfactory/src/app/app-server.module.ngfactory' enableProdMode () const PORT = process.env.PORT || 4000 const DIST_DIR = join (__ dirname, '..', 'dist') const app = express (); const template = readFileSync (join (DIST_DIR, 'index.html')) toString () app.engine ('html', (_, опції, callback) => {const newOptions = {документ: шаблон, url: параметри. req.url}; renderModuleFactory (AppServerModuleNgFactory, newOptions). потім (html => callback (null, html))}) app.set ('views', 'src') app.set ('view engine', 'html'). ) app.get ('*. *', express.static (DIST_DIR)) app.get ('*', (req, res) => {додаток res.render ('index', {req})}). listen (PORT, () => {console.log (`App слухає http: // localhost: $ {PORT}!))));

У цьому файлі ми імпортували всі необхідні пакунки для запуску нашого Експрес-сервера. Зокрема, ми імпортуємо AppServerModuleNgFactory, файл, який ще не існує, але буде згенеровано під час нашого процесу складання.

Далі, ми включимоProdMode (), який просто дозволяє режим виробництва на нашому додатку. Ми також використовуємо [renderModuleFactory] (https://angular.io/api/platform-server/renderModuleFactory) для аналізу HTML і візуалізації сторінки, що завантажувалася на стороні сервера. Кожна річ в коді має відношення до Express.

Наступне, що ми хочемо зробити зараз, - відкрити файл ./src/tsconfig.app.json і додати server.ts до розділу виключити файл.

"виключити": ["server.ts", ...]

Specif Властивість exclude визначає список файлів, які будуть виключені з компіляції.

Також відкрийте файл ./tsconfig.json і додайте фрагмент нижче до файлу в корені проекту безпосередньо під властивістю compilerOptions:

... "lib": ["es2016", "dom"]}, "angularCompilerOptions": {"genDir": "./dist/ngfactory", "entryModule": "./src/app/app.module# AppModule "}}

D GenDir - це те місце, де генерується все, що відбувається. Модуль entryModule приймає шлях до нашого основного завантажуваного модуля. #AppModule в кінці шляху є ім'ям експортованого класу.

Останнім кроком є ​​оновлення властивості scripts у нашому файлі ./package.json. Ви повинні замінити або додати це до ключів, які вже є у властивості scripts:

{... "скрипти": {"prestart": "ng build --prod && ./node_modules/.bin/ngc", "start": "ts-node src / server.ts"}, ...}

У файлі ./package.json є команди, зареєстровані до початкових і попередніх скриптів. Оскільки ми додали початок до імені, він буде запускатися автоматично перед викликом стартового сценарію.

Тестування нашої SEO дружньої програми Angular 4

Після завершення внесення цих змін до програми перейдіть до терміналу та виконайте таку команду:

$ npm запуску

Це запускає передстартовий скрипт, який містить команди ng build --prod && ./node_modules/.bin/ngc, а потім запустіть запуск сценарію, який містить команду ts-node src / server.ts. Після завершення виконання команд ви повинні побачити вихідний сигнал, близький до цього на вашому терміналі:

Коли ви відвідуєте сторінку, ви все одно повинні бачити той самий вихід, який ви бачили раніше. Однак, коли ви переглядаєте джерело, ви повинні побачити повністю виведений HTML. Це буде, як боти пошукової системи побачать сторінку.

Висновок

У цій статті ми дослідили, як зробити свій Angular 4 Single Page Application (SPA) SEO дружним за допомогою Angular 4 Universal. Будемо сподіватися, що ви дізналися чи щось, і страх поганої SEO оптимізації не зупинить вас від використання Angular 4 для ваших додатків.

Вихідний код цієї програми можна знайти на GitHub . Зірвати та залишити відгук, питання або коментарі. Якщо у вас також є якісь питання, не соромтеся залишити їх нижче.

Com/?
Com/?
Com/?