×
Россия +7 (909) 261-97-71

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

Россия +7 (909) 261-97-71
Шрифт:
0 6226
Подпишитесь на нас в MAX

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>
< 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
Как ИИ усиливает маркетинг и помогает общаться с пользователем
Иван
1
комментарий
0
читателей
Полный профиль
Иван - Классная статья, забрал Хотелось бы услышать еще от эксперта мнение про модели в таком случае и дисперсию
Тренды e-commerce 2026: рынок ждет отток с маркетплейсов?
Арина
1
комментарий
0
читателей
Полный профиль
Арина - Мы пробовали разные сервисы, но уже давно используем этот сервис tryon.mall-er.com у них есть и Визуальный поиск и Виртуальная примерка. Мы пользуемся Виртуальной примеркой очков и поиском и внедрили себе на сайт, сейчас порядка 80% нашего трафика с удовольствием пользуются данными функциями.
SEO-анализ сайта – новый сервис для технического аудита сайта
Олег Алексеев
1
комментарий
0
читателей
Полный профиль
Олег Алексеев - Сюда t.me/obivaaan или сюда t.me/olegalexeyev
Накрутка ПФ vs Бизнес: как накрутка поведенческих факторов «убьет» ваш бизнес в интернете
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Вообще бред несут-пункт позиции и там и там суотрудничать,банов нет,риски и остальные пункты просто смешно,пф гораздо эффективнее чем платить в пиксель)))
Что будет с SEO в 2026: эксперты рынка подводят итоги и делают прогнозы на этот год
Марал Гаипова
142
комментария
0
читателей
Полный профиль
Марал Гаипова - Дмитрий, спасибо, эксперты и правда - топ)
Мы сократили рутину SEO-специалиста на 95% – вот архитектура, которая это сделала
Гостьkorayaskin
2
комментария
0
читателей
Полный профиль
Гостьkorayaskin - Можно также посмотреть разбор инструментов типа KeywordKick — помогает быстрее понять, где именно конфликт сигналов.
Яндекс добавил продвинутую ИИ-модель в Алису на всех умных устройствах
Тимофей
1
комментарий
0
читателей
Полный профиль
Тимофей - Какой смысл усовершенствовать если в нашей стране запрещено говорить правду!
В мессенджере MAX появится платная подписка и реклама
1
комментарий
0
читателей
Полный профиль
- Жадность у создателей подшкаливает
Где взять данные о GEO-видимости: 9 инструментов в одной статье
Евгений Молдовану
1
комментарий
0
читателей
Полный профиль
Евгений Молдовану - Хороший список, но используя подобные чекеры помните, что в GEO важен консенсус и если его нет, то на каждый запрос может формироваться свой ответ.
Лучшие бесплатные редакторы видео
Сергей
22
комментария
0
читателей
Полный профиль
Сергей - По-моему, тут в минусах явно не хватает пункта о наложении водяного знака - можно все минусы стерпеть, но если у видео будет водяной знак, то зачем вообще таким приложением пользоваться? Если только для тестирования. А вы много тестируете? Вряд ли. Поэтому непонятно почему авторы статьи не внесли самый важный пункт в список недостатков. Лишь пару раз это всплывает во писаниях, а должно быть везде!
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
393
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
142
Комментариев
130
Комментариев
121
Комментариев
100
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
80
Комментариев
77
Комментариев
74
Комментариев
67
Комментариев
66
Комментариев
60
Комментариев
59

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