Go Analytics! 2018

Разработка страниц сайта c использованием Script Languages и Cascading Style Sheets

Россия+7 (495) 960-65-87
Шрифт:
0 2581

1. Введение
2. Языки сценариев
3. Каскадные таблицы стилей
4. Заключение

1. Введение

Когда робот поисковой системы посещает страницу, он просматривает ее видимый пользователю текст, кроме этого – содержание различных тегов в исходном коде страницы (тег title, meta-теги keywords и description и др.), а так же ссылки на странице. Проанализировав полученную информацию, поисковая машина решает, о чем идет речь на данной странице. Есть много критериев, используемых для выявления основных значимых моментов страницы. У каждой поисковой системы есть собственный алгоритм для обработки и оценки получаемой информации.

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

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

Но иногда возникают препятствия, даже если на видном месте страницы расположено достаточное количество текста, насыщенного ключевыми словами. Два таких затруднения – код языков сценариев (Script Languages) и код каскадных таблиц стилей (Cascading Style Sheets) – можно легко устранить.


2. Языки сценариев

1. Препятствия для пользователей

Script Languages – это интерпретируемые языки программирования, встраиваемые в страницы и используемые, в основном, для создания сценариев поведения браузера.

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

Программы на языке Script Languages включаются в состав html документа для создания динамических страниц. Например, использование Script Languages позволяет использовать на сайте интерактивные меню, проверять введенные в форму данные до ее отправки (экономя тем самым трафик пользователя), встраивать в страницу rss-ленты новостей и пр.

Но при этом следует учитывать, что при использовании Script Languages некоторые посетители сайта не смогут увидеть всех элементов страницы (это может произойти, например, если они пользуются антивирусом, не разрешающим загрузку скриптов со страниц).

В процессе разработки сайта, продвижении его в поисковых системах помните, что даже при условии, что скрипты, используемые на сайте, безопасны для компьютера пользователя, он (пользователь) может настроить свой браузер на то, чтобы запретить использование Script Languages. В этом случае внешний вид сайта может измениться не в лучшую сторону (рис. 1, 2).

Рис. 1. Главная страница сайта www.m-w.com (выполнение скриптов разрешено)

Рис. 2. Главная страница сайта www.m-w.com (выполнение скриптов запрещено; как видно из рисунка, пропало навигационное меню слева и колонка Word of the Day справа)

2. Устранение препятствий для пользователей

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

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

Рис. 3. «Спадающее» меню на сайте ChipFind.ru (выполнение скриптов запрещено, но ссылка на другую страницу сайта активна)

Рис. 4. «Спадающее» меню на сайте ChipFind.ru (выполнение скриптов разрешено, пользователь имеет возможность заполнить регистрационную форму)

В случае проверки введенных в форму данных до ее отправки, встраивания новостных лент данные методы не пригодны. В этом случае лучше отказаться от использования на странице Script Languages и перейти на использование других языков программирования, применяемые при создании html-страницы (например, PHP, Perl и т.д.), которые будут выполняться на сервере, а не на компьютере пользователя.

3. Препятствия для поисковых систем

Большие объемы кода Script Languages, содержащегося в коде страницы, могут быть препятствием для анализа содержания страницы поисковыми системами, что может серьезно навредить позициям сайта в целом. Значит при разработке сайта и продвижении необходимо это учесть. Нередко на странице большой объем кода Script Languages содержится в разделе head – заголовке html-документа, где обычно многими определяются переменные, функции и пр.

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

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

4. Устранение препятствий для поисковых систем

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

Например, исходная страница сайта page.html может выглядеть примерно так (в данном примере и ниже используется язык сценариев JavaScript; в примере реализуется вывод текущей даты и текущего времени на странице сайта):

html>
head>
title>Заголовок страницы/title>

script language="javascript" type="text/javascript">
function GetTheDate()
{
  var now = new Date();
   var year = now.getYear();

   if (year     year += 1900;

    var day = now.getDay();
    var month = now.getMonth();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();

   if (hours > 23)
    hours -= 24;

    var cdate = "! На часах " + hours + ":" + minutes + ":" + seconds + ".
" +
    "Сегодня " + day + "/" + month + "/" + year + ".";

   if (document.all)
     document.all.clock.innerHTML = cdate;
   else
     if (document.getElementById)
     document.getElementById("clock").innerHTML = cdate;
     else
     document.write(cdate);
}

if (!document.all && !document.getElementById)
   GetTheDate();

function Run()
{
   if (document.all document.getElementById)
    setInterval("GetTheDate()", 1000);
}
/script>

/head>

body onLoad="Run();">
...текст страницы...
/body>

/html>

После того, как избавились от помещенного на странице кода JavaScript, новая страница page.html будет выглядеть следующим образом:

html>
head>
title>Заголовок страницы/title>
< script language="javascript" src="services.js" type="text/javascript">
< /head>

< body>
< b>...текст страницы...
< /body>

< /html>

Обратите внимание, что тег script пополнился атрибутом src. Значение, присвоенное этому атрибуту, – это имя внешнего файла, содержащего код JavaScript. Как правило, такие внешние файлы получают расширение js, показывающее, что они содержат код JavaScript. Будьте внимательны: здесь присутствуют оба тега – открывающий < script> и закрывающий , хотя между ними ничего не находится.

Здесь (как и в предыдущем случае) атрибут language="javascript" показывает, что мы «подключаем» файл JavaScript. Также необходимо определить MIME-тип этого файла в атрибуте type="text/javascript".

После того, как была изменена страница page.html, создается новый файл (назовем его services.js), содержащий код, ранее содержавшийся в тегах script (выделено курсивом).

Для нового файла не требуется html-разметка. Он содержит только код, который первоначально находился между тегами script. Обратите внимание и на то, что процедуру загрузки используемой функции Run() также можно будет вынести в файл services.js, в который достаточно добавить в самый конец файла строчку следующего вида:

window.onload = Run;

3. Каскадные таблицы стилей

Cascading Style Sheets – это определенный набор свойств для определения внешнего вида документа. С его помощью web-дизайнер сможет полностью контролировать стили и расположения каждого элемента страницы Вашего сайта, что гораздо проще и удобнее использования обычных HTML-тегов.

Как и в случае с кодом Script Languages, причиной осложнения работы поисковых систем может быть и код Cascading Style Sheets, когда он помещен на страницу. Этот код необходимо убрать со страницы по тем же причинам, что и код Script Languages – поскольку он отодвигает основное содержание от начала страницы и уменьшает плотность ключевых слов.

1. Устранение затруднений с Cascading Style Sheets

«Избавление» от кода Cascading Style Sheets на странице сайта подобно «подключению» JavaScript из другого файла; в синтаксисе же имеются некоторые отличия.

Например, исходная страница – page.html – могла иметь следующий вид:

html>
head>
title>Заголовок страницы/title>

style>
* {
   font-family: Arial, Helvetica, Sans-Serif, Tahoma, Verdana;
   font-size: 12px;
   padding: 0px;
   margin: 0px;
}

body {
   color: black;
   background-color: #ffffff;
   scrollbar-face-color: #cccccc;
   scrollbar-highlight-color: #f2f2f2;
   scrollbar-shadow-color: #a2a2a2;
   scrollbar-3dlight-color: #b2b2b2;
   scrollbar-arrow-color: #666666;
   scrollbar-track-color: #ededed;
   scrollbar-darkshadow-color: #f2f2f2;
}

h1 {
   color: #003366;
   font-size: 20px;
   font-weight: normal;
}

h2 {
   color: #ffffff;
   background: url("images/menu.gif");
   border: 1px solid #003366;
   border-bottom: 0px;
   font-weight: bold;
   text-align: center;
   padding: 4px;
}

h3 {
   color: #95d609;
   font-size: 14px;
   font-weight: normal;
   text-align: right;
   padding: 4px;
}
/style>

/head>

body>
...текст страницы...
/body>

/html>

Необходимо перенести код Cascading Style Sheets в отдельный файл, а с исходной страницы удалить его и добавить ссылку, указывающую на файл, содержащий теперь код:

html>
head>
title>Заголовок страницы/title>

/head>

body>
...текст страницы...
/body>

/html>

Обратите внимание на появившийся тег link, который содержит информацию трех типов. Данная информация понадобится браузеру для «восстановления» кода страницы во время посещения ее пользователями. Атрибут rel="stylesheet" показывает, что мы «подключаем» файл Cascading Style Sheets. Атрибут href="styles.css" указывает на внешний файл, содержащий код Cascading Style Sheets. Типичное расширение подобных файлов – css, показывающее, что они содержат данный код. В завершение необходимо определить MIME-тип этого файла в атрибуте type="text/css".

После того, как была изменена страница page.html, создается новый файл (назовем его styles.css), содержащий код, ранее содержавшийся в тегах style (выделено курсивом).

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

4. Заключение

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

Но может быть стоит совсем отказаться от использования Script Languages и Cascading Style Sheets? Тогда и проблема исчезнет сама собою…

Если на сайте используется одинаковое оригинальное оформление для каждой страницы, то без Cascading Style Sheets просто не обойтись. Они позволяют хранить цвет, размеры текста и другие параметры в стилях, что позволяет одним действием применить сразу всю группу атрибутов форматирования к различным элементам страницы, чтобы быстро изменить ее внешний вид (причем для каждой страницы сайта одновременно). Если Cascading Style Sheets хранятся во внешнем файле, то и загрузка сайта будет происходить быстрее, т.к. браузер кэширует такие документы.

Что же касается Script Languages, то сегодня использование скриптов на сайте – правило «хорошего тона»: хочешь быть лучшим – удивляй! А создание интерактивной динамически изменяющейся страницы без использования скриптов, пожалуй, не возможно.

Для написания сложных скриптов (например, создание рассылки), возможно, стоит воспользоваться такими языками программирования как PHP, C++ или им подобными, которые в отличие от Script Languages будут выполняться на сервере, а значит работать будут быстрее. Пользователь же в этом случае получит результат работы подобного скрипта, не имея возможности определить, каков был исходный код.

Читайте нас в Telegram - digital_bar

Есть о чем рассказать? Тогда присылайте свои материалы Даше Калинской


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
    ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
    Кейс: как продвинуть сайт производителя мебели на заказ в Москве
    Иван Стороженко
    16
    комментариев
    0
    читателей
    Полный профиль
    Иван Стороженко - Примерный бюджет 150 000 руб.
    Рейтинг «Известность бренда SEO-компаний 2017»: народное голосование
    Гость
    1
    комментарий
    0
    читателей
    Полный профиль
    Гость - 1) Ingate 2) Ашманов 3) Кокос 4) Russian Promo 5) Netpeak
    «Баден-Баден»: как выйти из-под фильтра
    Александр Кравцов
    1
    комментарий
    0
    читателей
    Полный профиль
    Александр Кравцов - Всем привет Вот ещё пациент www.gdebar.ru Под фильтром с 20 декабря, прошёл месяц, сегодня обновилось, что можете нажать сново проверить сайт и ждать 59 дней.Может кто сталкивался и сможет как то подсказать? Аудитом например или ещё как то проверить, что стоит подправить,скайп мой icejhell. Готов так же к совместному общению по решению проблемы. Всем успехов )
    Второе дыхание ссылочного продвижения
    Rookee.ru
    24
    комментария
    0
    читателей
    Полный профиль
    Rookee.ru - Еще лучше, когда продвижение осуществляется комплексно :)
    Исследование: влияние smart-ссылок на продвижение по СЧ-запросам
    Анатолий Шевчик
    1
    комментарий
    0
    читателей
    Полный профиль
    Анатолий Шевчик - +1097988
    Западные специалисты выяснили, как повысить позиции ресурса в выдаче Google
    Максим Мирошник
    2
    комментария
    0
    читателей
    Полный профиль
    Максим Мирошник -
    «Прямая линия» с Александром Алаевым («АлаичЪ и Ко»): отвечаем на вопросы
    Александр Алаев
    13
    комментариев
    0
    читателей
    Полный профиль
    Александр Алаев - Роман. Тут ответ очень простой. Каждый запрос можно четко разделить на коммерческий или некоммерческий. "Купить слона" и его длинные хвосты - коммерческий. "Как выбрать слона" и подобные - информационные. Вот под коммерческие ключи должны быть страницы услуг или каталога товаров. А под информационку - блог. Очень важно не путать их, тем более несоответствующая коммерческим факторам страниц просто не продвинется, то есть по запросу с "купить" блог никогда не будет показываться в выдаче, так же как и страница услуги/товаров не покажется по "как выбрать". Понятно примерно?
    Кейс: продвигаем бизнес по продаже пластиковых окон в Москве
    Иван Стороженко
    16
    комментариев
    0
    читателей
    Полный профиль
    Иван Стороженко - 1. По началу вообще не использовали, сейчас уже много каналов используется. 2. Все может быть, в принципе сайты должны быть удобны для пользователя, для этого и нужна схожесть между собой. Честно говоря старались брать все самое интересное у конкурентов + подкреплять своими идеями.
    Контекст под SEO. Как поисковая реклама помогает позициям в органической выдаче
    Сергей Дембицкий «Sima-Land.ru»
    22
    комментария
    0
    читателей
    Полный профиль
    Сергей Дембицкий «Sima-Land.ru» - Боже мой, неужели SEO-маги вернулись??? Открыть в роботс utm-метки для индексации и наплодить дублей...что? А расчеты в конце статьи про бюджет на SEO и контекст...откуда эти пропорции? Как по мне, SEO-магия вне Хогвартс. Спасибо, развеселили!
    Все, что нужно SEO-специалисту. Обзор инструментов
    Назар
    2
    комментария
    0
    читателей
    Полный профиль
    Назар - SE Ranking еще бывают траблы со съемом позиций, бывает запросы недогружает....
    ТОП КОММЕНТАТОРОВ
    Комментариев
    910
    Комментариев
    834
    Комментариев
    554
    Комментариев
    540
    Комментариев
    483
    Комментариев
    373
    Комментариев
    317
    Комментариев
    262
    Комментариев
    232
    Комментариев
    171
    Комментариев
    156
    Комментариев
    137
    Комментариев
    121
    Комментариев
    97
    Комментариев
    97
    Комментариев
    95
    Комментариев
    85
    Комментариев
    80
    Комментариев
    67
    Комментариев
    60
    Комментариев
    59
    Комментариев
    56
    Комментариев
    55
    Комментариев
    54
    Комментариев
    52

    Отправьте отзыв!
    Отправьте отзыв!