* РБК — новости

* *

Используйте prerender.io в AngularJS SEO

  1. Проблема
  2. решения
  3. Почему эффективный
  4. Prerender.io
  5. Настройка package.json для узла
  6. Настройка server.js для узла
  7. Public.html домашняя страница
  8. Настройка Angular app.js
  9. Результат после использования сервиса prerender
  10. банкнота
  11. заключать

AngularJS - это хорошая среда для создания веб-сайтов и приложений. Встроенные функции, такие как маршрутизация, привязка данных и директивы, позволяют AngularJS полностью обрабатывать многие типы интерфейсных приложений. Между тем, недостатком AngularJS до сих пор является использование поисковой оптимизации (SEO). В этой статье вы узнаете, как сделать сайты и приложения AngularJS доступными для Google.

Проблема

Сканеры поисковых систем (боты) изначально были предназначены для сканирования HTML-содержимого веб-страниц, когда веб-сайт разработал технологии, обеспечивающие веб-сайты, и Javascript стал фактическим языком в Интернете. AJAX позволяет асинхронную работу в сети. AngularJS является чисто асинхронным, и это проблема, когда боты Google собирают информацию. При полном использовании AngularJS для создания веб-приложения или приложения, безусловно, существует только одна HTML-страница с асинхронным частичным представлением. Маршрутизация и логика приложения будут выполнены на стороне клиента, даже если передача страницы или другое выполнение CRUD будут работать только на одной странице.

решения

У Google есть способ индексировать приложения AJAX, чтобы приложения AngularJS могли собирать информацию, индексировать и отображать в результатах поиска, как и другие веб-сайты. Есть несколько шагов для реализации методов и полностью поддерживаются Google. В этой статье мы создадим демонстрационное приложение, которое позволит ботам Google и другим ботам, таким как бот Bing, .... собирать информацию. Этот способ решит проблему и получит результаты поиска, как и ожидалось.

Почему эффективный

  • Когда поисковый движок проходит через приложение, он встретит <meta name = "фрагмент" content = "!&quot;> Он добавит тег? _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?
Или?

Реклама

Популярные новости

Агентство по эскорт услугам
У многих слово «эскорт» ассоциируется с элитным сопровождением, дорогими машинами и длинноногими красавицами-моделями, которых богатые владельцы крупных фирм берут с собой на светские рауты в качестве

Франшиза страхового агентства
К Вашему вниманию франшиза страхового агентства — Точка Страхования. Основными направлениями деятельности являются реализация полисов ОСАГО и КАСКО. Что входит в франшизу• Техническая поддержка наших

Федеральное агентство по туризму
Сафонов Олег Петрович

Украинские новости информационное агентство
© UNIAN.NET, 1998 - 2017 Все права соблюдены. Согласно статье 26 Закона Украины "Об информационных агентствах" право собственности на продукцию информационного агентства охраняется

Донецкое агентство новостей
Декабрь 14, 2018 12:25 Фото: Минкультуры ДНР. Донецк, 14 дек – ДАН. Почти 3800 человек за три с лишним месяца посетили в Донецке выставку «Великая Отечественная война в цифрах и фактах», посвященную

Про затвердження Порядку організації та проведення особистого прийому громадян у Державному агентстві резерву України, Міністерство економічного розви
МІНІСТЕРСТВО ЕКОНОМІЧНОГО РОЗВИТКУ І ТОРГІВЛІ УКРАЇНИ 24.09.2012  № 1041 Зареєстровано в Міністерстві |юстиції України 9 жовтня 2012 р. за № 1703/22015 Про затвердження Порядку організації та проведення

Сегодня в Информагентстве «НАШ ПРОДУКТ» состоялся круглый стол на тему: «Каков диагноз больничных касс?»
04 ноя 2010, 17:28    admin 0 комментариев    2 396 просмотров Участники мероприятия активно обсуждали вопросы создания больничных касс в Киеве с начала 2011 года, откуда

Федеральное агентство по рыболовству
  Официальное наименование Федеральное агентство по рыболовству   Официальное сокращенное наименование Росрыболовство   Действует на основании Положения, утвержденного Постановлением

15 лучших печатных реклам 2013 года
Креативные агентства разрабатывают огромное количество разных рекламных кампаний: одни удивляют своей оригинальностью и свежими идеями, другие — шокируют эпатажными образами. Но несмотря на разнообразие

Совместный проект Профессионалов.ru и "Секрета Фирмы" - "Банк решений". Кейс четырнадцатый - "Сеть без дыр"... — Бизнес-клуб
Уважаемые профессионалы, чуть более года назад мы запустили совместный с ведущим деловым журналом «Секрет Фирмы» проект по решению задач из реальнойбизнес-практики «Банк решений». Многие из вас уже успели


Реклама

Календарь новостей

Реклама

Архив новостей

Реклама