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

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

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"><< /script>
< /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>
<link rel="stylesheet" href="styles.css" type="text/css">
/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 будут выполняться на сервере, а значит работать будут быстрее. Пользователь же в этом случае получит результат работы подобного скрипта, не имея возможности определить, каков был исходный код.

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


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
    ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
    SEOnews и Serpstat запускают конкурс для интернет-маркетологов
    Marina Lagutina
    1
    комментарий
    0
    читателей
    Полный профиль
    Marina Lagutina - Добрый день! Видимо я из тех, кто пытается последней вскочить в уходящий поезд. Ночью написала статью на тему "обзор инструментов контент-маркетинга". Своего блога нет. Отправила вам не мейл. Я еще могу у вас разместиться или искать, кто возьмет статью к себе в блог?
    «Я оптимизировал сайт, а он не в ТОП! Что делать?»
    Павел Горбунов
    7
    комментариев
    0
    читателей
    Полный профиль
    Павел Горбунов - Как можно в инструменте tools.pixelplus.ru/tools/text-natural сравнить текст со страницы конкурента и со своей страницы? Я вижу возможность только для проверки одного урла.
    Монетизация сайта. Как, когда, сколько?
    Гость2
    1
    комментарий
    0
    читателей
    Полный профиль
    Гость2 - Руслан! Спасибо за ваш сервис и за данную статью в частности! С апреля являюсь вашим пользователем - очень доволен как сервисом, так и уровнем заработка! Еще раз спасибо, удачи вашему проекту!
    Влияние HTTPS на ранжирование региональных поддоменов в Яндексе
    Екатерина Иванова
    1
    комментарий
    0
    читателей
    Полный профиль
    Екатерина Иванова - Посмотрите на сколько упал трафик и на сколько потом вырос:упал на 10-20% на 1 месяц, а вырос в итоге в 5 раз. Одним мартовским трафиком всё падение перекрыли. Или можно ждать Яндекс неопределённое количество времени со стартовым уровнем трафика. Упущенные возможности и всё-такое.
    Мир глазами поисковых систем
    Александр Рунов
    7
    комментариев
    0
    читателей
    Полный профиль
    Александр Рунов - Какой регион, если не секрет? В Мск, в ряде ВК тематик (в тех же "окнах" или "колесах"), без работы с внешними факторами по ВЧ запросам в ТОП не выплывешь. Хотя в большинстве направлений вполне реально.
    Google.ru внесли в реестр запрещенных сайтов
    Гость
    1
    комментарий
    0
    читателей
    Полный профиль
    Гость - Гон, все работает и будет работать. Да и пусть банят, будет как с рутрекером.
    День рождения SEOnews: 12 лет в эфире!
    Анна Макарова
    308
    комментариев
    0
    читателей
    Полный профиль
    Анна Макарова - Ура )
    7 причин не работать на биржах копирайтинга
    Dasha Shkaruba
    6
    комментариев
    0
    читателей
    Полный профиль
    Dasha Shkaruba - Спасибо за мнение! Кстати, на бирже главреда прием анкет закрыт
    Инфографика: самые распространенные SEO-ошибки Рунета
    Alex Wise
    3
    комментария
    0
    читателей
    Полный профиль
    Alex Wise - Спасибо, Женя, за рекомендацию! :) Андрей, чтобы понять, какой программой пользоваться, нужно сделать несколько вещей: 1. Попробовать обе: у нас в Netpeak Spider бесплатный триал на 14 дней с полным функционало; у SFSS до 500 URL всегда бесплатно, но с ограниченным функционалом. 2. Понять свой стиль работы – если вы любите полный контроль и из-за этого более высокую скорость пробивки, тогда выбирайте Netpeak Spider. Если для вас не так важна скорость и количество пробитых URL, то можно остановиться на SFSS. 3. Определиться с нужными функциями: их в обоих программах очень много и как в Netpeak Spider есть уникальные, так и в SFSS есть свои уникальные. Мы всегда ориентируемся на то, чтобы быстро и чётко показать ошибки – для этого у нас вся таблица красится в соответствующие цвета. Думайте!) И, если что, обращайтесь с вопросами – мы будем рады помочь!)
    Интеграция call tracking и CRM: углубленный анализ данных о звонках и продажах
    Денис
    2
    комментария
    0
    читателей
    Полный профиль
    Денис - Какой смысл вообще в облачных CRM, обрезанный фугкционал, свое дописать невозможно, слив клиентов другим компаниям. Серверные бесплатные CRM куда надежней и кастамизируй как хочешь.
    ТОП КОММЕНТАТОРОВ
    Комментариев
    910
    Комментариев
    834
    Комментариев
    554
    Комментариев
    540
    Комментариев
    483
    Комментариев
    373
    Комментариев
    308
    Комментариев
    262
    Комментариев
    224
    Комментариев
    171
    Комментариев
    156
    Комментариев
    137
    Комментариев
    121
    Комментариев
    97
    Комментариев
    97
    Комментариев
    95
    Комментариев
    80
    Комментариев
    77
    Комментариев
    67
    Комментариев
    60
    Комментариев
    59
    Комментариев
    55
    Комментариев
    53
    Комментариев
    52
    Комментариев
    46

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