Оптимизация шаблонов

Разработка под LiveStreet CMS

Пролог


Наброски по данной статье лежали ещё с конца зимы и все никак не было времени на её написание, поэтому решил опубликовать её почти «как есть» т.е. с сухими выжимками фактов, без расписанных деталей. Это поможет остальным членам сообщества совершенствовать свои .

livestreet cms seo
Внимательное всестороннее изучение аналитики и инструментов для вебмастеров от гугла на новом сайте с чистым уникальным контентом заявило о некоторых слабых местах стандартного шаблона developer, на основе которого был создан свой (замечу, что шаблон имеет те же погрешности + свои особенности). Говоря в данном контексте «уникальный контент» имеется ввиду нормальные статьи для привлечения аудитории, которые пишутся людьми и для людей, а не под заказ т.е. никакой копипасты и рерайтинга. На наблюдаемом сайте весь контент писался с чистого листа.

Были наблюдения, анализы инструментов от гугла и удалось вывести список необходимых изменений, которые нужно внести в шаблон для улучшения индексированности сайта. Помимо прочего, нужно также сделать ещё и другие правки на сайте кроме шаблона. Давайте посмотрим на этот список.

Что нужно сделать для СЕО?


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

  1. В шаблоне нужно убрать текст ссылки "читать далее" (только его т.к. если указан текст для тега cut, то пусть будет он) и заменить его на заголовок топика используя конструкцию
    
    {$oTopic->getTitle()|escape:'html'}
    

    в типах топика «фотосет» и обычном топике. Этот текст попадает в топ ключевиков по сайту.

    Примечание:

    Для топиков типа «опрос» и «ссылка» текст выводится полностью, без ссылки «читать далее», что связано с малым объемом разрешенного текста для таких топиков в 500 символов, поэтому в их шаблонах менять ничего не нужно.
    Найти этот текст в шаблоне обычного топика можно по ключевым словам текстовки:
    
    {$aLang.topic_read_more}
    

    в фотосете немного другой текст ссылки:
    
    {$aLang.topic_photoset_show_all|ls_lang:"COUNT%%`$iPhotosCount`"} →
    


  2. Убрать текст "комментарии" в нижней части топика и заменить его на иконку комментариев (этот ключевик попадает в ТОП4 сайта)

  3. Уменьшить размер шрифта заголовка "N комментариев" над комментариями топика до h6, т.к. h3 слишком много ему чести делает (попадает в ТОП4 сайта).

  4. Убрать надпись "Теги" топика и заменить его на иконку тегов

  5. Убрать значение «image» атрибута alt тега img в файле topic_photoset.tpl и заменить его более объективным
    
    {$oMainPhoto->getDescription()|escape:'html'}
    


  6. Убрать по всему шаблону значения атрибутов alt, которые не несут смысловой нагрузки. Таких файлов будет два десятка и заменить их нужно чем нибудь полезным, например, заголовком топика, логином пользователя или описанием, не забывая экранировать данные — в зависимости от значения слова этого атрибута оно занимает 5 позицию по ключевым словам. Например, можно встретить alt=«login» или alt=«profile» встречающиеся по сайту весьма часто. Стоит ли говорить что поисковики считают это важным?

  7. Заголовки. Одно из наиболее важных замечаний. На главной странице должен быть только один заголовок с тегом h1 — это название сайта, тег h2 — описание сайта и заголовки топиков. На страницах самих публикаций заголовок топиков должен меняться на h1 как наиболее важный, а в шапке сайта название должно уменьшаться до h2, описание — до h3. Таким образом ПС можно дать понять что же является самым важным на каждой странице. Текущее положение дел в стандартных шаблонах для ЛС может вывести ваш сайт в ТОП только по его названию, т.к. каждая страница вашего сайта только об названии и сообщает как наиболее важном.

  8. Как известно, можно не писать атрибут типа тега script — браузеры давно по-умолчанию подразумевают что это яваскрипт. Поэтому ни к чему каждый раз писать это. Можно почистить шаблоны от этой старой необходимости.

  9. Вы будете удивлены, но кнопки шаринга в социальных сетях, которые подключаются в топике, все имеют атрибут rel=«nofollow» кроме одной, хорошо скрытой и не видимой пользователю:
    
    <a class="b-share-popup__yandex" href="http://api.yandex.ru/share/">Яндекс</a>
    

    т.е. каждая ваша страница сайта, где есть хотя бы один топик, на данный момент содержит индексируемую скрытую ссылку на сайт Яндекса.

    Отключается это просто комментированием строки вызова скрипта -шаринга в конфиге движка:
    
    "http://yandex.st/share/share.js" => array('merge'=>false),
    

    заменить на
    
    //"http://yandex.st/share/share.js" => array('merge'=>false),
    

    правда при этом кнопки публикации статьи в социальных сетях работать не будут. Но скриптов шаринга в инете полно.

  10. В сайдбаре все заголовки (например, "Прямой эфир") нужно уменьшить до тега h6 — они только забирают вес у важного контента

  11. Добавить плагин trickytitle, который дополняет заголовки страниц дополнительными данными и избавляет вас от леса ошибок в панели веб-мастера гугла, которые нервно сообщают о куче страниц с одинаковым тайтлом

  12. Добавить плагин sitemap, который составляет удобную карту вашего сайта для поисковых систем и улучшает индексирование вашего сайта (казалось бы что это уже и так само собой разумеется, но не все вспоминают об этом плагине)

  13. Добавить плагин seo, который значительно лучше формирует для поисковиков метатеги страниц в автоматическом режиме (ключевые слова и описание)

  14. Добавить плагин "Пингатор", который стучится в двери поисковиков при каждой новой публикации на сайте, сообщая тем самым, что надо бы и сайт проиндексировать. Снова.

  15. Добавить файл robots.txt в корень сайта, в котором запретить поисковикам ходить по урлам, где их ничего не ждет, а робота яндекса специально натравить на сайтмап, т.к. он иногда стесняется попробовать найти его самостоятельно


Приложение


  1. Плагины, о которых идет речь в тексте, можно найти в официальном каталоге движка. Все они бесплатные.

  2. Для п. 7 «Заголовки» код может быть использован примерно следующий (могут понадобится незначительные правки для конкретного шаблона):

    A. для шапки сайта в файле header_top.tpl для регулирования размеров названия и описания сайта:
    
    <header id="header" role="banner">
      {hook run='header_banner_begin'}
      <hgroup class="site-info">
      
        {if $sAction=='index'}
          {assign var="sSiteTitleTag" value="h1"}
          {assign var="sSiteDescriptionTag" value="h2"}
        {else}
          {assign var="sSiteTitleTag" value="h2"}
          {assign var="sSiteDescriptionTag" value="h3"}
        {/if}
      
        <{$sSiteTitleTag} class="site-name"><a href="{cfg name='path.root.web'}">{cfg name='view.name'}</a></{$sSiteTitleTag}>
        <{$sSiteDescriptionTag} class="site-description">{cfg name='view.description'}</{$sSiteDescriptionTag}>
      </hgroup>
      {hook run='header_banner_end'}
    </header>
    

    данный код для главной страницы сайта сделает наиболее важным название сайта и одинаковым по весу описание и заголовки топика.

    B. для списка топиков и страницы отдельного топика в topic_part_header.tpl для регулирования заголовка топика (показана часть стандартного кода чтобы было понятно куда вставлять код):
    
    <article class="topic topic-type-{$oTopic->getType()} js-topic">
      <header class="topic-header">
        
        {if $bTopicList}
          {assign var="sTopicTitleTag" value="h2"}
        {else}
          {assign var="sTopicTitleTag" value="h1"}
        {/if}
        
        <{$sTopicTitleTag} class="topic-title word-wrap">
          {if $oTopic->getPublish() == 0}   
            <i class="icon-tag" title="{$aLang.topic_unpublish}"></i>
          {/if}
          
          {if $oTopic->getType() == 'link'} 
            <i class="icon-share-alt" title="{$aLang.topic_link}"></i>
          {/if}
          
          {if $bTopicList}
            <a href="{$oTopic->getUrl()}" rel="topic publication">{$oTopic->getTitle()|escape:'html'}</a>
          {else}
            {$oTopic->getTitle()|escape:'html'}
          {/if}
        </{$sTopicTitleTag}>
    

    этот код будет давать наибольший вес заголовку топика на странице топика, формируя страницу топика более приоритетной перед страницей списка топиков.

  3. Пример файла robots.txt
    
    User-agent: *
    Disallow: /login/
    Disallow: /registration/
    Disallow: /rss
    Disallow: /search/
    Disallow: /blogs
    Disallow: /people
    Disallow: /profile/
    Disallow: /stream
    Disallow: /personal_blog
    Disallow: /feed
    Disallow: /ajax
    Disallow: /admin
    Disallow: /subscribe/
    Disallow: /engine/lib$
    Disallow: /tag/$
    Disallow: /topic/$
    Disallow: /my/
    Disallow: /templates/skin/__SKIN_NAME__/$
    Disallow: /page/$
    Disallow: /error/$
    Disallow: /settings/$
    Disallow: /photoset/$
    Disallow: /link/$
    Disallow: /question/$
    Disallow: /robotstxt/$
    Disallow: /message/$
    Sitemap: http://__SITE_DOMAIN__.com/sitemap.xml
    Host: __SITE_DOMAIN__.com
    

    где:
    __SKIN_NAME__ — имя используемого шаблона, что там ищет гугл — не понятно, но что-то ищет.
    __SITE_DOMAIN__ — имя вашего сайта

    Что можно прописывать в этом файле уже много раз обсуждалось и поэтому здесь не рассматривается детально.

Эпилог


Надеюсь, для кого-то данная статья окажется полезной. Ориентирована она, конечно, не на обычных пользователей, а больше на разработчиков, т.к. есть нюансы, которые расписывать очень долго. Несомненным бонусом будет для разработчиков шаблонов, т.к. последнее время начался бум отличных шаблонов для ливстрита, эта заметка (или уже статья?) может помочь сделать шаблоны не только красивыми, а и более понятными для поисковых систем.
22 комментария
Gmugra
Очень полезно, спасибо.

Только одно замечание есть: Плагин sitemap генерирует линки "/my/" (что, конечно, совсем не правильно для LS 1.0+, но уж как есть). Так что если в robots.txt добавить, как у вас «Disallow: /my/» — будет куча ругни в google analytics на недоступные линки в sitemap.
Serge Pustovit
Да, верно, именно так и сделано: гугл уведомляет что часть ссылок из сайтмапа недоступны.
lifecom
Подскажите, ели вместо названия сайта логотип, его нужно заключать в h1?
Просто где-то читал, что ПС не любят h1 в сочетании с ссылкой.
Нашел статью по теме, но запутался.
В итоге сделал так:
<div class="logo">
    <a href="/" title="{cfg name='view.description'}">{$sHtmlKeywords}</a>
</div>

а в css
.logo a { text-indent: -1000em; }
Serge Pustovit
Подскажите, ели вместо названия сайта логотип, его нужно заключать в h1?
желательно. плюс текст добавить, дублирующий надпись на логотипе (где-то в документации веб-мастеру гугл пишет что это очень хорошо), текст сместить (спрятать) средствами ксс (text-indent с большим минусовым числом)

за дублирование описания сайт может попасть под фильтр, кому как везет (читать «доверие к сайту» == «старость домена»)
lifecom
Простите за нубский вопрос — когда вы делаете переменную для тегов, для чего в начале имени переменной пишете маленькую s?
Serge Pustovit
это венгерская нотация названия переменных. первый символ — обозначает тип переменной (s — string, b — boolean, i — integer, f — float, a — array etc), в данном случае это обозначение типа переменной «строка».
Код лс написан с применением венгерской нотации.
lifecom
У меня в header_top.tpl и в footer.tpl в одном из тегов длинная лапша из if-ов в зависимости от экшенов для присвоения классов.
Сделал для неё переменную в header.tpl, но она подхватывается только в header_top.tpl, а в футере не срабатывает. Менял расположение — в head, в body, между ними — никак :(
Подскажите pls reld вставить переменную, чтобы она подхватывалась и в header_top.tpl и в footer.tpl?
Serge Pustovit
нужно переменную определять уровнем выше (в шаблоне конкретного экшена где подключаются эти файлы) т.к. подключается header.tpl, после него footer.tpl
либо дублировать код.
header_top.tpl подключается из header.tpl поэтому и работает.
lifecom
т.е. получается не срабатывает на инклудах более 1-го уровня…
file1.tpl — здесь переменная и include file2.tpl
file2.tpl — срабатывает, тут же include file3.tpl
file3.tpl — не срабатывает

ну а если дублировать переменную, то смысл от неё пропадает :)
lifecom
а что за библиотека у вас на сайте выдает смайлам свои стили?
Serge Pustovit
а что за библиотека у вас на сайте выдает смайлам свои стили?

Плагин Cross linker с правилом:
Выражение (-я через запятую) замены
:), ;), =), :o, :p, :D

Чем заменить
<i style="background: #EEE; border-radius: 20px; color: #555; display: inline-block; font: 10px/14px Tahoma; height: 16px; text-align: center; width: 16px;">$1</i>
zhanatbek
а еще какие есть фишки?
Serge Pustovit
На что фантазия способна (аббревиатуры, например), кроме обычной замены слов на ссылки
Serge Pustovit
т.е. получается не срабатывает на инклудах более 1-го уровня…
нет, срабатывает на любом уровне, но шаблон подключается так:

include header.tpl
    include header_top.tpl
    include topics....
include footer.tpl

поэтому footer.tpl просто не связан с header.tpl, где и объявлена переменная.
lifecom
всмотрелся как инклудами формируется страница, складывается впечатление — что-то не то…
Вот экшены например формируются логично:
page.tpl
    include header.tpl
    include content
    include footer.tpl

Вот так бы основная страница, а экшены хуками в неё
Просто header и footer есть везде — а мы их в каждом экшене инклудим…
Serge Pustovit
Вот так бы основная страница, а экшены хуками в неё
Просто header и footer есть везде — а мы их в каждом экшене инклудим…
вот в дев-версии лс именно так и сделали, только ещё лучше. больше нет постоянных инклудов шапки и футера.
lifecom
ооо… это ж все плагины перелопачивать…
Serge Pustovit
постоянное удобство стоит разовых небольших затрат сил
zhanatbek
Может кто-нибудь распишет каждый пункт(где что менять)?
Serge Pustovit
как было написано в начале статьи — нет времени расписывать, поэтому статья больше для разработчиков
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.