SEO Friendly АГР - ITNEXT

1. Адзінкавыя прымянення старонак і SEO
2. Даволі URL-адрасы
3. Sitemaps
4. кэшаванне
5. папярэдняя візуалізацыя
6. Side Rendering сервера

Пошук паляпшэнняў Engine Optimization можа быць вельмі карысна для ваджэння больш трафіку на маркетынг сайтаў, блогаў і іншых прыкладанняў. Але ўсё больш і больш з гэтых сайтаў / прыкладання будуюцца з выкарыстаннем адной старонкі прыкладання (СПАС), або сайтаў, якія візуалізуецца цалкам у браўзэры кліента.

Пошукавая аптымізацыя (SEO) з'яўляецца дысцыпліна засяроджаная на стварэнні вэб-сайтаў з'яўляюцца вышэй у арганічных вынікаў (аплачаныя ня) пошуку ў пошукавых сістэмах, такіх як Google, Bing і Yahoo. Яна таксама стала ўключаць сацыяльныя медыя, такія як Twitter, Facebook і Instagram. Аднак, SEO ўключае ў сябе больш, чым проста зрабіць пошук сяброўскай URL-адрасы і ключавыя словы і дадаць яго ў гэтых платформы. Яна ўключае ў сябе ўсе, ад таго, як вы спасылкі на ваш сайт, каб словы на саміх старонках, і мета-тэгах, якія вы ўключылі ў галаве. Па-самай справе, цэлыя кнігі былі напісаныя на гэтую тэму, і існуе кампанія толькі, каб дапамагчы вам з вашай SEO. Маючы гэта на ўвазе, большасць SEO канкрэтных тым не будуць ахоплены тут. Замест гэтага я спынюся ў асноўным на рэчы, якія вы можаце зрабіць у межах SPA з дапамогай JavaScript, каб зрабіць ваш сайт больш SEO дружалюбны. Google і Кіраўніцтва для вэб-майстроў Bing прадастаўляюць некаторыя простыя парады па SEO. Так паглядзіце на гэтыя рэсурсы, перш чым працягнуць.

рэкамендацыі для вэб-майстроў Google:

com/webmasters/answer/35769?hl=en> https://support.google.com/webmasters/answer/35769?hl=en

рэкамендацыі для вэб-майстроў Бінг:

https://www.bing.com/webmaster/help/webmaster-guidelines-30fba23a

Адзінкавыя прымянення старонак і SEO

АГР адрозніваецца ад традыцыйных вэб-сайтаў. У першыя дні ў Інтэрнэце, вэб-сайт быў проста HTML-файл, які быў пададзены з кампутара ў каледжы, ўрадавае ўстанова, або бізнес. Яны былі лёгка знайсці, таму што ўсё змесціва было ўбудоўваць непасрэдна ў гэты файл, гэтак жа, як чытанне дакумента ў тэкставым рэдактары. Яна мела выразную іерархію, гэтак жа, як дакумент таксама. Аб'ектная мадэль дакумента (DOM), які выкарыстоўвае вэб-сайт нават адлюстроўвае гэта. Напрыклад, <h1> праз тэгі <h6> з'яўляюцца загалоўкі, якія выкарыстоўваюцца для запуску часткі дакумента. Тэг <р> абзац, і, як правіла, некалькі абзацаў, якія змяшчаюць кантэнт у межах <раздзел>. І <табліца> выкарыстоўваецца для таблічных дадзеных. Калі Вам неабходная дадатковая інфармацыя пра самае HTML, чытайце MDN-х Ўвядзенне ў HTML , Для больш пра DOM, як узаемадзейнічаць з ім з дапамогай JavaScript чытання MDN-х Ўвядзенне ў DOM ,

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

Аднак, як асновы JavaScript становяцца ўсё больш распаўсюджанымі, вэб-сайты змяніліся яшчэ больш істотна. Такія функцыі, як бясконцая пракрутка, загрузка дадзеных у асінхронным рэжыме пасля таго, як HTML былі загружаныя з дапамогай Ajax і іншых бібліятэк XHR і візуалізацыі на баку кліента элементаў DOM абцяжарылі для пошукавых сістэм, каб сканаваць старонкі. АГР могуць нават абнаўляць цэлыя старонкі ніколі не робіць яшчэ адзін запыт на сервер або нават змены URL.

Цяпер АГР з'яўляецца звычайнай з'явай і пошукавыя сістэмы ведаюць, як выкарыстоўваць іх. Google стварыў і Microsoft прыняла Angular.js, Facebook зрабіў тое ж самае з React.js. Яны таксама мадэрнізаваны свае функцыі пошуку, каб мець магчымасць цалкам загружаць і сканаваць SPA. Але гэта зусім не азначае, што вы можаце проста пабудаваць адзін і проста адлюстроўвае яго ў пошукавых сістэмах. Не ўдаючыся ў асновы таго, як працуе SEO, вось некаторыя рэчы, якія вы можаце зрабіць, каб забяспечыць ваш SPA будзе працаваць з пошукавымі сістэмамі.

Даволі URL-адрасы

Шмат хто на баку кліента асяроддзя выкарыстоўваюць хэшаў (URL, якія ўтрымліваюць # такія, як HTTP (s): //www.example.com/#about) і hashbangs (HTTP (S): //www.example.com/# ключ = значэнне ) для апрацоўкі іх маршрутызацыі. Функцыянальна SPA паводзіць сябе так жа, як звычайны вэб-сайт. Змены URL і ўтрыманне абнаўляецца з дапамогай з дапамогай маршрутызатара JavaScript або іншых сродкаў. І нават калі вы маглі б падумаць, што робаты поўзаюць ваш сайт можа не клапаціцца, калі вы карыстаецеся хэш, карыстальнікі, якія выкарыстоўваюць ваш сайт будзе бачыць прыбіральнік шукае больш зручны URL без іх.

Акрамя таго, некаторыя сканары, такія як Google, інтэрпрэтаваць URL-адрас з hashbangs #! у якасці індыкатара, які з'яўляецца альтэрнатывай звычайнай URL-існуе, якая забяспечвае такое ж стан старонкі падчас загрузкі. Па гэтай прычыне рэкамендуецца выкарыстоўваць толькі хэш HTTP (S): //www.example.com/#/pagename або HTML5 стыль hashless маршрутаў, як HTTP (S): //www.example.com/pagename з выкарыстаннем такіх тэхналогій, як PushState. PushState спосаб змяніць URL-адрас, які адлюстроўваецца ў браўзэры праз JavaScript без перазагрузкі старонкі. Ён мяняе аб'ект гісторыі, як гэта: window.history.pushState (дадзеныя, «Назва старонкі», «/ новы URL"). Вы ў канчатковым выніку з даволі URL.

Іншым часта выкарыстоўваная URL трукам з'яўляецца радком запыту. Выкарыстанне радкі запыту для такіх рэчаў, як катэгорыі, тэрміны пошуку, і іншых параметраў цалкам прымальна. Ён можа быць выкарыстаны ў спалучэнні з любым з вышэйзгаданых метадаў маніпуляцыі URL. Пошукавыя сістэмы могуць дыферэнцавацца HTTP (S): //www.example.com/ катэгорыя = людзі з HTTP (S) :? //Www.example.com/ катэгорыі = аўтамабілі, асабліва калі кожны URL вызначаны і рэкамендуецца быць індэксуюцца ў вашай карты сайта.

Sitemaps

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

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

Для бота выкарыстоўваць карту сайта, вы павінны стварыць і размясціць файл з імем sitemap.xml. Змест і структура вашага sitemap.xml тут не разглядаецца. Больш падрабязна на Больш падрабязна пра Sitemaps - Пошук кансолі Дапамога ,

Калі ваш сайт статычны размяшчаюцца вы можаце проста размясціць sitemap.xml на каранёвым узроўні. Калі вы выкарыстоўваеце на боку сервера базы, такія як Экспрэс вы можаце размясціць файл, які так:

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

Сказаць боты аб файле карта сайта, вам трэба будзе спасылацца на яго ў файле robots.txt:

Пераканайцеся, што вы таксама служыць гэты файл у каранёвым каталогу, а таксама, або ў рамках, як Экспрэс:

Ці, калі вы выкарыстоўваеце express.static, проста змесціце яго ў агульнай тэчцы /. Ёсць шмат спосабаў зрабіць гэта, і гэта залежыць ад сервера (Apache, Nginx, экспрэс і г.д.).

Боты заўсёды будуць глядзець на каранёвай URL для гэтага файла. Пераканайцеся, што ён абслугоўваецца па адрасе (ы): //www.example.com/robots.txt.

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

кэшаванне

Яшчэ адзін просты спосаб, каб павялічыць ваш SEO, каб мець больш хуткае час загрузкі старонкі. Сучасныя вэб-сканеры клапаціцца пра час загрузкі і прыярытэтах хутчэй старонак з падобным зместам вышэй больш павольнымі. Паколькі фреймворк візуалізацыі пасля старонкі і ўсе актывы будуць загружаныя (часам нават чаканне на Ajax / XHR завяршэння выклікаў), то яны, як правіла, больш павольна, чым папярэдне аказаныя на боку сервера старонак. Я рэкамендую выкарыстоўваць Google, PageSpeed ​​Insights праверыць свае старонкі.

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

Калі вы размяшчае файлы ў статычнай тэчцы вы можаце проста выкарыстоўваць Express.static:

З іншага боку, калі вы карыстаецеся SendFile вы можаце ўсталяваць кэш там:

Пры размяшчэнні файлаў на CDN вы замест гэтага неабходна наладзіць правілы кэшавання там. Гэта рэкамендуецца для чыстых статычных старонак, і вы можаце паспрабаваць Amazon CloudFront, CloudFlare або іншага КДС. Але калі вы працуеце з вузлом, гэта можа быць вельмі лёгка і маштабуюцца рашэннем. Я рэкамендую глядзець больш у правілах ў Экспрэс 4.x - Даведачнае кіраўніцтва па API ,

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

см дакументацыя для канфігурацыі.

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

Ёсць некаторыя інструменты для папярэдняга рэндэрынгу старонкі перад адпраўкай кліенту. Гэта таксама паскарае час загрузкі, што павялічвае ваш SEO і агульны карыстацкі досвед. Пры такім падыходзе вы запускаеце прыкладанне перад разгортваннем, перахопліваць выснову старонкі і замяніць HTML-файлы з дапамогай гэтага захопленага высновы. Як правіла, гэта дасягаецца з дапамогай абезгалоўленага браўзэра (вэб-браўзэр без графічнага карыстацкага інтэрфейсу), такіх як PhantomJS.

Папярэдняя візуалізацыя з'яўляецца добрым выбарам, таму што няма ніякай дадатковай нагрузкі на сервер, і, такім чынам, хутчэй і танней, чым на боку сервера візуалізацыі. Акрамя таго, больш простая ўстаноўка вытворчасці і дазваляе пісаць больш просты код прыкладання (не трэба для ізаморфныя кода). Таму ён менш схільны памылак і можа быць лёгка кэшуюцца даўжэй. Акрамя таго, ён не патрабуе сервераў вытворчасці Node.js.

Папярэдняя візуалізацыя не заўсёды з'яўляецца добрым выбарам. Напрыклад, ён не вельмі добра працуе для старонак, якія адлюстроўваюць пастаянна зменлівыя дадзеныя, якія павінны быць загружаныя дынамічна падчас загрузкі, або для старонак, якія маюць змест канкрэтнага карыстальніка. Як правіла, старонкі, якія адказваюць гэтым патрабаванням, з'яўляюцца менш крытычнымі для папярэдняга рэндэрынг ў любым выпадку. Толькі часта выкарыстоўваюцца старонкі, якія вы хочаце, каб абслугоўваць хутка павінны быць папярэдне аказаны. У адваротным выпадку на баку сервера візуалізацыі (SSR) можа быць лепшым варыянтам. (Глядзіце наступны падзел для атрымання дадатковай інфармацыі аб ССР).

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

Папярэдне візуалізацыі убудова стварае асобнік PhantomJS і запускае прыкладанне. Затым яна прымае здымак DOM і выводзіць здымак на HTML-файл у тэчцы зборкі WebPack. Ён паўтарае гэты працэс для кожнага маршруту, так што гэта можа заняць некаторы час, каб пабудаваць дадатак, калі ў вас ёсць шмат старонак.

Вось просты прыклад простай канфігурацыі WebPack з дапамогай папярэдняга рэндэрынгу плагіна.

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

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

Калі вы хочаце, каб чакаць, пакуль пэўны падзея JavaScript ня абпальваюць на старонцы:

Затым у файле JavaScript адпраўка падзеі:

Замест гэтага, вы можаце пачакаць, пакуль канкрэтная элемент HTML не выяўляецца з document.querySelector.

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

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

Замест таго, каб гучна не здолець на памылкі JavaScript (па змаўчанні), вы можаце проста ігнараваць іх.

Для таго, каб змяніць шлях індэкснага файла, замест index.html па змаўчанні ў статычным корані:

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

Цяпер вы павінны прадухіліць PhantomJS ад навігацыі ад URL, перададзенага ёй і прадухіліць загрузку укаранёныя фрэймы (напрыклад Disqus і SoundCloud ўбудоўвае), якія не з'яўляюцца ідэальнымі для SEO і можа прывесці да памылак JavaScript.

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

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

Функцыя ў кантэксце аргумент ўтрымлівае два ўласцівасці:

• HTML - выніковы HTML пасля папярэдняга рэндэрынгу
• маршрут - маршрут у цяперашні час апрацоўваюцца (напрыклад, «/», «/ о» ці «/ кантакт»)

Усё, што вяртаецца будзе друкавацца на папярэдне аказаныя файл.

Выкарыстоўваючы гэты убудова дазволіць вам ствараць простую HTML-старонку з дапамогай любога JS бібліятэкі вы выкарыстоўваеце. Напрыклад, React, Ую, Кутняе, Бунт або любы іншы, які можа быць размешчаны ў дырэкторыі на серверы з дапамогай экспрэс або любы іншы сервер, які вы аддаеце перавагу.

Звярніце ўвагу, што папярэдні рэндэрынг убудова працуе толькі са стратэгіямі маршрутызацыі з выкарыстаннем HTML5 History API (PushState). Няма хэш (челок) URL-адрас не будзе працаваць, выкарыстоўваючы гэты метад. Таму пераканайцеся, што вы стварылі свой JS маршрутызатар выкарыстоўваць URL-адрасы, такія як HTTP (S): //www.example.com/contact. Акрамя таго, вы заўсёды павінны загрузіць SPA, калі DOM гатовы, паставіўшы тэг ўнутры падзеі DOM DOMContentLoaded.

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

Side Rendering сервера

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

Для атрымання дадатковай інфармацыі аб баку сервера Rendering з фреймворк, праверыць ReactDomServer і Vue боку сервера візуалізацыі , Акрамя таго, большасць іншых структур JS маюць рашэнні SSR ў цяперашні час. Напрыклад, два з маіх любімых рамак ССР NextJS і GatsbyJS , Акрамя таго, з дапамогай SSR шаблонны рухавічок для экспрэса заўсёды будзе працаваць і на самой справе тое, што мы робім для нашых Аўрэлій хатняя старонка. Мы ў цяперашні час з дапамогай MarkoJS для экспрэса якая простая ў выкарыстанні і вельмі хутка.

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