AngularJS: Індэкс і Зарадзіце Ваш SEO

1. Хочаце, каб загрузіць гэтыя інструкцыі і ўвесь код у выглядзе PDF?
2. AngularJS і SEO: праблема
3. AngularJS і SEO: Рашэнне
4. Крок першы: стварэнне маментальных здымкаў
5. Крок 2: Усталёўка сервера
6. 1 - Усталёўка НПМ і NodeJS
7. 2 - Устанавіць Назаўжды
8. 3 - Усталёўка і запуск Prerender.io
9. 4 - Усталёўка сервера Redis
10. 5 - Зрабіць Папярэдне апрацоўваць выкарыстоўваць сервер Redis да здымках кэша
11. Крок 3: Канфігурацыя сервера
12. Крок 4: Канфігурацыя прыкладання
13. Крок 5: Тэставанне сервера Папярэдне апрацоўваць
14. Крок 6: Даданне Sitemap
15. выснову

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

Але ёсць адна праблема, кожны распрацоўшчык сутыкаецца пры націску іх AngularJS прадукт: Пошукавая аптымізацыя, або SEO.

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

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

У той час як Google спрабуе дапамагчы распрацоўнікам, паляпшаючы яго здольнасць да індэксу JavaScript і CSS, але нават калі Намаганні кампаніі Google індэксаваць JavaScript з 2014 года вылучаў, гэта не значыць, што ваша прыкладанне будзе праіндэксавана правільна. Сапраўды, Google па-ранейшаму рэкамендуе стварэнне маментальных здымкаў каб зрабіць прыкладанне AJAX прасканаваць ,

Але як менавіта ствараюцца гэтыя здымкі? І як распрацоўшчык можа быць упэўнены, што іх AngularJS дадатак або вэб-сайт правільна і цалкам праіндэксаваны Google?

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

Хочаце, каб загрузіць гэтыя інструкцыі і ўвесь код у выглядзе PDF?

Калі ласка, увядзіце адрас электроннай пошты і атрымаць яго бясплатна!

AngularJS і SEO: праблема

Пошукавыя сістэмы Шукальнікі былі першапачаткова прызначаны для індэксавання змесціва HTML вэб-старонак.

Сёння, аднак, JavaScript і іншыя механізмы, такія як AngularJS і BackboneJS гуляюць вядучую ролю ў вэб-распрацоўкі і стварэння кантэнту і прыкладання ў Інтэрнэце.

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

AngularJS і SEO: Рашэнне

Пераадоленне праблемы iндэксацыi не складана, калі распрацоўшчыкі прыняць тое, што называюць «маментальных здымкаў».

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

Важнае заўвага: JavaScript індэксацыі ў цяперашні час прымяняецца толькі да гусенічныя Google. Іншыя пошукавыя робаты (такія, як ад пошукавай сістэмы Bing ад Microsoft) не падтрымліваюць паўзуць прыкладання JavaScript яшчэ. Як добра, нягледзячы на ​​вэб-кантэнту ўсё часцей падзяляюць на сацыяльныя сеткі, такія як Facebook і Twitter, большасць сацыяльных сетак сканары не апрацоўваць JavaScript небудзь.

Так як жа вы ствараеце здымкі, і як вы працуеце з імі, каб пераканацца, што вы індэксавацца?

Чытайце на кіраўніцтва крок за крокам.

Крок першы: стварэнне маментальных здымкаў

Першы крок, каб генераваць здымкі самі.

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

Для таго, каб скараціць час, патрабуецца для стварэння маментальных здымкаў кэш можа быць выкарыстаны. Здымкі кэшуюцца на Redis сэрвэры першы раз, калі яны запытваюцца, а затым паўторна кэшуюцца адзін раз у дзень (заўвага: гэта можа быць наладжаны уручную ў адпаведнасці з вашымі патрэбамі), каб пераканацца, што ўтрыманне застаецца да сучасных. У выніку статычны здымак заўсёды і імгненна даступныя для абслугоўвацца шукальніку.

Крок 2: Усталёўка сервера

У гэтым прыкладзе мы будзем выкарыстоўваць сервер запусціць Apache на Ubuntu 14.04.2 LTS.

Ёсць пяць суб-крокаў, каб працаваць праз тут.

1 - Усталёўка НПМ і NodeJS

Sudo APT-з'явіцеся судо абнаўленне APT-атрымаць ўстаноўку nodejs НПМ зав -s / USR / бен / nodejs / USR / бен / вузел

2 - Устанавіць Назаўжды

NPM ўсталяваць назаўжды -g

3 - Усталёўка і запуск Prerender.io

мярзотнік клон https://github.com/prerender/prerender.git кд PreRender НПМ ўстаноўкі

Пераканайцеся, што сервер пачынае на 4001 і PhantomJS на 4002.

Вы можаце рэдагаваць гэты файл, калі вы хочаце змяніць порт:

/lib/index.js

Вярніцеся ў тэчку пререндера і запусціць сервер з дапамогай назаўжды - гэта дапаможа запусціць сервер бесперапынна ў фонавым рэжыме.

назаўжды пачаць server.js

4 - Усталёўка сервера Redis

Дадайце рэпазітары Dotdeb да вашых APT крыніц. Каб зрабіць гэта, стварыце новы файл спісу ў /etc/apt/sources.list.d/ і запоўніць яго з наступным зместам:

# /Etc/apt/sources.list.d/dotdeb.org.list Деб http://packages.dotdeb.org выціскаць усё Деб-Src http://packages.dotdeb.org выціснуць усё

Тады вам неабходна праверыць сапраўднасць гэтых рэпазітароў, выкарыстоўваючы адкрыты ключ:

Wget -q -O - http://www.dotdeb.org/dotdeb.gpg | Sudo APT-ключ дадаць -

Затым ўсталюйце Redis з дапамогай APT-GET:

Sudo APT-з'явіцеся абнаўленне Sudo APT-атрымаць ўстаноўку Redis-сервер

Затым уключыце службу Redis для запуску пры загрузцы:

сэрвіс судо redis_6379 пачаць SUDO службу redis_6379 прыпынку

Затым варта праверыць стан Redis:

$ Redis-кліматыч пінг

Вы атрымаеце «Pong», калі ўсё ў парадку.

5 - Зрабіць Папярэдне апрацоўваць выкарыстоўваць сервер Redis да здымках кэша

Папярэдне апрацоўваць мае модуль з адкрытым зыходным кодам, Папярэдне апрацоўваць-Redis-Cache , Што робіць яго лёгкім для выканання гэтай задачы.

У лакальным праекце пререндера (PreRender / server.js) запуск:

$ НПХ ўсталяваць PreRender-Redis-кэш --save

Затым дадайце гэтыя дзве радкі ў пререндер / server.js:

process.env.PAGE_TTL = 3600 * 24 * 5; // змяненне ў 0, калі вы хочаце, каб увесь час кэша server.use (патрабуецца ( «пререндер-Redis-кэш»));

Перазапусціце пререндер па:

назаўжды stopall назаўжды пачаць server.js

І калі вы хочаце, каб ачысціць ўсе кэш REDIS вы можаце выкарыстаць:

Redis-кліматыч -p 6379 FlushAll

Крок 3: Канфігурацыя сервера

Цяпер мы будзем перанакіроўваць сканеры на лакальны сервер пререндера выкарыстоўваючы просты файл .htaccess.

Гэты файл Htaccess ўжо змяшчае ўсе канфігурацыі перанакіраваньні. Звярніце ўвагу, што файл .htaccess павінен быць у той жа дырэкторыі з вашай асноўнай AngularJS файл index.html.

<IfModule mod_rewrite.c> RewriteEngine On Options + FollowSymlinks # перанакіраванне нон WWW на WWW RewriteCond% {HTTP_HOST}! ^ WWW \. (. *) $ RewriteRule ^ Http: //www.% {HTTP_HOST} / $ 1 [R = 301, L] # Ня перапісваць файлы ці каталогі RewriteCond% {REQUEST_FILENAME} -f [OR] RewriteCond% {REQUEST_FILENAME} - d RewriteRule ^ - [L] # Спіс усіх гусенічным і бота вы можаце дадаць больш RewriteCond% {HTTP_USER_AGENT} Googlebot | bingbot | Googlebot-Mobile | Baiduspider | Yahoo | YahooSeeker | DoCoMo | Twitterbot | TweetmemeBot | Twikle | Netseer | Daumoa | SeznamBot | Ezooms | MSNBot | Exabot | MJ12bot | Sogou \ sspider | YandexBot | bitlybot | ia_archiver | proximic | spbot | ChangeDetection | NaverBot | MetaJobBot | сарокі-гусенічны | Genieo \ sдоступна з \ sfilter | Qualidator.com \ sBot | Woko | Vagabondo | 360Spider | ExB \ жаргон \ Scrawler | AddThis.com | aiHitBot | Spinn3r | BingPreview | GrapeshotCrawler | CareerBot | ZumBot | ShopWiki | bixocrawler | uMBot | sistrix | linkdexbot | AhrefsBot | archive.org_bot | SeoCheckBot | TurnitinBot | VoilaBot | SearchmetricsBot | Матылёк | Yahoo ! | Plukkie | yacybot | trendictionbot | UASlinkChecker | Blekkobot | Wotbox | YioopBot | meanpathbot | TinEye | LuminateBot | FyberSpider | Infohelfer | linkdex.com | Цікаўны \ sGeorge | Fetch-Ге сс | Ичиро | MojeekBot | SBSearch | WebThumbnail | socialbm_bot | SemrushBot | Vedma | Алекса \ ssite \ saudit | SEOkicks-робат | Browsershots | BLEXBot | woriobot | AMZNKAssocBot | Speedy | Оботе | HostTracker | OpenWebSpider | WBSearchBot | FacebookExternalHit | Quora \ спасылка \ папярэдні прагляд | showyoubot | outbrain | Pinterest | slackbot | vkShare |?!.?. W3C_Validator [NC, OR] RewriteCond% {QUERY_STRING} _escaped_fragment_ # толькі проксі-запыт на пререндер, калі гэта запыт HTML RewriteRule ^ (* (\ JS | \ .css | \ .xml | \ .less | \ .png | \ .jpg | \ .jpeg | \ .gif | \ .pdf | \ .doc | \ .txt | \ .ico | \ .rss | \. зашпілька-маланка | \ .mp3 | \ .rar | \ .exe | \ .wmv | \ .doc | \ .avi | \ .ppt | \ .mpg | \ .mpeg | \ .tif | \ .wav | \ .mov | \ .psd | \ .ai | \ .xls | \ .mp4 | \ .m4a | \ .swf | \ .dat | \ .dmg | \ .iso | \ .flv | \ .m4v | \ .torrent)) ( . *) http://www.mydomain.com:4001/http://www.mydomain.com/$2 [P, L] # Перапішыце ўсё астатняе index.html, каб html5 стан спасылкі RewriteRule ^ index.html [ L] </ IfModule>

Цяпер вы скончылі ўсе задачы ўстаноўкі на боку сервера, так што настаў час, каб наладзіць AngularJS прыкладання.

Крок 4: Канфігурацыя прыкладання

Спачатку адкрыйце вы Angularjs файл index.html і:

1. пераканайцеся, што ў вас ёсць <базавы HREF = "/»> перад </ HEAD>
2. дадаць <META NAME = "фрагмент» змест = "!"> паміж <HEAD> </ HEAD> (шляхам дадання гэтага тэга ў старонку www.example.com, шукальнік будзе часова звязаць гэты URL на www.example.com? _escaped_fragment_ = і будзе патрабаваць гэтага ад вашага сервера)

Па-другое, актываваць рэжым HTML5.

У вашым config.js файл дапаўненні:

$ LocationProvider.html5Mode (ісціна);

Гэта пакажа дадатак, каб выкарыстоўваць фармат URL HTML5.

URL-адрас, як правіла, выглядае http://www.example.com/directory/page , Па змаўчанні AngularJS элементаў будуць мець URL-адрас, як гэта: http://www.example.com/#!/directory/page

вар прыкладанне = angular.module ( 'прыкладанне') .config ([ '$ httpProvider', '$ locationProvider', функцыя ($ httpProvider, $ locationProvider) {// выкарыстоўваем HTML5 History API $ locationProvider.html5Mode (праўдзівы); ...

Па-трэцяе, вам трэба кіраваць мета-тэгі.

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

Як вы працуеце гэта на практыцы?

Пачніце з ўстаноўкі гэтага модуля з дапамогай альтанку.

Затым аб'явіць модуль у якасці залежнасці ад вашага прыкладання:

вар прыкладанне = angular.module ( 'MYAPP', [ 'НГ', 'viewhead']);

Гэта робіць даступнымі дырэктывы, апісаныя ў шаблоне HTML.

Нарэшце дадаць мета-тэгаў ў шаблоне.

<Від тытульнага> {{artist.title}} </ паказы назвы> <мета выгляду галоўка імя = "апісанне" змест = "{{ 'SEO.ARTIST.DESCRIPTION' | пераклад: {выканаўца: artist.name, artist_ar: artist.name_ar}}} "/> <- Адкрытыя дадзеныя Графік ---> <мета выгляд галоўкі ўласцівасць =!" OG: назва »змест =" {{artist.name}} "/> <мета выгляд -кіраўнікі ўласцівасць = "OG: тып" змест = "артыкул" /> <мета выгляд галоўкі ўласцівасць = "OG: URL" змест = "http://www.example.com/artist/{{artist.slug}} "/> <мета выгляд галоўкі ўласцівасць =" OG: малюнак "змест =" {{artist.photo}} "/> <мета выгляд галоўкі ўласцівасць =" OG: апісанне "змест =" {{}} artist.description "/>

Крок 5: Тэставанне сервера Папярэдне апрацоўваць

Калі вы выканалі ўсе крокі, усе павінны працаваць добра. Тым не менш, лепш перастрахавацца, чым потым шкадаваць, што прыйшоў час, каб праверыць.

Параўнайце крыніца адной з старонак з і без _escaped_fragment_ ў URL.

Вы можаце праверыць канкрэтныя маршруты ў вашым браўзэры і параўнаць:

http://www.example.com/directory/page
http://www.example.com/directory/page?_escaped_fragment_=

Крок 6: Даданне Sitemap

Апошні крок у вашай стратэгіі AngularJS SEO заключаецца ў распрацоўцы сайта.

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

(Heads Up: мы будзем публікаваць яшчэ адзін пост у бліжэйшы час растлумачыць толькі як аўтаматызаваць карту сайта з дапамогай Grunt!)

выснову

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