Для примера я скопировала начальную часть HTML-кода двух своих блоггеровских сайтов. Один из них тестовый, и там сохранился девственный код Blogger (замаркирован фиолетовым).
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Simple
Designer: Josh Peterson
URL: www.noaesthetic.com
----------------------------------------------- */
Второй фрагмент кода взят с сайта одной из партнерок (замаркирован желтым). Он содержит внесенные мною коррективы:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='4008cdbac3230534' name='yandex-verification'/>
<meta content='LbDACtz9TkfoA7Z-z4EkNUAyUEZHQEytgIfDZMNSm58' name='google-site-verification'/>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
<meta content='Удивительный подарок ...Сказки написаны...Они воспитывают ...' name='description'/>
</b:if>
<meta content='детские сказки,...,детские книги' name='keywords'/>
<script type='text/javascript'>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-24141835-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<b:skin><![CDATA[/*-----------------------------------------------
Blogger Template Style
Name: Picture Window
Designer: Josh Peterson
URL: www.noaesthetic.com
------------------------------------------------------------------ */
Не надо быть специалистом в HTML, чтобы заметить, что коды отличаются, хотя для обоих сайтов я использовала один и тот же шаблон. Попробуем препарировать измененный код (желтый).
В самом начале кода объявляется используемая в Blogger кодировка ("UTF-8") и тип документа (DOCTYPE). Тег <html>, как видим, не используется - ненаказуемо.Содержимое тега <head>
На содержимом заголовочной части документа остановимся подробнее, т.к.сюда заносится значительная часть персональных настроек кода. Сюда помещаются различные мета-теги, тег <title> и пр. Как мы уже знаем, содержимое тега <head> является рабочей информацией для браузера и не выводится на экраны мониторов, за исключением тега < title >.
Свои настройки, внесенные лично мною в код, я выделила цветным шрифтом.
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
Возможно, у кого-нибудь возникнет вопрос: "К чему все эти манипуляции с кодом? Не проще ли оставить все без изменения?" Что касается тега <title>, он требует особого внимания. Грамотное написание данного тега является одним из ключевых моментов внутренней оптимизации сайта. В статье "Влияние тега title на продвижение сайта"
тег <title> рассмотрен более детально.
</b:if>
<meta content='детские сказки,...,детские книги' name='keywords'/>
Свои настройки, внесенные лично мною в код, я выделила цветным шрифтом.
- Следом за открывающим тегом <head> я разместила мета-теги идентификаторы веб-ресурса Яндекс и Google (выделены зеленым). Это те самые идентификаторы, о которых говорилось в статье "Регистрация блога в поисковых системах". В этой же статье указывалось, что для блогов на платформе Blogger регистрация в Google производится автоматически при условии выполнения соответствующих настроек. При создании блога я перестраховалась: и настройки установила, и код внесла. В принципе, он здесь не нужен, но уже не вижу смысла убирать.
<meta content='LbDACtz9TkfoA7Z-z4EkNUAyUEZHQEytgIfDZMNSm58' name='google-site-verification'/>
- Далее идет часть кода, обеспечивающая доступ пользователей к блогу посредством мобильных телефонов.
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
- Следующие 2 строки кода отвечают за заголовок блога. Под заголовком понимается шапка блога, включающая в себя название, описание, титульное фото блога. Первая строка обеспечивает автоматическое выведение в заголовок необходимых мета-тегов. Если просмотреть исходный код страницы сайта (кликнуть правой кнопкой мышки на странице сайта, а затем в выпавшем меню выбрать пункт "исходный код страницы" или "просмотр кода страницы"), то там не будет самой строчки <b:include data='blog' name='all-head-content'/>. Вместо нее будут выведены мета-теги, ссылки на иконки, на CSS, скрипт-файл и т.д. Вторая строка отвечает за содержание тега <title>. Стандартный шаблон Blogger выводит в <title> такую комбинацию: "Название домашней странички: название текущей страницы". Поскольку меня данный вариант не устраивает, вторую строку я убрала из кода, а вместо нее добавила другой код, приведенный в следующем пункте.
- Эта часть кода (синего цвета) была добавлена мною с целью изменения структуры тега <title>. При такой комбинации название блога выводится в title только для главной страницы сайта. Для всех остальных страниц в title отображается только название текущей страницы.
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
тег <title> рассмотрен более детально.
- Далее идет очередная внесенная мною часть кода, содержащая мета-теги "description" и "keywords", о которых подробно было написано в статье"Значение мета-тегов "description” и ”keywords” в оптимизации сайта. Что такое сниппет".
</b:if>
<meta content='детские сказки,...,детские книги' name='keywords'/>
- Замыкает список внесенных мною персональных настроек в HTML-код скрипт (зеленый шрифт), содержащий идентификатор веб-ресурса Google Analytics. Сервис Google Analytics и установка кода отслеживания подробно рассматривались в статье "Регистрация в Google Analytics".
Правила внесения изменений в код-HTML Blogger
- Прежде всего желательно сохранить резервную копию шаблона. Это даст возможность вернуться к прежней версии шаблона при неудачной его правке. Чтобы проделать эту операцию, в Blogger предусмотрена специальная кнопка"Резервное копирование и восстановление".
- После сохранения шаблона с панели инструментов Blogger перейдем на вкладку Шаблон - Изменить HTML - Приступить.
- После внесения изменений в код нажмем на клавишу "Просмотр". Если страница отобразится правильно и не появится предупреждающих надписей, можно жать на клавишу "Сохранить".
После нажатия на кнопку появится окно:
Для сохранения шаблона на жестком диске компьютера следует нажать на"Загрузить шаблон полностью", а для загрузки старой версии шаблона со своего компьютера на сервер - "Выберите файл".
Данная функция позволяет сохранить шаблон сайта.
Для сохранения содержимого сайта в Blogger предусмотрена функция"Экспорт блога". Она доступна на странице Настройки - Другое.
Related Posts : Как продвигать сайт
0 коммент.:
Отправить комментарий