Зрабіце свой Кутняе App SEO-Friendly (Вуглавая 4 + Універсальная)

Калі вы аддаеце перавагу глядзець відэа ..
Атрымаць Project і хто бяжыць,
Стварэнне сервера прыкладанняў модуля
Стварэнне Server Express
Машынапіс Config Карэкціроўкі
Рэгуляванне запуску сцэнарыяў
ствараць кампаненты
Праграма ўстаноўкі Маршруты
Дадатак Шаблон Кампанент
Даданне Назвы і мета-тэгі для нашых кампанентаў
Аб кампаненце
Запусціць яго!
Прапусціць ручную наладу рэч

Github Repo для гэтага ўрока: наведайце РЭПО

Па змаўчанні, вуглавыя дадатку не дружалюбныя пошукавыя сістэмы. Калі паглядзець зыходны код старонкі ў браўзэры звычайнага вуглавога прыкладання, ён будзе паказваць толькі тое , што ўнутры рэгулярнага index.html - славутыя загрузкі .. змест. Каб выправіць гэта, нам трэба прыкладанне, каб быць аказаны на сэрвэры, а затым адлюстроўваецца на кліенце. Такім чынам, ваш кантэнт для кожнай старонкі (кожны кампанент) выплюнуць для браўзэра, і што выдатны Googlebot ўбачыць.

Але для пачаткоўца-Intermediate вуглавога распрацоўніка, тэма кутні SEO звычайна заблытаныя адзін. Хуткі пошук Google раскрыць састарэлую інфармацыю і навучальныя праграмы, якія больш не працуюць.

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

Такім чынам, давайце пачнем.

Калі вы аддаеце перавагу глядзець відэа ..

абавязкова Падпіска на афіцыйны канал Coursetro на Youtube больш дзіўным відэа.

Атрымаць Project і хто бяжыць,

Як звычайна, мы пачнем праект з кутняй CLI. Праверце нашы Бясплатны Кутняе курс калі вы пачатковец у CLI.

> Нг новы ang4-Сеа --routing> кд ang4-пошукавая аптымізацыя

--Routing сцяг будзе генераваць файл хуткіх маршрутаў і дадаць яго ў наша дадатак модуля.

Пасля таго, як мы ў новай тэчцы праекта, мы будзем выкарыстоўваць НПЕ для ўстаноўкі платформы-сервера, які неабходны для боку сервера візуалізацыі і генерацыі HTML-старонак. Мы таксама павінны ўсталяваць пакет анімацыі (новы Вуглавая v4), у адваротным выпадку ваша прыкладанне будзе прыводзіць да памылкі:

> NPM ўсталяваць --save @ кутні / платформу-сервер @ кутнюю / анімацыю

Далей мы накіруемся ў /src/app/app.module.ts і зрабіць невялікую карэкціроўку:

@NgModule ({заявы: [AppComponent], імпарт: [BrowserModule.withServerTransition ({APPID: 'ang4-Сеа-папярэдне'}), FormsModule, HttpModule], правайдэры: [], самазагрузкі: [AppComponent]})

Адзіная лінія, якая змяняецца з'яўляецца BrowserModule. Тут мы дадалі .withServerTransition , які прымае ў APPID , які размяркоўваецца паміж кліентам і серверам. .withServerTransition дазваляе ўніверсальным замяніць HTML ён генеруецца на сваім уласным.

Захавайце гэты файл.

Стварэнне сервера прыкладанняў модуля

Стварыце новы файл з імем /src/app/app.server.module.ts і ўставіць у наступным кодзе:

імпарт {NgModule} ад '@ кутні / ядро'; імпарт {ServerModule} ад '@ кутні / платформы-сервер'; імпарт {AppModule} ад './app.module'; імпарт {AppComponent} ад './app.component'; @NgModule ({імпарт: [ServerModule, AppModule], самазагрузкі: [AppComponent]}) экспарту клас AppServerModule {}

Гэта выкарыстоўваецца для пачатковай загрузкі прыкладання з сервера. Калі параўнаць яго з /src/app/app.module.ts, яны вельмі падобныя. Асноўны вынас тут з'яўляецца тое, што гэты модуль для сервера.

Стварэнне Server Express

Натуральна, нам патрэбен сервер, каб зрабіць прыкладанне перад адпраўкай яго кліенту. Такім чынам, стварыць новы файл з імем /src/server.ts і ўстаўце наступнае:

імпарт «адлюстроўвае-метададзеныя»; 'Zone.js / DIST / зона-вузел' імпарту; імпарт {platformServer, renderModuleFactory} ад '@ кутні / платформы сервера' імпарт {enableProdMode} ад '@ кутні / ядро' імпарт {AppServerModuleNgFactory} ад »../ dist / ngfactory / src / app / app.server.module.ngfactory 'імпарт * у якасці экспрэса ад "экспрэса"; імпарт {readFileSync} ад 'ФС'; імпарт {далучыцца} ад «шляху»; Const ПОРТ = 4000; enableProdMode (); Const прыкладанне = экспрэс (); хай шаблон = readFileSync (далучыцца (__ імя-каталога, '..', 'адлегласць', 'index.html')) ToString (). app.engine ( 'HTML', (_, параметры зваротнага выкліку) => {сопзЬ выбірае = {дакумент: шаблон, URL: options.req.url}; renderModuleFactory (AppServerModuleNgFactory, ОПТС) .Затем (HTML => зваротны выклік (нуль , HTML));}); app.set ( 'выгляд рухавіка', 'HTML'); app.set ( 'выгляд', 'ЦСІ') app.get ( '*. *', express.static (далучыцца (__ имя_директории, '..', 'адлегласць'))); app.get ( '*', (REQ, дазваляе в) => {res.render ( 'індэкс', {REQ});}); app.listen (PORT, () => {console.log ( `праслухоўвае HTTP: // лакальны: $ {PORT}`!);});

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

Але, сэрца то , што спецыфічныя для сервернага рэндэрынгу (Universal) тут з'яўляецца renderModuleFactory метад.

Ён прымае ў AppServerModuleNgFactory , што сервер генеруе пасля пабудовы праекта, які ўяўляе сабой скампіляваць Кутні прыкладанне:

імпарт {AppServerModuleNgFactory} ад '../dist/ngfactory/src/app/app.server.module.ngfactory'

Звярніце ўвагу , што ён знаходзіцца ў тэчцы стандарт / DIST , які генеруецца пасля выканання каманды НГ зборкі. Тады яна служыць як HTML.

Машынапіс Config Карэкціроўкі

Адкрыць /src/tsconfig.app.json і дадаць файл server.ts створаныя намі раней як выключэнне:

{ "Праходзіць": "../tsconfig.json", "compilerOptions": { "OutDir": "../out-tsc/app", "модуль": "es2015", "BaseUrl": "", " тыпы ": []}," якія выключаюць ": [" server.ts ", // Права тут" test.ts "," ** / * spec.ts ".]}

Затым адкрыйце /tysconfig.json і дадайце angularCompilerOptions:

{ "CompileOnSave": хлусня, "compilerOptions": { "OUTDIR": "./dist/out-tsc", "BaseUrl": "SRC", "sourceMap": праўда, "заяву": ілжывыя "moduleResolution": "вузел", "emitDecoratorMetadata": праўда, "experimentalDecorators": праўдзівыя, "мэтавыя": "ES5", "typeRoots": [ "node_modules / @ тыпаў"], "Lib": [ "es2016", "дом"] }, "angularCompilerOptions": {// Тут "Гендыр": "./dist/ngfactory", "entryModule": "./src/app/app.module#AppModule"}}

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

Рэгуляванне запуску сцэнарыяў

Ўнутры /package.json мы будзем карэктаваць ўласцівасць сцэнарыяў:

{// // Іншыя ўласцівасці выдаленыя для сцісласці // "сцэнарыяў": { "перадпускавыя": "НГ пабудаваць --prod && NGC", "старт": "TS-вузла SRC / server.ts"}, // / / Іншыя ўласцівасці выдаленыя для сцісласці //}

Мы дадаем папярэдне перад камандай запуску для першага запуску НГ зборкі --prod && Ngc каманды. Пасля гэтага ён запускае сервер , заснаваны на нашым server.ts канфігурацыі.

Цяпер вы можаце выканаць наступную каманду ў кансолі, каб запусціць прыкладанне!

> Старт НПМ прабег

Калі ўсё пойдзе гладка, то выхад будзе выглядаць прыкладна так:

> [email protected] PRESTART C: \ Users \ Гэры \ код \ ang4-Сеа-да> НГ зборкі --prod && Hash NGC: 831974a6aced5d532e0d Час: 6395ms порцый {0} polyfills.6ce0bf58446ef5c2585b.bundle.js (polyfills) 157 кБ {4} [першапачатковы] [вынесена] кавалак {1} main.94206ad8fdce0f306470.bundle.js (асноўныя) 21.3 кБ {3} [першапачатковы] [вынесена] кавалак {2} styles.d41d8cd98f00b204e980.bundle.css (стылі) 69 байт {4} [першапачатковы] [вынесена] кавалак {3} vendor.20c071d0dcfbd58f1c48.bundle.js (пастаўшчык) 1.1 MB [пачатковы] [вынесена] кавалак {4} inline.6729d86a888b9e64ae89.bundle.js (убудаваны) 0 байт [запіс] [вынесена]> [email protected] запусціць C: \ Users \ Гэры \ код \ ang4-Сеа-пре> TS-вузел SRC / server.ts праслухоўвае HTTP: // лакальны: 4000!

Калі вы наведаеце HTTP: // лакальны: 4000 ў браўзэры, вы можаце прагледзець зыходны код старонкі і цяпер крыніца фактычна паказвае прыкладанне працуе! калі яна, як правіла , паказвае Загрузку па змаўчанні .. тэкст , пэўны ў index.html.

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

ствараць кампаненты

Выкарыстанне каманднага радка для стварэння кампанентаў лёгка, але пры запуску стандартнай каманды, такія як НГ дс дома, вы можаце сутыкнуцца з памылкай:

> Нг дс дома ўстаноўка кампанента Памылка размяшчэння модуля для дэкларацыі SilentError: некалькі файлаў модуляў знойдзена:

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

> Нг дс дома --module = app.module.ts> НГ дс аб --module = app.module.ts

Праграма ўстаноўкі Маршруты

Давайце скакаць у /src/app/app-routing.module.ts файл , што CLI генераванага з --routing сцягам:

імпарт {NgModule} ад '@ кутні / ядро'; імпарт {Маршруты, RouterModule} ад '@ кутні / маршрутызатар'; імпарт {AboutComponent} ад './about/about.component'; імпарт {HomeComponent} ад './home/home.component'; канстантнасцю маршруты: Маршруты = [{шлях: '', кампанент: HomeComponent}, {шлях: 'аб', кампанент: AboutComponent}]; @NgModule ({імпарт: [RouterModule.forRoot (маршруты)], экспарт: [RouterModule]}) экспарту клас AppRoutingModule {}

Тут мы імпартаванне нашай Аб і Home кампаненты , якія мы толькі што згенераванай, і мы дадамо іх адзін да маршрутах.

Дадатак Шаблон Кампанент

Наведаем файл /src/app.component.html і змяніць яго да гэтага:

<UL> <li> <a routerLink="/"> Галоўная </a> </ li> <li> <a routerLink="about"> Аб </a> </ li> </ UL> <router- разетка> </ маршрутызатар-разетка>

Мы ствараем навігацыю з маршрутызатарам-выхадам для нашага дома і аб кампанентах.

Даданне Назвы і мета-тэгі для нашых кампанентаў

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

У /src/app/home/home.component.ts імпартаваць да верху:

імпарт {Meta, Title} з "@ кутні / платформы-браўзэра";

Затым, у канструктару:

экспарт клас HomeComponent рэалізуе OnInit {канструктар (мета: Мета, назва: Назва) {title.setTitle ( 'Мой Spiffy Галоўная старонка'); meta.addTags ([{імя: 'аўтар', змест: 'Coursetro.com'}, {імя: 'ключавыя словы' змест: 'кутняя Сеа, кутняя 4 універсальная, і г.д.'}, {імя: 'апісанне', змест : 'Гэта мая Вуглавая SEO асновы App, атрымлівайце асалоду ад!'}]); } NgOnInit () {}}

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

Захавайце яго.

Аб кампаненце

Зараз, мы будзем паўтараць той жа самы дакладны працэс вышэй для файла /src/app/about/about.component.ts. Проста пераканайцеся, што змяніць загаловак і мета-тэгі, што-то унікальнае, так што мы можам убачыць іх змяніць на імгненне.

Давайце таксама трохі змяніць шаблон ў /src/app/about/about.component.html:

<Р> І гэта маё прыгожае апісанне, якое я хачу Google, каб убачыць! </ P>

Запусціць яго!

Наведайце кансолі, Ctrl-C, калі сервер працягвае працаваць , а затым запусціць:

> Старт НПМ прабег

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

Затым націсніце на спасылку пра і праверыць зыходны код старонкі зноў. Вала!

Спадзяюся, што гэты артыкул дапамагла вам зусім няшмат і паставіць вас на шляху да SEO поспеху.

Гэта кіраўніцтва ў значнай ступені заснавана на прыклад знаходзіцца тут , Аднак, не было якіх-небудзь тлумачэнняў. Прэстыжнасць Эвертана Раберта Auler хоць!

Прапусціць ручную наладу рэч

Праект, які я толькі што стварыў, можа быць кланаваная ў Github. проста перайдзіце па гэтай спасылцы і вы можаце быць п »працуе хутка!