Разработка программного комплекса для SEO-аналитики и оптимизации веб-приложений

Размещено на http://www.allbest.ru/

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ

федеральное государственное бюджетное образовательное учреждение высшего образования

«БЕЛГОРОДСКИЙ ГОСУДАРСТВЕННЫЙ ТЕХНОЛОГИЧЕСКИЙ УНИВЕРСИТЕТ им. В.Г. ШУХОВА» (БГТУ им. В.Г. Шухова)

Институт Энергетики, информационных технологий и управляющих систем

Кафедра Программного обеспечения вычислительной техники и автоматизированных систем

Шифр, название направления, специальности 09.03.01 Информатика и вычислительная техника (образовательная программа)

ВЫПУСКНАЯ КВАЛИФИКАЦИОННАЯ РАБОТА

на тему: Разработка программного комплекса для SEO-аналитики и оптимизации веб-приложений

Дипломник Сидоров С.С.

Белгород



Содержание

Введение

1. Описание предметной области, анализ аналогов

1.1 Постановка задачи

1.2 Актуальность проблемы

1.2.1 SEO-оптимизация

1.2.2 SEO-аналитика

1.3 Описание и анализ предметной области

1.3.1 Процесс работы SEO-оптимизатора и аналитика

1.3.2 Проблемы SEO-оптимизации

1.4 Обзор и анализ аналогов программной системы

1.4.1 «Text.ru»

1.4.2 «Miratext»

1.4.3 «Advego»

1.4.4 «Seop.ru»

1.5 Среда разработки

1.5.1 Sublime Text

1.5.2 Chrome Dev Tools

2. Проектирование программного обеспечения

2.1 Описание функциональности системы

2.1.1 Описание приложения в виде пользовательского сценария

2.1.2 Указание параметров аналитики страницы

2.2 Проектирование расширения для браузера Google Chrome

2.3 Язык программирования

2.4 Проектирование обмена сообщениями между модулями

2.5 Проектирование проверки SEO-правил

2.5.1 Проверки при открытии расширения

2.5.2 Проверки при вводе ключевой фразы

2.6 Проектирование проверки правописания

2.7 Проектирование модуля для склонения существительных

2.8 Проектирование пользовательского интерфейса

3. Разработка программного обеспечения

3.1 Разработка общей структуры приложения

3.1.1 Файл manifest.json

3.1.2 Структура файлов

3.2 Разработка обмена сообщениями между модулями

3.2.1 Разработка обмена сообщениями между модулями background и popup

3.2.2 Разработка обмена сообщениями между модулями content и popup

3.3 Разработка получения данных со страницы

3.4 Использование регулярных выражений

3.5 Разработка проверки правописания

3.6 Разработка проверки заспамленности

3.7 Разработка пользовательского интерфейса

3.8 Разработка страницы настроек

3.9 Результат работы программы

Заключение

Список литературы

Приложение

пользовательский приложение модуль программа



Введение

Информация в жизни общества и отдельного человека всегда имела большое значение. Ранее люди получали информацию от своих предков, позже -- из книг. Несколько десятков лет назад, чтобы узнать что-то новое люди обращались к книгам. Книги предоставляли качественную и проверенную информацию, которой можно было доверять.

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

Для того чтобы удовлетворить запросы пользователей существуют различные поисковые системы, которые на один и тот же поисковый запрос могут выдать разные списки web-ресурсов, на которых пользователь может найти ответ на свой поисковый запрос. Это зависит от того, что в разных поисковых системах применяются не одинаковые алгоритмы, с помощью которых и определяется список выдачи сайтов.

Так как пользователю необходимо как можно быстрее получить ответ на свой поисковый запрос, то наиболее часто он переходит на сайты, которые представлены на первой странице выдачи. Следовательно, для того, чтобы сайт был популярен, приносил доход (в случаях коммерческих web-ресурсов) и имел хорошую репутацию у пользователей, необходимо, чтобы он попадал в первую страницу выдачи поисковых систем, т.е. в ТОП-10 сайтов по данному поисковому запросу.

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

Для этого используется SEO-оптимизация, т.е. комплекс мер, направленных на улучшение позиций сайта в поисковой выдаче. Кроме внутренней и внешней оптимизации происходит и аналитика портала и разработка стратегии для увеличения количества посетителей данного сайта.

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

Так как данная работа будет создаваться на примере портала «Культура.РФ», то будут учтены основные моменты работы с данным ресурсом, но, безусловно, разработанное приложение может быть успешно использовано и для других web-ресурсов.



1. Описание предметной области, анализ аналогов

1.1 Постановка задачи

Целью дипломного проекта является упрощение и автоматизирование некоторых аспектов работы SEO-аналитика и оптимизатора путем создания комплекса для проверки правильности метаданных и текста с точки зрения SEO.

При реализации данного программного обеспечения ставились следующие задачи: Разрабатываемое программное обеспечение должно решать следующие задачи, которые вместе собираются в единый программный комплекс:

Проанализировать предметную область;

Проанализировать аналоги;

Сформулировать спецификацию программного обеспечения:

получение метаданных и текста;

проверка метаданных на основные SEO-правила;

проверка текста метаданных на наличие грамматических ошибок, заспамленности, положение ключевых слов;

выдача пользователю рекомендаций по улучшению текста и метаданных со стороны SEO.

Осуществить проектирование программного обеспечения системы.

Реализовать программное обеспечение.

1.2 Актуальность проблемы

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

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

Ранжирование портала -- процесс назначения интернет-сайтам порядка, в котором они будут располагаться в поисковой выдаче по тому или иному запросу. [1]

Каждую web-страницу обходит поисковый робот, который и назначает позицию данной странице. Робот хранит список URL, которые он может проиндексировать, и регулярно выкачивает соответствующие им документы. Если при анализе документа робот обнаруживает новую ссылку, он добавляет ее в свой список. Таким образом, любой документ или сайт, на который есть ссылки, может быть найден роботом, а значит, и поиском Яндекса. [2]

Чтобы страница попала на первые страницы выдачи, она должна быть оптимизирована, т.е. должна отвечать определенным требованиям поисковиков. Далее оптимизация web-ресурса будет показана на примере портала «Культура.РФ» -- это образовательный портал, на котором размещаются различные статьи, у данного сайта нет коммерческих целей. Главная его цель -- привлечение большего количества посетителей, в том числе и с помощью органического трафика.

Органический трафик -- это поток посетителей, который идет на сайт из органической выдачи поисковых систем. Пользователи ищут слова или словосочетания, вводя соответствующие запросы в строку поиска, и получают результат -- страницы с органической выдачей всех сайтов, отвечающих заданным запросам. Таким образом, пользователи переходят из органической выдачи поисковых систем на сайты, создавая своими переходами органический трафик. [3]

Важным показателем при ранжировании сайтов роботами является поведенческий фактор -- это совокупность действий посетителей на определенном сайте. Чем дольше пользователь остается на странице, чем больше он переходит по внутренним ссылкам на сайте, тем более высокий рейтинг присваивается web-ресурсу.

Поведенческие факторы тесно связаны с посещаемостью сайта, подробной статистикой и ориентированности сайта на пользователя, а также его полноценным уникальным содержанием, делающим его привлекательным для посетителей. Подобный алгоритм нацелен на улучшение качества сайта, его конкурентоспособность, полезность. С учетом указанных выше тезисов, становится понятно, что продвижение сайта одними ссылками будет неполноценным. Сайты с хорошей посещаемостью, привлечением уникальных пользователей, удобные и хорошо структурированные, выигрывают конкуренцию, если и другие требования оптимизации были соблюдены. [4]

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

1.2.1 SEO-оптимизация

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



Рисунок 1.1 -- Сниппет портала «Культура.РФ»

Сниппет позволяет пользователю получить представление о документе или даже искомую информацию, не открывая сам документ. В сниппете содержатся метаданные -- title (заголовок) и description (описание).

От того, как составлены title и description, зависит и ранжирование сайта поисковыми системами, и его посещаемость. Если пользователя поисковика заинтересует заголовок страницы, а описание будет соответствовать тому, что посетитель хочет найти, он обязательно перейдет на веб-страницу. Если с точки зрения поисковых роботов title будет максимально релевантным (соответствующим по смыслу) запросу, сайт при прочих равных получит более высокую позицию, чем веб-проекты конкурентов.

В большинстве случаев заголовок и описание страницы сайта в результатах поиска формируются на основе контента страницы. В частности, заголовок берется из элемента title в HTML-коде страницы, описание -- из текста страницы, а также из содержимого метатега description.

Заголовок страницы -- это текст, определяемый в HTML тегом <title>. С его помощью вебмастер дает понять поисковой системе, что содержится на странице. Текст, который обрамляется тегами <title> </title>, отображается браузером в заголовке окна. Кроме того, этот текст будет содержать и ссылку на данный сайт на странице результатов поиска, то есть это, в некотором роде, визитная карточка web-ресурса. Поэтому от того, как написан заголовок, зависит, появится ли у пользователя желание перейти на страницу сайта для получения более подробной информации.

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

Для того, чтобы тег title был высоко оценен роботами, он должен начинаться с наиболее релевантных ключевых слов, названия продукта или статьи, и заканчиваться названием сайта. Необходимо придерживаться объёма максимум в 50-55 знаков и стараться сделать так, чтобы этот тег включал в себя уникальные, релевантные и ценные ключевые слова для получения максимально положительного эффекта для SEO, при этом количество ключевых слов в title должно быть 1-2, иначе поисковые роботы могут посчитать заголовок спамом. Так же важно, что бы title отражал главную тему текста, так как если заголовок не соответствует тексту, а написан только с учетом частых поисковых запросов, такой странице не удастся подняться в ТОП выдачи поисковиков.

Содержимое тега description может показываться некоторыми поисковыми системами как описание страницы в результатах поиска. Мета-тег description должен содержать в себе краткое описание страницы. Неправильно указывать в этом теге просто набор ключевых слов. Также текст должен быть читаемым и предназначенным для людей, а не роботов. Длина description должна быть не более 150 символов. Описание должно быть информативным и актуальным.

Кроме того, важным условием написания description является то, что не допустимо полное вхождение title в него. Так же регламентируется количество вхождений в описание ключевых слов -- не более трех.

Так же в title и description не стоит копировать название статьи и первые строки текста, так как поисковые системы автоматически подтягивают эти данные в сниппет, необходимо писать осмысленные и уникальные метаданные.

Ключевыми словами называют особо важные, общепонятные, ёмкие и показательные для отдельно взятой темы слова в тексте, набор которых может дать высокоуровневое описание его содержания для читателя, обеспечив компактное представление и хранение его смысла в памяти. Именно правильный подбор и использование ключевых слов -- залог удачной SEO-оптимизации.

Пример написания метаданных для портала «Культура.РФ» представлен на рисунке 1.2. Данный пример отражает, как правильно и с учетом всех критериев писать метаданные.

Например, мета-тег title с текстом «Окна. Пластиковые окна. Купить пластиковые окна» является заспамленным, т.к. слишком часто употребляется слово «окна». Пример неудачного description: «Биография известнейшего талантливого писателя, автора многих великих произведений -- Льва Николаевича Толстого». В данном описании слишком много слов, которые не несут важной информации для пользователя (известнейшего, талантливого, великих), а так же главное ключевое слово -- Лев Толстой -- помещено в конце описания. Страница с такими метаданными не будет высоко проиндексирована роботами и вряд ли попадет в ТОП-10 поисковой выдачи.

Рисунок 1.2 -- Метаданные портала «Культура.РФ»

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

Пример наиболее популярного сервиса для поиска ключевых слов и анализа поисковых запросов -- Wordstst -- представлен на рисунке 1.3. В данном случае происходит поиск наиболее популярных запросов пользователей по ключевому слову «Лев Толстой». Кроме того, можно увидеть, что ищут жители конкретных регионов страны, указав для сервиса значение «По регионам».

С помощью подобных сервисов можно узнать, что именно популярно в данный момент у пользователей и составить метаданные.

Существует несколько позиций сайта, в которые необходимо поместить собранные ключевые слова:

Заголовки и описание сайта (и каждой страницы в отдельности);

Подзаголовки H1;

Содержимое;

Внутренние и внешние ссылки;

Текстовые описания к изображениям.

Рисунок 1.3 -- Сервис для подбора слов Wordstat

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

Кроме указанных выше критериев, которым должна соответствовать статья, для того, чтобы она была успешно прошла ранжирование, есть и другие не менее важные:

текст на странице должен быть уникален;

достоверность статьи и компетентность автора должны быть высоки;

грамматических ошибок в тексте быть не должно.

1.2.2 SEO-аналитика

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

Отследить положение в поисковых системах;

Использовать сервис для аналитики показателей сайта Яндекс.Метрика;

Использовать сервис для аналитики сайтов Google Analytics;

Использовать сервис для аналитики поведения пользователей на сайте Яндекс.Вебмастер.

Самый простой способ -- просмотр в поисковых системах положения страницы по определенному запросу (тому, который указан в мета-теге title). Это простой и не требующий дополнительных средств, в том числе и денежных, способ, но он имеет ряд недостатков -- поисковые системы могут запомнить страницы, на которые пользователь часто заходит; кроме того, аналитик уже знает по какому именно запросу необходимо искать конкретную статью и такой поиск не отражает полной картины поиска другими пользователями.

Яндекс.Метрика -- сервис для аналитики показателей сайта, таких как количество просмотров страницы, время просмотра, глубина, откуда пользователь перешел на сайт, так же можно увидеть запросы, по которым чаще всего переходят на портал. По большому количеству данных строятся графики, по которым удобно отследить динамику изменений позиций материала в поисковой системе и интерес к нему пользователей. На рисунке 1.4 представлены основные позиции, которые можно отследить с помощью Яндекс.Метрики.

Верхний левый график дает возможность узнать, откуда пользователи переходили на портал -- по ссылкам на сайте, прям заходам, из поисковиков -- каждый источник представлен на графике, на нем видно, как меняется количество переходов на портал.

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

В центре сверху расположена таблица с поисковыми запросами, по которым чаще всего пользователи переходят на портал, анализируя их, можно составлять планы по выпуску будущих материалов.

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

Рисунок 1.4 -- Сервис Яндекс Метрика

Справа представлены данные, которые отражают поведение пользователей на сайте. Отказы -- если пользователь провел на странице менее 15 секунд, а так же не было перехода на другие страницы на портале. Глубина просмотра -- количество просмотров страниц сайта в рамках одного визита. Время на сайте -- разница по времени между первым и последним событием в визите.

Для всех перечисленных данных можно указать дату или временной промежуток, для которого необходимо получить информацию.

Google Analytics -- сервис для аналитики позиций сайта, в отличии от Яндекс.Метрики в нем можно получить информацию по отдельно взятой странице, а не по порталу в целом. Кроме того, в данном сервисе можно создавать ярлыки -- это шаблон, который аналитик настраивает для какой-то конкретной задачи, например, если необходимо смотреть переходы с конкретного сайта. На рисунке 1.5 представлен пример работы сервиса. Вверху представлен график просмотров материалов портала «Культура.РФ» за временной отрезок с 1 марта по 12 мая 2017 года. Так же представлены самые популярные материалы и информация о них -- сеансы (количество просмотров), новые сеансы (доля посетителей сайта, которые зашли на него впервые), новые пользователи (количество новых пользователей), показатель отказов, страниц/сеанс (среднее количество страниц, просмотренное в ходе одного сеанса), средняя длительность сеанса.

Рисунок 1.5 -- Сервис Google Analytics

Это важные показатели, т.к. от поведения пользователей и их интересов зависит то, какие материалы в дальнейшем будут создаваться.

Яндекс.Вебмастер -- сервис, с помощью которого можно отследить популярные запросы пользователей, по которым они переходят на портал. Кроме того, в Вебмастере содержатся данные о состоянии сайта в целом -- какие ошибки происходят, указаны проблемы со ссылками, также можно отправить страницу на переиндексацию -- если произошли изменения в контенте страницы или в мета-данных, можно указать это поисковому роботу путем отправления материала на переиндексацию. На рисунке 1.6 представлена основная информация о портале.

Слева сверху указаны проблемы сайта, в данном примере проблем не обнаружено.

Слева внизу показан график кликов в поиске -- это общее количество появления в поисковике ссылок на портал и количество кликов -- переходов по этим ссылкам. Важным показателем работы сайта является количество переходов на него, а так же время, которое пользователь проводит на страницах портала. Эти показатели необходимо отслеживать ежедневно для составления четкой картины работы веб-сервиса.

Справа представлены данные о добавленных, т.е. проиндексированных ссылках и удаленных по разным причинам, например, если есть дубль ссылки, то одна из них удаляется аналитиком.

Рисунок 1.6 -- Сервис Яндекс.Вебмастер

Важно отслеживать все ошибки и вовремя их устранять, т.к. чем меньше ошибок, тем более высокий рейтинг имеет сайт.

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



1.3 Описание и анализ предметной области

1.3.1 Процесс работы SEO-оптимизатора и аналитика

Работа SEO-оптимизатора и аналитика представляет собой линей процесс последовательных действий, которые чаще всего выполняет один человек. Данная работа связана непосредственно с редакцией сайта. Процесс работы оптимизатора и аналитика представлен на рисунке 1.7.

Рисунок 1.7 -- Процесс работы SEO-оптимизатора и аналитика

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

После этого происходит сбор ключевых слов для данного материала, для этого используется сервис для подбора слов Wordstat, о котором было рассказано выше.

Следующим этапом является составление метаданных -- title и description -- учетом всех правил для написания заголовка и описания и с применением собранного ранее списка ключевых слов и фраз.

Далее происходит проверка непосредственно текста. Он проверяется на заспамленность, уникальность, орфография отслеживаются самые часто повторяющиеся слова, а так же количество символов. После проведенного анализа, его результаты передаются в редакцию. Когда есть проблемы с текстом, он отдается обратно автору, которому разъясняется, что именно нужно исправить и как. После того, как текст переработан и откорректирован, он проверяется повторно. Если же текст соответствует всем правилам, то редакции рекомендуется продолжать писать в таком же стиле и по таким же правилам.

После того, как материал был опубликован, необходимо отследить его положение в выдаче поисковых систем, а так же количество посетителей. Это можно сделать с помощью Google Analytics.

В большинстве случаев на этом работа SEO-оптимизатора и аналитика с материалом заканчивается.

1.3.2 Проблемы SEO-оптимизации

Для того чтобы указанные выше требования для написания метаданных и текста были исполнены, SEO-аналитику необходимо провести анализ текста с помощью различных сервисов и самому сделать вывод, является ли текст SEO-оптимизированным. Так как сервиса, в котором бы были собраны все необходимые проверки, не существует, а так же отсутствуют ресурсы для проверки правильности составленных метаданных, осуществить анализ достаточно сложно.

Именно поэтому важно, чтобы все указанные выше параметры можно было проверить в одном приложении и узнать вероятность ранжирования данной страницы.

Кроме того, начинающему SEO-оптимизатору достаточно сложно получить достоверную информацию о том, каким правилам должны отвечать title, description и текст, так как много источников, которые очень сильно разнятся между собой в рекомендациях.

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

Кроме переходов между веб-страницами, время так же необходимо на постоянное копирование текстов со страницы и вставление их в соответствующие приложения.

SEO-аналитику так же важно правильно использовать ключевые слова и фразы и контролировать количество их вхождений в title, description и текст. Это особенно вызывает затруднения у начинающих специалистов.

1.4 Обзор и анализ аналогов программной системы

1.4.1 «Text.ru»

Самый популярный сервис у большинства пользователей -- text.ru, ранее ничем не отличающийся от своих аналогов. Как утверждают разработчики, они избавились от проверки уникальности текста методом шинглов, что позволило более точно определять повторы текста или его рерайт.

Рерайт текста - это изложение текста своими словами с сохранением смысла оригинального материала. Сегодня в глобальной сети можно найти любую информацию. Но на веб-ресурсах размещать украденную статью не рекомендуется. В противном же случае, веб-страница будет заблокирована поисковыми системами.

Text.ru может выявить рерайт даже с учетом перестановки слов, изменения окончаний и разбавления фраз своими словами. Однако такая система имеет и значительные минусы даже для тех, кто не использует чужие материалы в своей работе -- тексты со специфичными терминами, написанные, например, для различных видов строительства, производства и те, где описаны сложные технологические процессы, полностью уникальными бывают крайне редко. Стоит учитывать это при проверке технических текстов, и не стремиться к достижению их уникальности в 100%.

Пример работы данного сервиса представлен на рисунке 1.8.

Проверка осуществляется на бесплатной основе после регистрации, но часто приходится недолго ждать своей очереди. Кроме этого, этот сервис делает подробный SEO-анализ текста: считает тошнотность, «водность», определяет ключевые слова, а так же указывается количество символов и слов в тексте, что очень важно при SEO-аналитике. Тошнота текста - это показатель, определяющий частоту использования какого-либо слова в текстовом документе. Важна не только частотность слов из ключевой фразы, но и любых других слов, употребляемых в тексте. [6]

Рисунок 1.8 -- «Онлайн-сервис проверки текста на уникальность Text.ru»

Text.ru является удобным сервисом, но для SEO-аналитика недостаток его в том, что необходимо несколько раз копировать и вставлять данные -- непосредственно текст, title и description. Кроме того, нет аналитики именно для метаданных, то есть анализа количества символов и положения ключевых слов в них.

1.4.2 «Miratext»

Популярным сервисом для проверки семантического анализа текста является сервис Miratext. [7]

Данный сервис является достаточно удобным для SEO-аналитики текста. Одним из важнейших его положительных свойств является то, что нет необходимости копировать текст и вставлять его в сервис, чтобы проверить. Вместо этого можно ввести в специальное поле URL страницы и запустить проверку.

Миратекс создает несколько отдельных таблиц по различным критериям анализа. Например, можно получить информацию о количестве символов, «тошноте» текста, количестве повторений одного слова в тексте, а так же словосочетаний и трех слов. Пример такой таблицы представлен на рисунке 1.9. Так же есть таблица с рекомендациями, количество каких слов необходимо уменьшить в тексте -- пример представлен на рисунке 1.10.

Кроме того, всю полученную информацию можно экспортировать в формате XLS.

Рисунок 1.9 -- «Miratext»

Рисунок 1.10 -- «Miratext»

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

1.4.3 «Advego»

Advego. Данный сервис разработан с классическим алгоритмом проверки уникальности с помощью метода шинглов. Проверку на орфографию можно провести онлайн, для проверки на уникальность необходимо устанавливать программу на компьютер. Программа быстро устанавливается и имеет понятный интерфейс. Пример работы программы представлен на рисунке 1.11.

Рисунок 1.11 -- «Advego»

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

Первая цифра показывает уникальность текста, вторая -- процент рерайта. Результаты глубокой проверки отличаются от быстрой довольно существенно. Большинство специалистов по продвижению и SEO предпочитают доверять глубокой проверке. Так же определяется показатель классической и академической тошноты документа. [8]

Показатель классической тошноты - это квадратный корень из числа, обозначающего частоту употребления слова в тексте. Например, если слово встречается в тексте 16 раз, его классическая тошнота равна 4. При этом объем текста в расчет не берется.

Какая должна быть тошнота текста? Считается, что максимально допустимое значение классической тошноты текста - 7. Если показатель выше этой цифры, текст может быть оценен поисковиками как спам.

Академическая тошнота текста -- это отношение количества повторов самого употребляемого в документе слова к количеству слов во всем тексте. Она измеряется в процентах. Иными словами, академическая тошнота - это показатель частотности.

Данная программа так составляет отчет по количеству символов в тексте, количеству грамматических ошибок, составляет семантическое ядро текста, то есть список слов, которые чаще всего повторяются в тексте.

Небольшой минус данной программы, как и всех аналогичных -- необходимость вводить капчу, чтобы поисковые машины не блокировали запрос программы, а так же то, что программу нужно скачивать и устанавливать на компьютер. И так же нет аналитики отдельно для мета-данных.

1.4.4 «Seop.ru»

Данный сервис так же предоставляет функционал для анализа сайта и страниц сайтов. В специальное поле можно вставить URL страницы и сервис самостоятельно получит все необходимые для анализа данные, а именно -- текст и теги title, description, keywords, а так же h1-h6. [9]

Сервис предоставляет общую информацию по ресурсу -- размер страницы, код ответа сервера и советы по оптимизации. Так же предоставляется информация по метаданным -- а именно соответствие тегов тексту и так же предоставляются советы.

Кроме того, анализируются описания изображений и ссылок. Так же есть анализ непосредственно текста -- общее количество слов и количество вхождений слов в текст. Пример работы данного сервиса представлен на рисунке 1.12.

Недостатками данного сервиса являются следующие факторы:

текст не представлен на странице;

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

отсутствует работа с ключевыми словами.

Рисунок 1.12 -- «Seop.ru»

Указанные выше сервисы имеют ряд недостатков. Одним из важнейших из них является то, что для каждого из них необходимо копировать информацию и вставлять ее. Безусловно, скопировать ссылку легче, чем текст, но при условии масштабной работы со страницами, даже это копирование займет много лишнего времени и усложнит работу SEO-аналитика и оптимизатора.

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

В таблице 1.1 представлен сравнительный анализ разрабатываемого программного обеспечения и имеющихся аналогов.

Таблица 1.1 -- Сравнение аналогов и разрабатываемого ПО по основным критериям

Сервисы/Критерии	Text.ru	Miratext	Advego	Seop.ru	Разрабатываемое ПО
Количество символов	+	+	+	--	+
Орфография	+	--	+	--	+
Заспамленность	+	+	+	--	+
Работа с ключевыми словами	--	--	--	+	+
Работа с метаданными	--	--	--	+	+
Получение контента по ссылке	--	+	--	+	+
Рекомендации	--	+	--	+	+

Не во всех сервисах есть подсказки для пользователя, то есть советы и рекомендации по улучшению контента.

Разрабатываемое программное обеспечение представляет собой расширение для Chrome, которое при открытии страницы будет анализировать метаданные и текст данной страницы с точки зрения SEO-аналитики. Данная программа самостоятельно получает все указанные выше данные и выдает рекомендации для аналитика по улучшению метаданных и текста страницы. Пользователь данного расширения может указать ключевые слова (фразу) для которых написан данный контент и программа отследит положение данных слов и предложит, как усовершенствовать эти позиции.

Кроме того, для всех проверяемых позиций можно изменить значения, установленные по умолчанию, в зависимости от своего мнения.

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

Из таблицы видно, что есть сервисы, которые работают непосредственно с текстом, а есть, которые направлены больше на SEO-оптимизацию и аналитику, такие сервисы работают с ключевыми словами и метаданными. Разрабатываемое программное обеспечение было создано с целью объединения аналитики текста и SEO- показателей.



1.5 Среда разработки

1.5.1 Sublime Text

Sublime Text -- кроссплатформенный проприетарный текстовый редактор. Поддерживает плагины на языке программирования Python.

Программа часто используется как редактор исходного кода или HTML.

Некоторые возможности:

Быстрая навигация (Goto Anything)

Командная палитра (Command Palette)

API плагинов на Python

Одновременное редактирование (Split Editing)

Высокая степень настраиваемости (Customize Anything)

Поддержка языков

Sublime Text поддерживает большое количество языков программирования и имеет возможность подсветки синтаксиса для C, C++, C#, CSS, D, Dylan, Erlang, HTML, Groovy, Haskell, Java, JavaScript, LaTeX, Lisp, Lua, Markdown, MATLAB, OCaml, Perl, PHP, Python, R, Ruby, SQL, TCL и XML.

В дополнение к тем языкам программирования, которые включены по умолчанию, пользователи имеют возможность загружать плагины для поддержки других языков.

Sublime Text может быть оснащен менеджером пакетов, который позволяет пользователю находить, устанавливать, обновлять и удалять пакеты без перезагрузки программы. Менеджер поддерживает установленные пакеты в актуальном состоянии, загружая новые версии из репозиториев. Кроме того, он предоставляет команды для активации и деактивации установленных пакетов.

Некоторые особенности программы:

Интерфейс. Редактор содержит различные визуальные темы, с возможностью загрузки дополнительных. Пользователи видят весь свой код в правой части экрана в виде мини-карты, при клике на которую можно осуществлять навигацию.

Есть несколько режимов экрана. Один из них включает от 1 до 4 панелей, с помощью которых можно показывать до четырёх файлов одновременно. Полноценный режим показывает только один файл без каких-либо дополнительных вокруг него меню.

Выделение столбцов и множественная правка. Выделение столбцов целиком или расстановка несколько указателей по тексту, что делает возможным мгновенную правку. Указатели ведут себя, будто каждый из них -- единственный в тексте. Команды типа: перемещение на знак, перемещение на строку, выборка текста, перемещение на слово или его части, перемещение в начало/конец строки и т. д., влияет на все указатели независимо и сразу, позволяя править сложноструктурированный текст быстро, без использования макрокоманд или регулярных выражений.

Автодополнение. Когда пользователь набирает код, Sublime Text, в зависимости от используемого языка, будет предлагать различные варианты для завершения записи. Редактор также автоматически завершает созданные пользователем переменные.

Подсветка синтаксиса и высокая контрастность. Тёмный фон Sublime Text предназначен для увеличения контрастности текста. Основные элементы синтаксиса выделены разными цветами, которые лучше сочетаются с тёмным фоном, нежели со светлым.

Поддержка систем сборки. Sublime Text позволяет пользователю собирать программы и запускать их без необходимости переключаться на командную строку. Пользователь может настроить свою систему сборки и включить автоматическую сборку программы каждый раз при сохранении кода.

Заготовки (сниппеты). Сохранение фрагментов часто используемого кода, ключевые слова для их запуска.

Переход по файлам. Навигационный инструмент, который позволяет пользователям перемещаться между файлами, а также внутри них, с помощью нечёткого поиска.

Другие особенности:

Дополнительно реализована функция автосохранения, помогающая пользователям не потерять проделанную работу.

Настраиваемые комбинации клавиш и инструмент навигации позволяют назначать свои комбинации клавиш для меню и панелей инструментов.

Возможность поиска по мере набора используется для поиска в документе.

Функция проверки синтаксиса работает подобным же образом, проверяя корректность прямо во время ввода.

Есть возможность автоматизации с помощью макросов и повтора последних действий.

Команды редактирования, включая редактирование отступов, переформатирование параграфов и объединение строк.

1.5.2 Chrome Dev Tools

Современные браузеры поддерживают режим разработчика. Инструменты разработчика удобны для исправления ошибок, так как с их помощью можно проверить код проще и быстрее. На данный момент наиболее функциональными являются инструменты Google Chrome.

DevTools предоставляет веб-разработчикам доступ к коду браузера и веб-приложению. DevTools необходимо использовать для эффективного отслеживания вопросов компоновки, установления точек останова JavaScript, и получения информации для оптимизации кода.

DevTools позволяет эмулировать проект под большое количество мобильных устройств и планшетов. Также можно выставить скорость соединения и проверить как грузится проект на ограничениях в несколько Кб/сек, чтобы понимать количество времени необходимого для загрузки сайта и для его оптимизации в целом.

В DevTools организованы группы в панели инструментов в верхней части окна. Каждый элемент панели инструментов и соответствующая панель позволяют работать с определенным типом страницы или приложения.

Существует восемь основных групп инструментов, доступных для разработчика:

elements -- позволяет увидеть все в одном DOM дереве, анализировать и редактировать элементы DOM.;

network -- дает представление о ресурсах, которые запрашиваются и загружены по сети в режиме реального времени. Выявление и устранение этих запросов, является важным шагом в оптимизации страницы.

resources -- позволяет просматривать ресурсы, которые загружаются в проверяемой странице;

sources -- так как сложность в JavaScript - приложений растет, разработчики нужны мощные инструменты отладки , чтобы помочь быстро обнаружить причину возникновения проблемы и исправить это эффективно. В Chrome DevTools включает ряд полезных инструментов, чтобы помочь сделать отладки JavaScript менее болезненным;

timeline --дает полный обзор того, где тратится время. Анализируются все события, загрузки ресурсов для разбора JavaScript, вычисление стилей и др. Все данные переносятся на график;

profiles -- позволяет профилировать время выполнения и использование памяти веб-приложения или страницы. Это поможет понять, где именно тратятся ресурсы, и поможет оптимизировать код;

audits -- панель аудита может анализировать страницу, как он загружается. Затем предоставляются предложения для оптимизации, уменьшения времени загрузки страницы и увеличения воспринимаемой (и реальной) отзывчивости;

консоль.

Консоли JavaScript обеспечивает две основные функции для разработчиков тестирования веб-страниц и приложений:

Вход диагностической информации в процессе работы.

Создание оболочки, которая может быть использована для взаимодействия документов и Devtools.

Выводы

В данном разделе была приведена постановка целей и задач данной работы, а также описание предметной области и выявленные проблемы в ней. Также изучены и проанализированы существующие аналоги разрабатываемого программного обеспечения, выявлены их достоинства и недостатки. Обоснована актуальность разработки программного обеспечения. Обоснован выбор средств разработки. Накоплены и систематизированы знания, которые понадобятся для дальнейшего проектирования программного обеспечения.



2. Проектирование программного обеспечения

2.1 Описание функциональности системы

Для данного проекта было принято решение создать расширение для браузера Google Chrome, так как это упрощает и ускоряет работу аналитика.

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

Кроме того, начинающие аналитики часто путаются и не могут правильно прописывать метаданные и использовать ключевые слова.

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

2.1.1 Описание приложения в виде пользовательского сценария

В разрабатываемом программном обеспечении присутствует страница всплывающего окна, которое видит пользователь и страница с параметрами.

При загрузке страницы, пользователь видит значок расширения, пример представлен на рисунке 2.1.

Рисунок 2.1 -- Значок расширения

После нажатия на данный значок, у пользователя появляется выбор в действиях. Схема пользовательского сценария представлена на рисунке 2.2.

Рисунок 2.2 -- Описание приложения в виде пользовательского сценария

Изначально пользователь видит основные показатели страницы -- title, description и количество символов в них, а так же индикаторы, обозначающие необходимо ли исправление данных показателей. После этого пользователю будут представлены рекомендации по оптимизации и он может закончить работу с приложением.

Если же пользователь введет в поле «Ключевая фраза» соответствующие данные, то он сможет увидеть аналитику и рекомендации по данному критерию.

Кроме того, пользователь может изменить прописанные по умолчанию критерии аналитики. Для этого необходимо нажать на кнопку «Настройки» и перейти на страницу, где в соответствующие поля ввести значения, которые пользователь считает более правильными. После этого необходимо нажать кнопку «Сохранить» и все указанные параметры будут сохранены.

2.1.2 Указание параметров аналитики страницы

Для того, чтобы правильно проанализировать предоставленную пользователем страницу, необходимо знать к какой теме относится данная публикация, а следовательно, знать ключевые фразы, которые в ней использовались.

Для указания ключевой фразы программе, есть поле ввода, куда пользователь прописывает ключевую фразу. Так как SEO-аналитики работают по заказу компаний, создающих такие страницы, то аналитик может получить данные о ключевых словах непосредственно от редакции и авторов публикации или же самому составить «ключевики» по прочитанному материалу.

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

длина title;

длина description;

максимальное количество ключевых слов в title;

максимальное количество ключевых слов в description;

положение ключевых слов в title (как далеко от начала они могут находиться);

положение ключевых слов в description;

2.2 Проектирование расширения для браузера Google Chrome

Расширения представляют собой небольшие программы, которые могут изменять и улучшать функциональные возможности браузера Google Chrome. Схема структуры приложения представлена на рисунке 2.3.



Рисунок 2.3 -- Схема структуры приложения

Расширение для браузера Google Chrome состоит из нескольких основных частей:

Манифест?--?главный файл в chrome расширении, поскольку в нем находится информация о доступах, которые нужны, о подключаемых файлах, настройки безопасности и многое другое. Например:

Manifest_version -- версия манифест файла;

Name -- название расширения;

Description -- описание расширения;

Version -- версия расширения;

Permissions -- массив с названиями доступов, которые необходимы для корректной работы расширения, например, без пермишина tabs пользователь не сможет работать с вкладками браузера;

Content_scripts -- массив файлов, которые будут подключены как контент-скрипты;

Background -- описание файла или файлов, которые будут выполнять роль background скрипта и страницы;

Web_accessible_resources -- набор файлов, которые имеют открытый доступ извне;

Browser_action -- настройка соответствующей кнопки, в тулбаре;

Icons -- списки иконок по стандартным размерам 16х48 и 128х128.

Backgound -- модуль, который запускается при открытии браузера и работает на протяжении всей работы пользователя с браузером. В определенный момент времени может быть запущен только один экземпляр данного модуля. Обычно являются корневыми модулями для структуры расширения. Чтобы оптимизировать использование ресурсов, была разработана концепция Event Pages. Она выполняет те же функции что и Background-страница, но призвана решить проблему производительности и ресурсов, которые используются иррационально. Главное отличие этого подхода -- вместо непрерывной работы в фоновом режиме, Event Page запускается только тогда, когда нужно, например, чтобы обработать конкретное событие. После чего выгружается, освобождая память до того момента пока конкретное событие не сработает в следующий раз. Схемы работы данного модуля представлены на рисунке 2.4 и 2.5.

Рисунок 2.4 -- Схема работы модуля Background №1

Рисунок 2.5 -- Схема работы модуля Background №2

Content -- модуль, который встраивается в код каждой страницы, открытой пользователем. Данный модуль единственный может каким-либо способом взаимодействовать с данными страницы. Все остальные модули могут взаимодействовать со страницей только посредством данного модуля и обмена сообщениями с ним. Схема работы данного модуля представлена на рисунке 2.6.

Options -- модуль, предназначенный для взаимодействия пользователя с настройками расширения. Представляет собой отдельную веб-страницу.

Рисунок 2.6 -- Схема работы модуля Content

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

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

Для Chrome расширений, действует так называемое Content Security Policy -- это набор строгих правил, которые необходимы для того, чтобы сделать расширения безопасней и контролировать контент, который может быть загружен и выполнен в расширении.

По умолчанию, если использовать манифест 2 версии, то в расширении будут присутствовать следующие ограничения:

Запрещено использовать eval и схожие функции;

Запрещен inline javascript;

Возможность загружать только локальные скрипты и ресурсы.

Так как background страница находится в другой области видимости чем, например, content модуль, который выполняется в контексте веб-страницы, необходим какой-то способ коммуникации между Content Scripts и Background scripts.

Эту возможность предоставляет API. Chrome Javascript API вводит концепцию Message Passing, с помощью которой и происходит коммуникация. Background страница может подписываться на сообщения, которые пришли из content script и наоборот, кроме того давать ответ в том же канале. API дает возможность работать с короткими запросами похожими больше на события и долговременными.

В разрабатываемом расширении будут присутствовать все основные модули:

Background будет отвечать за инициализацию и объявление опций по умолчанию. Опции сохраняются в специальном хранилище браузера, называемом locale storage.

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

Options отвечает за изменение пользователем различных параметров, связанных с расширением.

Content получается данные со страницы и преобразует их для обработки.

Popup отвечает за обработку данных со страницы и вывод пользователю рекомендаций.



2.3 Язык программирования

Единственным языком программирования, который может выполняться в браузерах является JavaScript. Именно он был использован в данном проекте.

JavaScript -- мультипарадигменный язык программирования, он поддерживает объектно-ориентированный, императивный и функциональный стили.