четверг, 10 декабря 2015 г.

Оптимизация URL для продвижения в Joomla


    оптимизация url для продвижения
    При продвижении не бывает мелочей, ведь каждая мелочь может дать бонус web-документу в ранжировании. Не является исключением правильный URL, который поможет в раскрутке за счёт любви к нему поисковых систем. Давайте посмотрим, что такое оптимизация URL, и как получить от адреса web-документа бонусы в продвижении. Вам останется лишь реализовать советы на своём сайте и наслаждаться правильным и грамотным с точки зрения Seo урлом.

    Правильный URL

    Вот основные правила оптимизации URL для любви к нему систем поиска:
    1. - ЧПУ,
    2. - Ключ в урле,
    3. - Отсутствие в адресе динамических параметров,
    4. - Оптимизация длины URL,
    5. - Отсутствие в адресе мусорных стоп-слов и лишних знаков пунктуации,
    6. - Минимум 301,
    7. - Оптимизация количества подпапок,
    8. - Отсутствие переспама и правильный регистр.
    Соблюдение этих правил поможет улучшить ранжирование страницы, а также поможет улучшить поведенческий фактор. Теперь обо всём по порядку.
    ключи в урле страницы

    ЧПУ

    URL без ЧПУ – это набор непонятных цифр и букв, такие адреса не любят ПС, они визуально отпугивают от страницы некоторых посетителей. Согласитесь URL
    сайт.ру/modules.php?name=z_shop&cmd=show&id=885
    Смотрится не очень, а оптимизированный
    Сайт.ру/vse-o-pryanikakh.html
    Выглядит получше.
    Включается ЧПУ в Joomle во вкладке «основные настройки» в блоке «Установки Search Engine Optimization». Везде ставим «да» и настроить файл htaccess (про это много писали, в том числе я).
    Кроме человекоподобного адреса, страница получает и ключи в урле, что закрывает второй пункт оптимизации – наличие ключа.

    Динамические параметры и длина

    Динамические параметры желательно из урла убрать, такие значения &id ничего хорошего для продвижения не принесут. Причина этого банальна – ПС видят динамические параметры и могут посчитать страницу не постоянным адресом, которому делать нечего в индексе (не факт, но возможно).
    Вопрос по длине понятен – чем короче урл, тем он легче для запоминания пользователю и плотность ключа в нём выше. Это не значит, что надо выводить страницы к корню, понятная структура разделов и категорий отлично читается ПС, но создавать дополнительные уровни, которые заметны в урле по слешу не надо. Да и с точки зрения юзабилити URL, который не входит в строку адреса – это моветон.
    В Joomla для сокращения адреса нужно убрать index.php, ЧПУ с этим хорошо справляется (смотрим пункт 1).
    динамические параметры в адресе страницы

    Стоп-слова и знаки пунктуации

    Наличие в адресе стоп-слов негативно сказывается на ранжировании документа. Конечно, не значит, что без стоп-слов страница порвёт топы, но мы же учитываем все мелочи, поэтому мусор из URLа убираем. Без стоп-слов урл станет короче – бонус раз, плотность ключа повысится – бонус два.
    Лишних знаков пунктуации тоже лучше избежать – они засоряют адрес, да и многие из них вообще без перекодировки не читаются ПС.

    Редиректы

    Использование редиректа 301 для изменения адреса документа – это нормально, плохо когда идёт слишком длинная цепочка 301, например, страница А редиректит на страницу Б, та на В, а та на Г. Боты разберутся по чём в Одессе курага, но вес документов теряется после 2 редиректа, да и пользователь будет в замешательстве, если будет постоянно видеть другой адрес web-страницы.
    Правило оптимизации – один 301 редирект, 2 плохо, больше 2х ужасно.

    Переспам и регистр

    Наличие ключа в урле – это хорошо, а спам – плохо. Под спамом подразумевается наличие более одного повтора ключевого слова в транскрипции, при большой длине урла можно указать два ключа, но не более.
    Плохо:
    sayt.ru/tabletki/tabletki-ot-ponosa/tabletki-purgen
    Терпимо:
    sayt.ru/tabletki/tabletki-ot-ponosa/ purgen
    Отлично оптимизировано:
    sayt.ru/tabletki/ponos/purgen
    Регистр надо чтить, писать url заглавными буквами нельзя, можно их использовать для обозначения брендов и аббревиатур, но всё подряд прописывать заглавными нельзя.

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

    Правильная структура заголовков H1-H3

    правильная структура заголовков

    Грамотная структура заголовков H1-H3 на Joomla – это бонус при продвижении сайта и удобство для пользователей при поиске знакомых букв на странице. Тут есть несколько железных правил и спорных мнений, о них я сегодня и расскажу, дабы не быть побитым палками за пропуск темы.

    Правильная структура

    Начинать надо с того что на web-документе заголовок H1 должен быть один, более того, его вредность заключается в том, что в главном заголовке (не путать с Title) должно быть ключевое слово. В большинстве случаев, без экстремальной правки кода, Title на самой странице не виден, он наблюдается в коде, в выдаче и при наведении курсора на иконку сайта в браузере.
    Заголовок же H1 визуально виден на странице, по нему пользователь получает первое понимание того, куда он попал, что дает ему первую пищу для размышления, стоит ли тут оставаться или проще убраться восвояси. Подробнее почитать про заголовок H1 вы можете по ссылке, там узнаете, как убрать H1 в шапке и правильно вывести его в материалах автоматом.
    чистый код заголовка h1
    Итак, H1 идёт вверху страницы и говорит о её содержимом, на кой же тогда нужны H2-H3? А вот на той они нужны, что помогают структурировать страницу, то и создают её правильную структуру. Боты видят структуру, учитывают ключи и их хвосты в заголовках и лучше ранжируют документ при прочих равных условиях. Пользователь также в шоколаде – они видит не только название страницы, но и понимает, без долгого чтения, суть содержимого документа.
    Н2-H3 могут быть на странице в любом количестве, главное тут не спамить и не перегибать палку рациональности. Верная структура показана на первой картинке, она может идти вниз до бесконечности при бесконечности самого материала.

    Чистота кода в заголовках

    Что бы там не говорили, но код заголовков должен быть девственно чист. Никаких href, то есть ссылок там быть не должно, даже если это подзаголовок в категории и он же ссылка на материал (карточку товара). Дело в том, что H2 – это тег <h2>, href тоже тег, а тег в теге это нехорошо. Конечно, есть экстремалы, которые заключают текст одновременно в strong и выделяют его курсивом, но это экстрим, не более.
    Ребята, соблюдайте правила html и вам зачтётся.

    Ключи в заголовках

    Про пользу для пользователя мы разобрались, ситуацию с кодом прояснили, остаётся только добиться любви ПС при ранжировании web-документа Joomla. Для этогоиспользуем ключи в заголовках, но не ступаем на тропинку спама.
    Для H1 нужен прямой ключ, исключение жуткий многословник, при этом его надо разбавить, но меньше, чем в Title.

    Пример

    1. - H1 Розовые слоны в Челябинске
    2. - H2 Цены на розовых слонов
    3. - H2 Доставка слонов в Челябинске
    4. - H3 Гарантии на слонов
    Да, тут есть место детской фантазии, переходящей в отроческие эксперименты, но суть ясна – в H1 прямой ключ, в H2 и H3 разбавка, хвосты и морфология.

    П.С. Да, грамматику нужно чтить, как Бендер чтил уголовный кодекс – в конце заголовка точка не ставится.

    Common 301 htaccess redirect snippets


    #
    #301 Redirects for .htaccess
    #
     
    #Redirect a single page:
    Redirect 301 /pagename.php http://www.domain.com/pagename.html
     
    #Redirect an entire site:
    Redirect 301 / http://www.domain.com/
     
    #Redirect an entire site to a sub folder
    Redirect 301 / http://www.domain.com/subfolder/
     
    #Redirect a sub folder to another site
    Redirect 301 /subfolder http://www.domain.com/
     
    #This will redirect any file with the .html extension to use the same filename but use the .php extension instead.
    RedirectMatch 301 (.*)\.html$ http://www.domain.com$1.php
     
    ##
    #You can also perform 301 redirects using rewriting via .htaccess.
    ##
     
    #Redirect from old domain to new domain
    RewriteEngine on
    RewriteBase /
    RewriteRule (.*) http://www.newdomain.com/$1 [R=301,L]
     
    #Redirect to www location
    RewriteEngine on
    RewriteBase /
    rewritecond %{http_host} ^domain.com [nc]
    rewriterule ^(.*)$ http://www.domain.com/$1 [r=301,nc]
     
    #Redirect to www location with subdirectory
    RewriteEngine on
    RewriteBase /
    RewriteCond %{HTTP_HOST} domain.com [NC]
    RewriteRule ^(.*)$ http://www.domain.com/directory/index.html [R=301,NC]
     
    #Redirect from old domain to new domain with full path and query string:
    Options +FollowSymLinks
    RewriteEngine On
    RewriteRule ^(.*) http://www.newdomain.com%{REQUEST_URI} [R=302,NC]
     
    #Redirect from old domain with subdirectory to new domain w/o subdirectory including full path and query string:
    Options +FollowSymLinks
    RewriteEngine On
    RewriteCond %{REQUEST_URI} ^/subdirname/(.*)$
    RewriteRule ^(.*) http://www.katcode.com/%1 [R=302,NC]
     
    #Rewrite and redirect URLs with query parameters (files placed in root directory)
    #Original URL:
    http://www.example.com/index.php?id=1
     
    #Desired destination URL:
    http://www.example.com/path-to-new-location/
     
    #.htaccess syntax:
    RewriteEngine on
    RewriteCond %{QUERY_STRING} id=1
    RewriteRule ^index\.php$ /path-to-new-location/? [L,R=301]
     
     
    #Redirect URLs with query parameters (files placed in subdirectory)
    #Original URL: 
    http://www.example.com/sub-dir/index.php?id=1
     
    #Desired destination URL:
    http://www.example.com/path-to-new-location/
     
    #.htaccess syntax:
    RewriteEngine on
    RewriteCond %{QUERY_STRING} id=1
    RewriteRule ^sub-dir/index\.php$ /path-to-new-location/? [L,R=301]
     
    #Redirect one clean URL to a new clean URL
    #Original URL:
    http://www.example.com/old-page/
     
    #Desired destination URL:
    http://www.example.com/new-page/
     
    #.htaccess syntax: 
    RewriteEngine On
    RewriteRule ^old-page/?$ $1/new-page$2 [R=301,L]
     
     
    #Rewrite and redirect URLs with query parameter to directory based structure, retaining query string in URL root level
    #Original URL:
    http://www.example.com/index.php?id=100
     
    #Desired destination URL:
    http://www.example.com/100/
     
    #.htaccess syntax:
    RewriteEngine On
    RewriteRule ^([^/d]+)/?$ index.php?id=$1 [QSA]
    Rewrite URLs with query parameter to directory based structure, retaining query string parameter in URL subdirectory
     
    #Original URL:
    http://www.example.com/index.php?category=fish
     
    #Desired destination URL:
    http://www.example.com/category/fish/
     
    #.htaccess syntax:
    RewriteEngine On
    RewriteRule ^/?category/([^/d]+)/?$ index.php?category=$1 [L,QSA]
     
     
    #Domain change – redirect all incoming request from old to new domain (retain path)
    RewriteEngine on
    RewriteCond %{HTTP_HOST} ^example-old\.com$ [NC]
    RewriteRule ^(.*)$ http://www.example-new.com/$1 [R=301,L]
     
    #If you do not want to pass the path in the request to the new domain, change the last row to:
    RewriteRule ^(.*)$ http://www.example-new.com/ [R=301,L]
     
    #From blog.oldsite.com -> www.somewhere.com/blog/
    #retains path and query, and eliminates xtra blog path if domain is blog.oldsite.com/blog/
    Options +FollowSymLinks
    RewriteEngine On
    RewriteCond %{REQUEST_URI}/ blog
    RewriteRule ^(.*) http://www.somewhere.com/%{REQUEST_URI} [R=302,NC]
    RewriteRule ^(.*) http://www.somewhere.com/blog/%{REQUEST_URI} [R=302,NC]

    среда, 9 декабря 2015 г.

    Таблицы с данными в адаптивном дизайне

    Одна из постоянных проблем верстальщиков адаптивных сайтов — это задача удобно представить обычные таблицы на мобильных устройствах. Вот как выглядят такие таблицы чаще всего:



    Не очень удобно, правда? К счастью уже существует несколько хитрых способов решить такую проблему.

    1. Способ от Chris Coyier


    Описание и демо на русском, оригинал и демо на английском.



    Суть в том, что таблица вытягивается вертикально, в каждой строке остается только два столбца: заголовок и данные. Минус такого способа в том, что в результате получается слишком длинная таблица, и ее придется долго прокручивать.

    2. Способ от Zurb.com


    Подробности и демо на английском



    Хороший способ на Javascript/CSS, который добавляет горизонтальную прокрутку для ячеек с данными, при этом заголовки остаются на месте, очень удобно.

    3. Способ от Scott Jehl


    Демо



    Преобразует обычную таблицу в красивую диаграмму. Такой способ подойдет не для всех данных, но выглядит результат очень интересно.

    4. Способ от Todd Parker


    Демо



    В этом способе таблица на маленьком экране просто прячется под «спойлер». Как говорится, дешево и сердито.
     
    Кирилл @grokru 
    карма401,0
     
    рейтинг0,0

    Комментарии (21)

    НЛО прилетело и опубликовало эту надпись здесь
    НЛО прилетело и опубликовало эту надпись здесь
     AnGr    
    +12
      
    Ссылочку, будьте добры.
     Kastrulya    
    +3
      
    В Симпсонах небось?
     esc  
    +1
      
    Первый вариант очень неудобен. Таблица ж не зря имеет такую форму. Третий вообще непонятно что, данные куда-то пропали (из двух измерений осталось одно).

    2 ничего. 4 — не совсем способ, конечно, но полагаю, если по высоте на экран влезет, то тоже имеет право на жизнь. 2 и 4 вообще полезно было бы совместить.
     merkuriy    
    0
      
    Каждый вариант имеет право на жизнь в определённых случаях. И каждый способ может быть удобным в своём отельном идеальном случае. На каждый случай нужно подбирать специфичный способ, один из представленных в этом посте, какой либо другой или смешанные. Для реализации таблиц в адаптивных интерфейсах нет какого то универсального способа.

    Мне кажется одного способа точно не хватает: он напоминает 1-ый вариант, но при этом убираются заголовки некоторых столбцов — это возможно в определённых случаях когда интуитивно понятно назначение определённых значений таблицы.
     esc    
    0
      
    Таблица есть таблица, она должна быть двухмерной, чтобы можно было быстро выделить глазом как строку, так и слолбик. Решения, которые эту логику ломают, имхо, не годятся для реального применения. Красиво, но бесплолезно.
     esc    
    0
      
    Кстати, второй вариант можно заставить выглядеть как первый, только скролл сделать оризонтальным и дискретным (чтобы пролистывалось не произвольное число пикселей а одна-две или 3 столбика, в зависимости от силы скролла.
     eghik  
    0
      
    Второй вариант возьму на вооружение.
     arwyl  
    +1
      
    смотрел все эти варианты, когда делал адаптивную таблицу в своем проекте, но в итоге решил просто прятать определенные столбцы для планшетного экрана и для телефона
    но у меня было все проще — таблицей был сделан список форумов, и я посчитал, что для пользователя мобильного устройства абсолютно не важно количество тем и ответов в них — остался только заголовок и короткое последнее сообщение
     ftdgoodluck  
    0
      
    Второй вариант крут, если данные не нужно сравнивать друг с другом.
    Третий вариант тут лучше, но вот если величины отличаются на несколько порядков — получится каша
     Kovaldo  
    +1
      
    Porn name в первом способе порадовал )
     equand  
    0
      
    Отображать часть таблицы, по тапу выдавать полные данные как в первом варианте.
     RNZ  
    0
      
    Я бы предложил ещё вариант:
    на маленьком экране свернуть таблицу в трубу, предоставив возможность скроллить по горизонтали на манер барабана, со спрямлением фронтальной части, ну а по вертикали скроллить как обычно
     grokru    
    0
      
    Второй вариант именно это и делает.
     RNZ    
    0
      
    А, ну да, просто в примере первый столбец зафиксирован…
     RNZ    
    0
      
    Это кстати мешает, например если значения ячеек в первом столбце не помещаются на дисплей…
     LostSenSS  
    +3
      
    Есть еще такое решение, похоже на второй вариантdbushell.com/2012/01/05/responsive-tables-2/
     macgera  
    0
      
    1-й самый практичный на мой взгляд. Я тсолкнулся один раз, мне подсказал американский коллега, что лучше разбить таблицу. Так и сделали. Остальные варианты… нужно пробовать!
    НЛО прилетело и опубликовало эту надпись здесь
     paurock  
    0
      
    Ещё идея: как в первом скриншоте (неадаптивные вариант №2 с мелкой таблицей),
    только таблицу перворачивать по ширине мобилы и при наведении на ячейку — увеличивать размеры данных в ячейке (как под лупой). Причём сделать так, чтобы при клике ячейка увеличивалась в новом слое выше, а при повторном — уменьшалась.
    Ещё идея с барабаном понравилась. Оставлять на месте только заголовки таблицы, а само поле данных таблицы делать перемещаемым, как при вращении барабан