вход на сайт

Имя пользователя :
Пароль :

Восстановление пароля Регистрация

Выполнение SEO в AngularJS Web Apps - Руководство разработчика

  1. A - Индексирование приложений AngularJS:
  2. B - URL современных поисковых систем и клиентских приложений:
  3. C - Создание режимов маршрутизации HTML5 вместо хешбангов:
  4. D - Обработка SEO со стороны сервера с помощью ExpressJS:
  5. E - Снимки с использованием Node.JS
  6. F - Важность карт сайта
  7. G - AngularJS Awesomeness

Google и другие поисковые системы становятся все умнее день ото дня и, следовательно, лучше понимают веб-страницы. Bot-Crawling of JavaScript больше не является главной проблемой, поэтому поисковые системы индексируют все больше веб-приложений.

Я знаю, что это отличная новость для веб-мастеров, однако, Google советует иначе, объясняя:

«Это всегда хорошая идея, чтобы изящно ухудшить ваш сайт, что поможет пользователям наслаждаться вашим контентом, даже если у них нет совместимых реализаций JavaScript. Это также поможет посетителям с отключенным или отключенным JavaScript, а также поисковым системам, которые не могу выполнить JavaScript. "

У нас, конечно, есть много старомодных способов встроить полную поддержку SEO в Angular JS, но многие считают JavaScript SEO дружественным вариантом. Это связано с тем, что он использует специальную маршрутизацию URL-адресов и создает настройки браузера без заголовка для автоматического извлечения HTML-кода.

A - Индексирование приложений AngularJS:

Вы должны знать, что Google индексирует ваш контент автоматически. Таким образом, вы можете настроить свойства рендеринга контента, чтобы боты Google полностью проиндексировали ваш контент так, как вы хотите. Вы можете сделать это, обслуживая AngularJS контент через пользовательский сервер Backend.

B - URL современных поисковых систем и клиентских приложений:

Здесь идет понятие hashbang. Чтобы упростить индексацию содержимого веб-приложения, Google и другие поисковые системы имеют функцию форматирования URL-адресов в хэш-банкингах . Всякий раз, когда поисковая система находит URL-адрес hashbang, то есть URL-адрес, содержащий #! ' он автоматически преобразует его в ? _escaped_fragment_ = URL, где он найдет полностью визуализированный контент HTML, готовый для индексации.

Позвольте мне привести вам пример для лучшего понимания:

Google превратит URL-адрес hashbang из:

http://www.example.com/#!/page/content

В URL:

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

По второму URL, который изначально не отображается для посетителей сайта, поисковая система найдет не-JS контент, который будет легко проиндексировать.

Теперь давайте сделаем ваше приложение достаточно интеллектуальным, чтобы при поиске второго URL-адреса поисковым роботом сервер возвращал необходимые HTML-снимки страницы. Это требует некоторого переписывания для вашего приложения.

RewriteEngine On RewriteCond% {REQUEST_URI} ^ / $ RewriteCond% {QUERY_STRING} ^ _escaped_fragment _ = /? (. *) $ RewriteRule ^ (. *) $ / Snapshots /% 1? [NC, L]

Создан специальный каталог моментальных снимков в виде URL перенаправления. Следовательно, этот каталог будет содержать ваши снимки HTML соответствующих страниц приложения. Кроме того, вы можете настроить свой собственный каталог и внести соответствующие изменения.

Вы можете столкнуться с другой проблемой, которая инструктирует AngularJS использовать hashbangs. По умолчанию AngularJS производит URL-адреса только с # вместо #! , Для того, чтобы получить последний, вам просто нужно добавить нижеупомянутый модуль.

angular.module ('HashBangURLs', []). config (['$ locationProvider', function ($ location) {$ location.hashPrefix ('!');}]);

C - Создание режимов маршрутизации HTML5 вместо хешбангов:

Как я могу забыть сказать, что HTML5 потрясающий? Наряду с техникой Hashbang, комбинация HTML5 и AngularJS дает нам еще один хак, чтобы обмануть поисковые системы при разборе URL-адресов _escaped_fragment_ . Это на самом деле использует Hashbang URL.

Шаг 1:

Сначала вы должны указать Google, что мы на самом деле используем контент AJAX, и бот должен посетить тот же URL-адрес, используя синтаксис _escaped_fragment_. Сделайте это, включив следующую мету в свой HTML-код.

<meta name = "фрагмент" content = "!">

Шаг 2:

Теперь вам нужно настроить AngularJS так, чтобы он использовал URL-адреса HTML5 всякий раз, когда и где бы он ни обрабатывал URL-адреса и маршрутизацию. Добавьте следующий модуль AngularJS в свой код для достижения этой цели.

angular.module ('HTML5ModeURLs', []). config (['$ routeProvider', function ($ route) {$ route.html5Mode (true);}]);

D - Обработка SEO со стороны сервера с помощью ExpressJS:

Мы все знаем удивительность ExpressJS. Ну, мы также можем использовать ExpressJS для перенаправления на стороне сервера вместо Apache.

Для того чтобы ваша инфраструктура ExpressJS доставляла статический HTML, вам сначала нужно будет установить промежуточное ПО, которое будет искать _escaped_fragment_ во ваших входных URL. Как только он будет найден, он мгновенно предоставит снимки HTML.

// В нашей конфигурации app.js app.use (function (req, res, next) {var фрагмент = req.query._escaped_fragment_; // Если в параметрах запроса нет фрагмента //, то мы не обслуживаем сканер if (! фрагмент) return next (); // если фрагмент пустой, обслуживаем // страницу индекса if (фрагмент === "" || фрагмент === "/") фрагмент = "/index.html "; // Если фрагмент не начинается с '/' // добавляем его к нашему фрагменту if (фрагмент.charAt (0)! ==" / ") фрагмент = '/' + фрагмент; // Если фрагмент не заканчивается с помощью .html // добавляем его к фрагменту if (фрагмент.indexOf ('. html') == -1) фрагмент + = ".html"; // подаем статический снимок html try {var file = __dirname + "/ snapshots" + фрагмент; res.sendfile (файл);} catch (err) {res.send (404);}});

Опять же, мы должны настроить моментальные снимки в каталоге верхнего уровня с именем / snapshot . ExpressJS, учитывая возможность того, что робот поисковой системы отображает URL, не имеет простых функций синтаксиса, таких как « или « .html» , поэтому предоставляет правильную часть для бота.

E - Снимки с использованием Node.JS

Наиболее часто используемыми инструментами для создания снимков HTML вашего веб-приложения являются Zombie.JS и Phantom.JS.

PhantomJS и ZombieJS создают безголовый браузер, который может получить доступ к обычному URL-адресу страницы вашего веб-приложения. Кроме того, они могут получить обработанный HTML-контент после его полного выполнения, а затем вернуть окончательный HTML-код во временный файл.

Для справки доступны различные онлайн-ресурсы, такие как:

Давайте не будем вдаваться в подробности этого. Тем не менее, я бы хотел выделить инструмент с открытым исходным кодом Prerender.IO, который можно использовать для создания снимков экрана в формате HTML. Еще более простым средством является инструмент под названием Grunt-html-snapshot, и вы будете удивлены, узнав, что вы найдете его в Node.JS.

NodeJS поставляется с предустановленным Grunt инструментом, который вы можете легко использовать для создания собственных скриншотов без проблем. Давайте рассмотрим несколько шагов, чтобы настроить инструмент grunt и начать производить HTML:

    • Сначала установите NodeJS. Вы можете скачать его с http://nodejs.org , Наряду с узлом также установите Npm (менеджер пакетов узла). Пользователи Mac и Windows могут получить доступ к NodeJS, нажав и установив приложения. Пользователи Ubuntu могут извлечь файл tar.gz и затем установить его из командного терминала. Последние пользователи Ubuntu могут также установить с помощью команды sudo apt-get install nodejs nodejs-dev npm . Следует отметить, что Npm хорошо оснащен Grunt.

    • Откройте командную консоль и перейдите в папку вашего проекта.

    • Команда запуска (для глобальной установки Grunt): npm install -g grunt-cli

    • То же самое можно сделать, установив локальную копию Grunt. Основная функция HTML-снимка с помощью команды npm install grunt-html-snapshot –save-dev

    • Следующим шагом будет создание собственного файла JavaScript Gruntfile.js. Файл JS будет иметь следующий код:

module.exports = function (grunt) {grunt.loadNpmTasks ('grunt-html-snapshot'); grunt.initConfig ({htmlSnapshot: {all: {options: {snapshotPath: '/ project / snapshots /', sitePath: 'http://example.com/my-website/', URL: ['#! / page1' , '#! / page2', '#! / page3'] sanitize: function (requestUri) {// возвращает «index.html», если URL-адрес «/», в противном случае префикс if (/\/$/.test (requestUri)) {return 'index.html';} else {return requestUri.replace (/ \ // g, 'prefix-');}}, // если вы не хотите хранить теги сценария в снимках html // устанавливаем для `removeScripts` значение true. По умолчанию оно равно false removeScripts: true,}}}}); grunt.registerTask ('default', ['htmlSnapshot']); };

Запустите задачу с помощью команды grunt htmlSnapshot .

F - Важность карт сайта

Точная настройка карт сайта также важна для более точного контроля над тем, как поисковые роботы получают доступ к вашему сайту. Всякий раз, когда робот поисковой системы находит example.com/sitemap.xml, он следует по ссылкам, указанным в карте сайта, прежде чем вслепую следовать всем ссылкам сайта. Это лучший способ, если вы хотите проиндексировать страницу, которая не связана с какой-либо другой страницей.

Для содержимого AJAX, чтобы правильно настроить индексы поисковой системы, рекомендуется перечислить все страницы / URL-адреса, которые генерирует ваше приложение, даже если ваше приложение представляет собой одностраничное приложение. Ниже приведен пример карты сайта:

<urlset xmlns = "http://www.sitemaps.org/schemas/sitemap/0.9"> ... <url> <loc> http://www.yourwebsite.com/#!/page1 </ loc> < changefreq> daily </ changefreq> <priority> 1.0 </ priority> </ url> <url> <loc> http://www.yourwebsite.com/#!/page2 </ loc> <changefreq> daily </ changefreq > <priority> 1.0 </ priority> </ url> <url> <loc> http://www.yourwebsite.com/#!/page3 </ loc> <changefreq> daily </ changefreq> <priority> 1.0 < / priority> </ url> ... </ urlset>

G - AngularJS Awesomeness

Теперь вы должны быть готовы отправиться и испытать удивительность JS и его удивительные возможности. Эта тенденция может идти только вверх отсюда. С концепцией индексированного контента AJAX вы можете делать практически все. Удачного кодирования!

Похожие

Что такое SEO: важность сайта Seo Friendly
Вы слышали термин SEO в контексте веб-сайтов, но еще не поняли, что это такое? Если вы хотите знать, что такое SEO, вы в правильной статье! Слово SEO является аббревиатурой от поисковой оптимизации. оптимизация для
SEO оптимизация
Что такое Сео? Поисковая оптимизация. Поисковая оптимизация - это название работы. Поисковые системы, такие как Google, занимают лидирующие позиции, даже в первую очередь, являются работой. Ключевые слова следует использовать с особой осторожностью. Наиболее предпочтительные ключевые слова должны быть определены. Таким образом, вы можете создать максимально эффективную
Даллас SEO
... SEO для вашего бизнеса? Сделайте свой бизнес-сайт выделиться в Далласе Получите отзывчивый сайт с высоким трафиком, вознагражденный Google Найдите в Интернете то, что вы делаете, увеличьте свою экспозицию Развивайте свой бренд и улучшайте свою прибыль Получите экспертные консультации по веб-сайту с SEO-специалистами из Далласа. Получить больше клиентов, больше клиентов и больше доходов Превзойти
SEO совет
... seo-sovet-1.png" alt="Благодаря нашему многолетнему опыту в области SEO и успешной реализации многочисленных SEO-проектов в различных отраслях, мы можем опираться на богатый опыт SEO-консалтинга и знать потребности наших клиентов"> Благодаря нашему многолетнему опыту в области SEO и успешной реализации многочисленных SEO-проектов в различных отраслях, мы можем опираться на богатый опыт SEO-консалтинга и знать потребности наших клиентов. Наш опыт варьируется от начинающих до
Международный SEO
Подводные камни, ожидающие веб-мастеров международных и многоязычных сайтов, многочисленны и разнообразны. Важно рассматривать ваше международное развертывание в качестве приоритета, применяя строгий и всесторонний менеджмент проектов. Ваш успех в SEO за рубежом будет в первую очередь зависеть от вашей способности
SEO деятельность
Термины SEO и Engine Positioning - это все те действия и процедуры, которые направлены на получение и / или увеличение трафика на вашем сайте через основные поисковые системы. Эта потребность
SEO продвижение
Цель этой статьи - понять, является ли она необходимо сделать SEO или вы можете использовать любые другие методы и методы рекламы. И я хотел бы понять, какая разница будет в этом случае и есть
Архитектура сайта для SEO: полное руководство
... троить архитектуру вашего сайта, следуя хорошим практикам SEO"> Как построить архитектуру вашего сайта, следуя хорошим практикам SEO? Это вопрос, который я привык задавать себе, и, по моему скромному мнению, я не должен быть единственным. Но давайте начнем с самого начала. 1) Что такое архитектура сайта? Архитектура сайта сводится к структуре, по которой пользователи и поисковые системы будут переходить
SEO поисковая оптимизация сайта
... seo-poiskovaa-optimizacia-sajta-1.jpg" alt="фото: bloeise"> SEO поисковая оптимизация Поисковая оптимизация или SEO оптимизация (от поисковой оптимизации) - это процесс, который улучшает видимость веб-сайта в поисковых системах и улучшает позиционирование в результатах поиска по определенным ключевым словам и фразам . Этот процесс включает в себя такие факторы, как оптимизация HTML-кода сайта, структуры ссылок сайта, текстов, ссылок, которые ссылаются
Детройт SEO
Цифровые маркетинговые консалтинговые услуги не всегда могут быть измерены в простых рейтингах поисковых систем. Мы нацелены на получение реальных результатов клиентов - увеличение продаж и рентабельности инвестиций. Что хорошего в том, чтобы иметь высокий рейтинг в поисковой системе Google, если он не конвертируется в продажи и прибыль? Мы можем помочь вам доминировать в конкурентной борьбе, собрать больше потенциальных клиентов и клиентов для вашего бизнеса. Свяжитесь с нами
SEO (SEO) или SEO рекламные слова
Позиционирование вашей компании, ее бренда в Интернете является фундаментальной проблемой. Мы должны освоить его SEO. Для электронных торговцев оборот напрямую зависит от него; для других Интернет - это маркетинговый инструмент для установления связи или оценки своего бренда. Что выбрать, SEO (или SEO) или платный поиск (Adwords)? Общая черта этих двух моделей: поддержка, поисковые системы. В основном во Франции, SEO стратегия делается на Google. Что касается рекламного слова, позиционирование

Комментарии

Вы хотите оптимизировать свой сайт для поисковых систем (также известных как SEO), но с чего начать?
Вы хотите оптимизировать свой сайт для поисковых систем (также известных как SEO), но с чего начать? В дополнение к техническому дизайну сайта, в основном это контент, который в конечном итоге вращается вокруг. В этой статье вы найдете контрольные списки, которые вы можете распечатать и использовать при оптимизации вашего контента и веб-сайта. Основы поисковой оптимизации контента (SEO) Укажите уникальные имена заголовков страниц и
Как результаты поисковых систем онлайн (SEO / SEM) влияют на гостиничный бизнес?
Как результаты поисковых систем онлайн (SEO / SEM) влияют на гостиничный бизнес? Работая в стране, в которой индустрия туризма играет важную роль в экономике, я всегда видел, как этот вид бизнеса, такой как гостиницы, рестораны, отличается, потому что им требуется лучшее присутствие в Интернете , если они хотят сохранить конкурентоспособность в промышленность. Я говорю это, потому что туристический бизнес предоставляет услугу, в которой потребители имеют различные инструменты
А что может быть лучше, чем бесплатные посетители с помощью поисковых систем, таких как Google?
А что может быть лучше, чем бесплатные посетители с помощью поисковых систем, таких как Google? Это быстро экономит значительную сумму денег на рекламных расходах. Это, конечно, не совсем бесплатно, потому что честно, честно, это требует времени (а на реальных результатах это в среднем от 3 до 6 месяцев). Но если вы разумно инвестируете свое время и правильно выполняете поисковую оптимизацию, вы можете обеспечить постоянный поток бесплатных посетителей в будущем без особых усилий. В частности,
Что общего в результатах поисковых систем и SEO, которое, как мы знаем, никогда не изменится?
Что общего в результатах поисковых систем и SEO, которое, как мы знаем, никогда не изменится? Хорошо написанный, оригинальный, информативный контент всегда будет вознагражден и, в конечном счете, будет работать лучше всего. Ищете хороших писателей? Откройте счет на Writtent.com и подключайтесь сегодня!
Quote] Вы можете прочитать: SEO: внештатное SEO или SEO агентство ?
Вы хотите оптимизировать свой сайт для поисковых систем (также известных как SEO), но с чего начать? В дополнение к техническому дизайну сайта, в основном это контент, который в конечном итоге вращается вокруг. В этой статье вы найдете контрольные списки, которые вы можете распечатать и использовать при оптимизации вашего контента и веб-сайта. Основы поисковой оптимизации контента (SEO) Укажите уникальные имена заголовков страниц и
Ег <title> вашей домашней страницы, со своей стороны, название сайта в начале?
Вы хотите оптимизировать свой сайт для поисковых систем (также известных как SEO), но с чего начать? В дополнение к техническому дизайну сайта, в основном это контент, который в конечном итоге вращается вокруг. В этой статье вы найдете контрольные списки, которые вы можете распечатать и использовать при оптимизации вашего контента и веб-сайта. Основы поисковой оптимизации контента (SEO) Укажите уникальные имена заголовков страниц и
И что может быть лучше, чем невероятная битва SEO между некоторыми из самых больших трещин в рейтинге поисковых систем в Испании?
И что может быть лучше, чем невероятная битва SEO между некоторыми из самых больших трещин в рейтинге поисковых систем в Испании? Ответ, которого вы ждали, - это не что иное, как SEOPLUS Congress 2018, один из самых важных бесплатных SEO-конгрессов года. После двух изданий ошеломительного успеха и третий конгресс с потрясающими презентациями Webpositer в сотрудничестве
Раньше это управляло Интернетом еще в начале 2000-х годов, но с тех пор пользуется популярностью у Google и других поисковых систем, так что нет никакого смысла в том, чтобы подчиняться им, верно?
Раньше это управляло Интернетом еще в начале 2000-х годов, но с тех пор пользуется популярностью у Google и других поисковых систем, так что нет никакого смысла в том, чтобы подчиняться им, верно? Неправильно. Позвольте мне объяснить, почему веб-каталоги все еще могут быть частью вашего плана SEO . Можем ли мы наконец избавиться от www? Моя дневная работа связана с рекламой на телевидении и радио. При работе над 30-секундным объявлением
Так вы думаете, что «свежесть» и «местоположение» станут для вас как пользователя поисковых систем более важными для повышения эффективности поиска?
Так вы думаете, что «свежесть» и «местоположение» станут для вас как пользователя поисковых систем более важными для повышения эффективности поиска? http://www.seomoz.org/article/search-ranking-factors
Так, что вовлечено в создание веб-контента SEO, и как вы можете сделать это, чтобы максимизировать потенциал вашего бизнеса?
Так, что вовлечено в создание веб-контента SEO, и как вы можете сделать это, чтобы максимизировать потенциал вашего бизнеса? 1. Выберите тему, относящуюся к вашему бизнесу Первое, что вам нужно сделать при написании SEO веб-контента, это выбрать тему, которая относится к вашему бизнесу. Если вы хотите, чтобы ваша компания появлялась в других результатах поиска, вы должны написать о темах, которые относятся к вашему продукту или услуге. Вы можете направить выбранную вами тему
SEO Создание ссылок?
SEO Создание ссылок? Что? У меня совершенно другое восприятие, когда речь заходит о создании ссылок SEO. С сегодняшним соревнованием, создание связей обычным способом недостаточно, если вы хотите соревноваться с большими детьми. Я получил этот комментарий, который мне показался довольно интересным (и потрясающим).

Com/?
RewriteEngine On RewriteCond% {REQUEST_URI} ^ / $ RewriteCond% {QUERY_STRING} ^ _escaped_fragment _ = /?
RewriteRule ^ (. *) $ / Snapshots /% 1?
? SEO для вашего бизнеса?
?троить архитектуру вашего сайта, следуя хорошим практикам SEO"> Как построить архитектуру вашего сайта, следуя хорошим практикам SEO?
Что такое архитектура сайта?
Что хорошего в том, чтобы иметь высокий рейтинг в поисковой системе Google, если он не конвертируется в продажи и прибыль?
Что выбрать, SEO (или SEO) или платный поиск (Adwords)?
Вы хотите оптимизировать свой сайт для поисковых систем (также известных как SEO), но с чего начать?
Как результаты поисковых систем онлайн (SEO / SEM) влияют на гостиничный бизнес?
Поиск по сайту
Меню
Реклама на сайте
Архив новостей
Реклама на сайте

Реклама на сайте







Архив сайта
Информация
www.home-4-homo.ru © 2016 Copyright. Все права защищены.

Копирование материалов допускается только с указанием ссылки на сайт.