Войти как пользователь
Вы можете войти на сайт, если вы зарегистрированы на одном из этих сервисов:

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

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

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 запускают конкурс для интернет-маркетологов
Eugene Lata
51
комментарий
0
читателей
Полный профиль
Eugene Lata - Отметил, спасибо.
Как построить качественную ссылочную массу сайта
Айрат Рахимзянов
39
комментариев
0
читателей
Полный профиль
Айрат Рахимзянов - Спасибо Кирилл. Сейчас восстановилась работа сервиса: take.ms/ttXrw
«Я оптимизировал сайт, а он не в ТОП! Что делать?»
Павел Горбунов
7
комментариев
0
читателей
Полный профиль
Павел Горбунов - Как можно в инструменте tools.pixelplus.ru/tools/text-natural сравнить текст со страницы конкурента и со своей страницы? Я вижу возможность только для проверки одного урла.
Влияние HTTPS на ранжирование региональных поддоменов в Яндексе
Екатерина Иванова
1
комментарий
0
читателей
Полный профиль
Екатерина Иванова - Посмотрите на сколько упал трафик и на сколько потом вырос:упал на 10-20% на 1 месяц, а вырос в итоге в 5 раз. Одним мартовским трафиком всё падение перекрыли. Или можно ждать Яндекс неопределённое количество времени со стартовым уровнем трафика. Упущенные возможности и всё-такое.
Мир глазами поисковых систем
Александр Рунов
7
комментариев
0
читателей
Полный профиль
Александр Рунов - Какой регион, если не секрет? В Мск, в ряде ВК тематик (в тех же "окнах" или "колесах"), без работы с внешними факторами по ВЧ запросам в ТОП не выплывешь. Хотя в большинстве направлений вполне реально.
Google.ru внесли в реестр запрещенных сайтов
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Гон, все работает и будет работать. Да и пусть банят, будет как с рутрекером.
Монетизация сайта. Как, когда, сколько?
Ruslan Baybekov
2
комментария
0
читателей
Полный профиль
Ruslan Baybekov - Максим, добавили возможность вывода дохода на Яндекс Деньги и WMR.
Инфографика: самые распространенные SEO-ошибки Рунета
Дмитрий Панфилов
2
комментария
0
читателей
Полный профиль
Дмитрий Панфилов - написано, но не это и не так )
Интеграция call tracking и CRM: углубленный анализ данных о звонках и продажах
Денис
2
комментария
0
читателей
Полный профиль
Денис - Какой смысл вообще в облачных CRM, обрезанный фугкционал, свое дописать невозможно, слив клиентов другим компаниям. Серверные бесплатные CRM куда надежней и кастамизируй как хочешь.
SEMrush: факторы ранжирования в Google в 2017 году
Анна Макарова
292
комментария
0
читателей
Полный профиль
Анна Макарова - Уважаемый S1, я тоже понимаю, что есть такие люди, которые заметив допущенную неточность несутся на всех парусах продемонстрировать "силу" своего ума. Спасибо вам за пристальное внимание. Это поможет нам быть лучше.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
292
Комментариев
262
Комментариев
219
Комментариев
171
Комментариев
156
Комментариев
137
Комментариев
121
Комментариев
97
Комментариев
97
Комментариев
95
Комментариев
80
Комментариев
77
Комментариев
67
Комментариев
60
Комментариев
59
Комментариев
55
Комментариев
52
Комментариев
51
Комментариев
45

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