- Проблема
- решения
- Почему эффективный
- Prerender.io
- Настройка package.json для узла
- Настройка server.js для узла
- Public.html домашняя страница
- Настройка Angular app.js
- Результат после использования сервиса prerender
- банкнота
- заключать
AngularJS - это хорошая среда для создания веб-сайтов и приложений. Встроенные функции, такие как маршрутизация, привязка данных и директивы, позволяют AngularJS полностью обрабатывать многие типы интерфейсных приложений. Между тем, недостатком AngularJS до сих пор является использование поисковой оптимизации (SEO). В этой статье вы узнаете, как сделать сайты и приложения AngularJS доступными для Google.
Проблема
Сканеры поисковых систем (боты) изначально были предназначены для сканирования HTML-содержимого веб-страниц, когда веб-сайт разработал технологии, обеспечивающие веб-сайты, и Javascript стал фактическим языком в Интернете. AJAX позволяет асинхронную работу в сети. AngularJS является чисто асинхронным, и это проблема, когда боты Google собирают информацию. 
При полном использовании AngularJS для создания веб-приложения или приложения, безусловно, существует только одна HTML-страница с асинхронным частичным представлением. Маршрутизация и логика приложения будут выполнены на стороне клиента, даже если передача страницы или другое выполнение CRUD будут работать только на одной странице.
решения
У Google есть способ индексировать приложения AJAX, чтобы приложения AngularJS могли собирать информацию, индексировать и отображать в результатах поиска, как и другие веб-сайты. Есть несколько шагов для реализации методов и полностью поддерживаются Google. В этой статье мы создадим демонстрационное приложение, которое позволит ботам Google и другим ботам, таким как бот Bing, .... собирать информацию. Этот способ решит проблему и получит результаты поиска, как и ожидалось.
Почему эффективный
- Когда поисковый движок проходит через приложение, он встретит <meta name = "фрагмент" content = "!"> Он добавит тег? _Escaped_fragment_ = в URL
- Сервер заблокирует этот запрос и отправит его промежуточному программному обеспечению, которое обработает этот запрос для получения специальной информации.
- Prerender.io проверит, существует ли запрошенная страница (кэшированная страница), если она есть, затем передайте эту страницу сканеру, в противном случае prerender вызовет PhantomJS, чтобы отобразить все содержимое страницы и отобразить его для сканера.
- Страницы, которые не были кэшированы, но должны вызывать PhantomJS, будут рендериться немного, что приводит к увеличению времени отклика, поэтому страницы должны регулярно кэшироваться.
- Есть и другой подобный способ
- Самостоятельно созданный сервис для отображения и обслуживания снимков для поисковых систем.
- Используйте другие доступные сервисы, такие как BromBone , Seo.js или SEO4AJAX
Prerender.io
Prerender.io это совместимый сервис на многих различных платформах, таких как Node, PHP и Ruby. Этот сервис с открытым исходным кодом, но они предоставляют хост, если они не хотят испытывать трудности с настройкой своего собственного сервера для SEO.
Настройка package.json для узла
Мы создадим одно приложение Node / AngularJS, которое имеет несколько страниц с содержанием, которое варьируется от страницы к странице. Мы будем использовать Node.js это внутренний сервер с Express. Под файлом package.json ниже будут знать зависимости, необходимые для сборки приложения.
{"name": "Angular-SEO-Prerender", "description": "...", "version": "1.0.0", "main": "server.js", "author": "limkimhuor" , "private": "true", "scripts": {"build": "rimraf dist && webpack --bail --progress --profile", "server": "webpack --bail --progress --profile && "server", "test": "запуск кармы", "test-watch": "запуск кармы --auto-watch --no-single-run", "start": "npm run server"}, "зависимости" : {"angular": "^ 1.6.0"}, "devDependencies": {"angular-mocks": "^ 1.5.0", "angular-ui-router": "^ 1.0.3", "autoprefixer" : "^ 6.0.3", "babel-core": "^ 6.2.1", "babel-loader": "^ 6.2.0", "babel-preset-es2015": "^ 6.1.18", " bootstrap ":" ^ 3.3.7 "," copy-webpack-plugin ":" 4.0.1 "," css-loader ":" 0.26.1 "," extract-text-webpack-plugin ":" 2.0.0 -beta.5 "," file-loader ":" ^ 0.9.0 "," html-webpack-plugin ":" ^ 2.7.1 "," istanbul-instrumenter-loader ":" ^ 1.0.0 "," node-libs-browser ":" 2.0.0 "," node-sass ":" ^ 4.5.3 "," null-loader ":" ^ 0.1.1 "," phantomjs-prebu ":" ^ 2.1.4 "," postcss-loader ":" 1.2.2 "," prerender-node ":" ^ 2.7.2 "," raw-loader ":" ^ 0.5.1 "," rimraf ":" 2.5 2.5 "," sass-loader ":" ^ 6.0.6 "," style-loader ":" ^ 0.13.0 "," webpack ":" 2.2.0 "," webpack-dev- сервер ":" 2.2.0 "}}Здесь у нас есть package.json и для продолжения установки зависимостей введите команду npm install.
Настройка server.js для узла
В файле server.js будет запрашивать услугу Prerender и подключаться по токену prerender или локальному серверу prerender. В этой статье используйте только локальный сервер prerender, потому что нет фактического домена для тестирования Prerender.io сервис есть. Локальный сервер Prerender можно скачать по этой ссылке локальный предварительный сервер ,
var express = require ("express"); var app = module .exports = express (); var path = require ("путь"); постоянный порт = 8080; var prerenderio = require ("prerender-node"); prerenderio. set ("prerenderServiceUrl", "http: // localhost: 3000 /"); prerenderio. set ('protocol', 'http'); prerenderio. set ('host', 'localhost: 8080'); приложение use ("/", static. express (path. join (__dirname, "dist"))); приложение использовать (prerenderio); приложение get ("*", function (req, res) {res. sendFile (path. resol (__dirname, "dist", "public.html"));}); приложение слушать (порт); консоль. log («Порт прослушивания в Интернете» + порт + «http: // localhost:» + порт) module .exports = app;Public.html домашняя страница
Мы создадим домашнюю страницу как обычно, но есть изменение, чтобы добавить <meta name = meta tag "фрагмент" content = "!"> В <head> страницы. Этот метатег сообщит сканерам движка, что этот сайт или приложение содержит динамический контент JavaScript, необходимый для сбора информации.
Кроме того, если веб-сайт не кэшируется должным образом или содержимое потеряно, вы можете добавить этот скрипт: window.prerenderReady = false; скажет службе Prerender подождать, пока все содержимое страницы будет отрисовано, прежде чем запускать снимок. Тогда нужно учитывать window.prerenderReady = true; после окончания загрузки. С этим сценарием нет необходимости в качестве выбора, если вам нужно или у вас ошибка кэша с недостаточным содержанием.
<! DOCTYPE html> <html lang = "en" ng-app = "prerenderApp"> <head> <meta charset = "UTF-8"> <meta name = "фрагмент" content = "!"> <Base href = "/"> <title> Angular SEO Prerender | {{seo.pageTitle}} </ title> <meta name = "description" content = "{{seo.pageDescripton}}"> </ head> <body style = "margin-top: 60px;"> <класс div = "container"> <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> </ ul> </ nav> </ div> <ui-view> </ ui-view> < / div> </ body> </ html>Настройка Angular app.js
В app.config.js необходимо добавить конфигурацию маршрута $ locationProvider.hashPrefix ('!'); знать! это префикс URL. При использовании html5Mode с другой стороны не будет никакой разницы, URL будет http: // localhost: 3000 / #! / Home по сравнению со стандартным URL http: // localhost: 3000 / # / home. #! URL очень важен, потому что он предупредит сканер о том, что приложение имеет AJAX-контент.
маршрутизация. $ inject = ["$ stateProvider", "$ urlRouterProvider", "$ locationProvider"]; экспорт функции маршрутизации по умолчанию ($ stateProvider, $ urlRouterProvider, $ locationProvider) {$ locationProvider. html5Mode (true); $ locationProvider. hashPrefix ("!"); $ urlRouterProvider. в противном случае ("/"); }Оттуда app.config.js будет использоваться в app.js следующим образом
импорт "bootstrap / dist / css / bootstrap.css"; импортировать домой из "./features/home"; импортировать данные из "./features/about"; импортировать маршрутизацию из "./app.config"; import "./styles/app.scss"; const MODULE_NAME = "prerenderApp"; Угловой. модуль (MODULE_NAME, ["ui.router", "home", "about"]). конфиг (маршрутизация); экспорт по умолчанию MODULE_NAME;В случае использования $ locationProvider.html5Mode (true); должен иметь базовый тег <base href = "/"> в файле index.html или главной html-странице, URL будет http: // localhost: 3000 / home, если нет базового тега, возникнет ошибка Uncaught Ошибка: [$ location: nobase] $ location trong HTML5 chế độ cần đến
Результат после использования сервиса prerender
Когда сканер проходит через http: // localhost: 3000 / #! / URL-адрес превратится в http: // localhost: 3000 /? <Em> escaped_fragment </ em> = / about, тогда промежуточное программное обеспечение prerender увидит тип URL Это и будет вызывать сервис prerender. Аналогично, при использовании html5Mode, когда сканер проходит через http: // localhost: 3000 / about, URL-адрес превратится в http: // localhost: 3000 / about? <Em> escaped_fragment </ em> =.
Служба предварительного просмотра проверит, есть ли у нее моментальный снимок или страница рендеринга для этой страницы, отправит содержимое на сканер или отредактирует моментальный снимок и отправит визуализированный html-сканер для поиска правильного индекса. Вот результаты работы в Google Webmaster Tool через ngrok, ранее необходимо добавить свойство для запуска ngrok и ввести ссылку для рендеринга. 
банкнота
- Предоставить сканер html prerender вместо JavaScript.
- Если приостановлено с # в URL, убедитесь, что установлено hashPrefix (!), Поэтому URL будет выглядеть как #!.
- Если есть несколько страниц и контента, должны быть sitemap.xml и robots.txt
- Google собирает только несколько страниц в день в зависимости от PageRank. При предоставлении дополнительного sitemap.xml будет увеличиваться приоритет индекса.
- При изучении того, как страницы AngularJS отображаются в Инструментах Google для веб-мастеров, необходимо добавить #! или? _escaped_fragment_ = потому что в то время он не работал как гусеничный.
- Почему бы не назвать index.html, а public.html, потому что маршрут / не будет вызывать файл index.html в общедоступном каталоге. ссылка ссылка
заключать
Надеемся, что эта статья поможет сделать SEO для приложений AngularJS еще проще и узнать, как их исправить.
советоваться
Quot;> Он добавит тег?URL-адрес превратится в http: // localhost: 3000 /?
Аналогично, при использовании html5Mode, когда сканер проходит через http: // localhost: 3000 / about, URL-адрес превратится в http: // localhost: 3000 / about?
Или?
