AngularJS SEO з Prerender.io

  1. Праблема
  2. Рашэнне
  3. Што мы будзем будаваць
  4. Як гэта працуе
  5. Аб Prerender.io
  6. Настройка вузла package.json
  7. Настройка вузла server.js
  8. Галоўная старонка index.html
  9. Angular Setup app.js
  10. Так што ж адбываецца?
  11. Пераканаўшыся, што гэта спрацавала
  12. Папярэджанні
  13. Выснова

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

Адзін з памылак выкарыстання AngularJS (на дадзены момант) - аптымізацыя пошукавых сістэм (SEO). У гэтым кіраўніцтве мы разгледзім, як зрабіць ваш сайт AngularJS або прыкладанне сканаваным Google.

Праблема

Пералётныя пошукавыя сістэмы (або ботаў) былі першапачаткова распрацаваны для сканавання зместу HTML вэб-старонак. Па меры развіцця Інтэрнэту, тэхналогіі, якія падтрымліваюць вэб-сайты і JavaScript, сталі фактычна мовай сеткі. AJAX дазволіла асінхронныя аперацыі ў Інтэрнэце. AngularJS цалкам ахоплівае асінхронную мадэль, і гэта стварае праблемы для сканараў Google.

[ ] [1]

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

Рашэнне

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

Што мы будзем будаваць

Наша дадатак зможа аказваць Google Bot і ўсе яго сябры (Bing bot). Такім чынам, мы не сутыкнемся з праблемай, паказанай на малюнку вышэй. Мы атрымаем добрыя вынікі пошуку, як чакаюць ад нас карыстальнікі.

[ ] [2]

Як гэта працуе

  • Калі сканер пошукавай сістэмы наведвае ваша прыкладанне і ўбачыць <meta name = "fragment" content = "!&quot;> Ён дадасць тэгі? _Escaped_fragment_ = да вашага URL.

  • Ваш сервер будзе перахапіць гэты запыт і адправіць яго ў прамежкавую праграму, якая будзе апрацоўваць спецыяльны запыт гусенічнага сканэра. Для гэтага артыкула мы абралі Prerender.io, так што наступны крок адносіцца да Prerender.io.

  • Prerender.io правярае, ці ёсць у запытанай старонкі існуючы здымак (ці кэшаваная старонка), а калі яна адбудзецца, ён будзе абслугоўваць гэтую старонку сканеру, калі гэтага не адбудзецца, Prerender будзе тэлефанаваць у PhantomJS, які будзе аказваць старонка ў поўным аб'ёме і паказаць яго на гусенічным.

  • Старонак без кэшавання, якія патрабуюць выкліку ў PhantomJS, зойме больш часу, каб зрабіць яго больш працяглым, і таму часта кэшуйце старонкі.
  • Ёсць дадатковыя спосабы зрабіць гэта!
Альтэрнатывы :
  • Наладзьце ўласную паслугу Prerender з дапамогай адкрытага кода Prerender.io
  • Выкарыстоўвайце іншы існуючы сэрвіс, напрыклад, BromBone , Seo.js ці SEO4AJAX
  • Стварыце свой уласны сэрвіс для аказання і абслугоўвання здымак для пошукавых сістэм

Аб Prerender.io

Prerender.io Гэта паслуга, сумяшчальная на розных платформах, уключаючы Node, PHP і Ruby. Служба цалкам з адкрытым зыходным кодам, але яны прапануюць хостынг-рашэнне, калі вы не жадаеце прайсці праз складанасці наладкі ўласнага сервера для SEO. Людзі з Prerender лічаць, што SEO - гэта права, а не прывілей, і яны зрабілі вялікую працу, пашыраючы сваё рашэнне, дадаўшы мноства наладжвальных функцый і убудоў.

Настройка вузла package.json

Мы будзем будаваць простае прыкладанне Node / AngularJS, якое мае некалькі старонак з дынамічным зместам, якія праходзяць па ўсім. Мы будзем выкарыстоўваць Node.js як наш бэкэнд-сервер з Express. Праверце файл Node package.json ніжэй, каб убачыць усе нашы залежнасці ад гэтага кіраўніцтва. Як толькі вы будзеце гатовыя, падпішыцеся бясплатна prerender.io ўліковы запіс і атрымаць ваш маркер.

// package.json {"name": "Angular-SEO-Prerender", "description": "...", "version": "0.0.1", "private": "true", "dependencies": {"express": "latest", "prerender-node": "latest"}}

Цяпер, калі ў нас гатовы пакет package.json, давайце ўсталюем нашы залежнасці ад вузла, выкарыстоўваючы npm install.

Настройка вузла server.js

Устаноўка тут даволі стандартная. У нашым файле server.js нам спатрэбіцца паслуга Prerender і падключыцца да яе з дапамогай нашага маркера prerender.

// server.js var express = require ('express'); var app = module.exports = express (); app.configure (function () {// Тут мы патрабуем папярэдняга праграмнага забеспячэння prerender, які будзе апрацоўваць запыты ад сканараў пошукавай сістэмы // Мы ўсталёўваем маркер толькі ў тым выпадку, калі мы выкарыстоўваем паслугу Prerender.io app.use (require ('prerender- вузел '). set (' prerenderToken ',' YOUR-TOKEN-HERE ')); app.use (express.static ("public")); app.use (app.router);}); // Гэта забяспечыць перадачу ўсіх маршрутаў у AngularJS app.get ('*', function (req, res) {res.sendfile ('./ public / index.html');}); app.listen (8081); console.log ("Go Prerender Go!");

Галоўная старонка index.html

Галоўная старонка таксама вельмі стандартная. Напішыце свой код, як звычайна. Вялікае змяненне тут будзе проста дадаць <meta name = "fragment" content = "!"> У <head> вашай старонкі. Гэты мета-тэг пакажа сканеры пошукавай сістэмы, што гэта сайт, які мае дынамічнае змесціва JavaScript, які неабходна сканаваць.

Акрамя таго, калі ваша старонка няправільна кэшуецца, альбо адсутнічае змесціва, вы можаце дадаць наступны фрагмент сцэнара: window.prerenderReady = false; які пакажа службе Prerender пачакаць, пакуль уся старонка будзе цалкам адлюстравана перад здымак. Вам спатрэбіцца ўсталяваць window.prerenderReady = true, калі вы ўпэўнены, што змесціва завяршыла загрузку. Існуе вялікая верагоднасць таго, што вам не трэба будзе ўключаць гэты фрагмент, але варыянт ёсць, калі вам гэта трэба.

Вось і ўсё! Калі ласка, глядзіце код ніжэй для атрымання дадатковых каментарыяў.

<! - index.html -> <! doctype html> <! - Мы створым mainController і прывяжам яго да HTML, які дасць нам доступ да ўсяго DOM -> <html ng-app = "prerender- падручнік "ng-controller =" mainController "> <head> <meta name =" fragment "content ="! "> <! - Мы вызначаем SEO-зменныя, якія мы хочам дынамічна абнаўляць -> <title> Падручнік па Scotch | {{seo.pageTitle}} </title> <meta name = "description" content = "{{seo.metaDescription}}"> <! - CSS -> <link rel = "styleheet" type = "text / css "href =" / акты / bootstrap.min.css "> <style> body {margin-top: 60px; } </style> <! - JS -> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"> </script> < script src = "http://code.angularjs.org/1.2.10/angular-route.min.js"> </script> <script src = "/ app.js"> </script> </head> <body> <div class = "container"> <! - NAVIGATION BAR -> <div class = "bs-example bs-navbar-top-example"> <nav class = "navbar navbar-default navbar-fixed-- top "> <div class =" navbar-header "> <a class="navbar-brand" href="/"> Падручнік для кутняга пераключэння SEO </a> </div> <ul class =" nav navbar-nav " > <li> <a href="/"> Галоўная </a> </li> <li> <a href="/about"> Аб </a> </li> <li> <a href = " / features "> Асаблівасці </a> </li> </ul> </nav> </div> <h1 class =" text-center "> Сардэчна запрашаем у навучальны дапаможнік SEO для Prerender </h1> <! - дзе мы ўвядзем дадзеныя шаблона -> <div ng-view> </div> </div> </body> </html>

Angular Setup app.js

У нашым app.js, старонцы, дзе мы вызначаем наш код AngularJS, нам трэба будзе дадаць гэты код у нашу config config: $ locationProvider.hashPrefix ('!') ;. Гэты метад зменіць спосаб напісання вашага URL.

Калі вы выкарыстоўваеце html5Mode, вы не ўбачыце ніякай розніцы, у адваротным выпадку вашы URL-адрасы будуць выглядаць http: // localhost: 3000 / #! / Home у параўнанні са стандартным http: // localhost: 3000 / # / home.

Гэта #! у вашым URL-адрасе вельмі важна, бо менавіта тое, што папярэдзіць сканараў, што ваша дадатак мае ўтрыманне AJAX, і што ён павінен рабіць гэта магія сканавання AJAX.

// app.js var app = angular.module ('prerender-tutorial', ['ngRoute']) .config (функцыя ($ routeProvider, $ locationProvider) {$ routeProvider.when ('/', {templateUrl: 'views) /homeView.html ', кантролер:' homeController '}) $ routeProvider.when (' / about ', {templateUrl:' /views/aboutView.html ', кантролер:' aboutController '}) $ routeProvider.when (' / features) ', {templateUrl:' /views/featuresView.html ', кантролер:' featuresController '}) $ routeProvider.otherwise ({redirectTo:' / '}); $ locationProvider.html5Mode (праўда); $ locationProvider.hashPrefix ('! ');}); function mainController ($ scope) {// Мы будзем ствараць seo-зменную для вобласці і вырашаем, у якія палі мы хочам запоўніць $ scope.seo = {pageTitle: '', pageDescription: ''}; } function homeController ($ scope) {// Для гэтага кіраўніцтва мы проста будзем атрымліваць доступ да зменнай $ scope.seo з галоўнага кантролера і запоўніць яго зместам. // Акрамя таго, вы можаце стварыць паслугу для абнаўлення зменных SEO - але гэта для іншага падручніка. $ scope. $ parent.seo = {pageTitle: 'AngularJS SEO Tutorial', pageDescripton: 'Сардэчна запрашаем у наш падручнік па атрыманні вэб-сайтаў і прыкладанняў AngularJS, праіндэксаваных Google.' }; } функцыя aboutController ($ scope) {$ scope. $ parent.seo = {pageTitle: 'Аб', pageDescripton: 'Мы з'яўляемся цяжкім утрыманнем сайта, таму нам трэба праіндэксаваць.' }; } function featuresController ($ scope) {$ scope. $ parent.seo = {pageTitle: 'Асаблівасці', pageDescripton: 'Праверце некаторыя з нашых дзіўных магчымасцяў!' }; }

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

Так што ж адбываецца?

Калі сканер наведвае вашу старонку па адрасе http: // localhost: 3000 / #! / Home, URL будзе пераўтвораны ў http: // localhost: 3000 /? <em> escaped_fragment </em> = / home, як толькі Prerender праграмнае забеспячэнне бачыць гэты тып URL, ён будзе тэлефанаваць у службу Prerender. Акрамя таго, калі вы выкарыстоўваеце HTML5mode, калі сканер наведвае вашу старонку па адрасе http: // localhost: 3000 / home, URL будзе пераўтвораны ў http: // localhost: 3000 / home /? <em> escaped_fragment </em> =.

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

Пераканаўшыся, што гэта спрацавала

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

Папярэджанні

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

  • Абслугоўваць сканеры папярэдне HTML, а не JavaScript,
  • Не пасылайце мяккія 404-х гадоў
  • Калі вы выкарыстоўваеце # для вашых URL-адрасоў, пераканайцеся, што ўсталюйце hashPrefix ('!') Так, каб URL былі перапісаны як #!
  • Калі ў вас шмат старонак і змесціва, абавязкова ўключайце sitemap.xml і robots.txt
  • Google скануе толькі пэўную колькасць старонак у дзень, што залежыць ад вашага PageRank. У тым ліку sitemap.xml дазволіць вам вызначыць прыярытэты, якія старонкі будуць праіндэксаваны.
  • Пры тэставанні, каб убачыць, як вашы старонкі AngularJS адлюстроўваюцца ў інструментах Google Webmaster, абавязкова дадайце #! or? _escaped_fragment_ = у патрэбным месцы, бо ручныя прылады не дзейнічаюць дакладна так, як робяць сапраўдныя сканеры.

Выснова

Будзем спадзявацца, што вы не дапусціце SEO-недахопу прыкладанняў Angular, якія перашкаджаюць вам выкарыстоўваць выдатны інструмент. Ёсць паслугі, такія як Prerender і спосабы сканавання змесціва AJAX. Пераканайцеся ў тым, каб паглядзець на Кіраўніцтва па сканаванні абыходу Google Webmaster і весела ствараць свае SEO-дружалюбныя прыкладанні Angular!

Quot;> Ён дадасць тэгі?
Так што ж адбываецца?
Home, URL будзе пераўтвораны ў http: // localhost: 3000 /?
Акрамя таго, калі вы выкарыстоўваеце HTML5mode, калі сканер наведвае вашу старонку па адрасе http: // localhost: 3000 / home, URL будзе пераўтвораны ў http: // localhost: 3000 / home /?
Or?
Меню сайта
Мини-профиль

    • Регистрация Напомнить пароль?

    Бесплатно можно смотреть фильмы онлайн и не забудьте о шаблоны dle на нашем ресурсе фильмы бесплатно скачать c лучшего сайта
    Опросы
    Топ новости