GrabDuck

Создание блога на MODx. Урок 8 — Устранение дублирования контента, оформление футера ...

:

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

Спешу вас обрадовать — этот урок заключительный из серии «Создание блога на MODx», и после прохождения всего курса у вас будет достаточное количество знаний, для создания собственного блога с понравившимся вам дизайном на системе управления MODx.

Сегодня мы остановимся на следующих моментах:

  1. Изменим чанк HEAD и реализуем динамический вывод информации для МЕТА тега description
  2. Устраним дублирование контента в MODx
  3. Выберем основное доменное имя и склеим URL с www и без в файле .htaccess
  4. Оформим футер блога
  5. Добавим возможность управлять ресурсами MODx вне дерева (удобно при большом количестве документов)

Внесение изменений в чанк HEAD

Первым делом давайте отредактируем чанк HEAD: добавим условный вывод заголовка title. Если при редактировании ресурса вписан текст в поле «Расширенный заголовок» (longtitle), то мы будем использовать его в качестве  тега title, если же поле расширенный заголовок оставить пустым, то в качестве title страницы будет использовано содержимое поля «Заголовок». Делается это, как и в прошлом уроке с помощью плагина PHx:

Вместо строчки:

<title [ *pagetitle*] | [ (site_name)]</title>

Вставляем следующую конструкцию:

<title>[ +phx:if=`[ *longtitle*]`:is=``:then=`[ *pagetitle*]`:else=`[ *longtitle*]`+] | [ (site_name)]</title>

Давайте также немного изменим вывод содержимого тега description, в который вписывается описание страницы для поисковиков. В качестве содержимого этого МЕТА тега используется поле «Описание». Часто при редактировании ресурсов это поле оставляют пустым, что не очень хорошо для поисковой оптимизации страниц. Поэтому давайте реализуем следующий функционал: если поле «Описание» при редактировании страницы не заполнено, то должен автоматически сгенерироваться текст исходя из основного содержимого ресурса и этот текст будет использован в МЕТА-теге description.

Для реализации этого функционала воспользуемся сниппетом DynamicDescription

Создаем в админке MODx новый сниппет.

Создание сниппета DynamicDescription

Название сниппета:  DynamicDescription

Описание:  для автоматической генерации описания в тег Description

Код сниппета (php):  в эту область скопируйте содержимое этого файла.

После создания нового сниппета отправляемся опять редактировать чанк HEAD и вместо строчки

<meta name="description" content="[ *description*]" />

Вставляем следующую конструкцию:

<meta name="description" content="[ +phx:if=`[ *description*]`:is=``:then=`[ [DynamicDescription]]`:else=`[ *description*]`+]" />

Эта конструкция проверяет, заполнено ли поле «Описание» для ресурса и если оно не заполнено, то в качестве описания содержимого МЕТА тега description будет использован текст, автоматически сгенерированный сниппетом DynamicDescription. В самом простом случае результатом работы сниппета станет вывод первых 25 слов, вписанных в область с основным контентом. Прочитать более подробно о сниппете и его возможных параметрах вы можете на официальном сайте MODx (на английском языке). 

На этом мы заканчиваем с редактированием чанка HEAD. В итоге он будет содержит  в себе следующую конструкцию:

<head>
<title>[ +phx:if=`[ *longtitle*]`:is=``:then=`[ *pagetitle*]`:else=`[ *longtitle*]`+] | [ (site_name)]</title>
<base href="[ (site_url)]" />
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="author" content="Имя автора блога" />
<meta name="description" content="[ +phx:if=`[ *description*]`:is=``:then=`[ [DynamicDescription]]`:else=`[ *description*]+]" />
<meta name="keywords" content="[ *keywords*]" />
<link rel="stylesheet" type="text/css" media="screen" href="/assets/templates/blog/css/screen.css" />
<link href="assets/templates/blog/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>

Скачать файл с содержимым измененного чанка HEAD вы сможете в конце урока в разделе с файлами к уроку.

Устранение дублирования контента в MODx

По умолчанию при включении дружественных URL в MODx страницы вашего блога будут доступны по нескольким адресам. Вы сможете обратиться к любой странице вашего блога, используя URL следующего вида:

  • http://ваш_сайт/id — адрес с использованием ID ресурса;
  • http://ваш_сайт/id/ — адрес с использованием ID ресурса со слешем в конце;
  • http://ваш_сайт/id.html — адрес с использованием ID ресурса и суффикса;
  • http://ваш_сай/id.html/ — адрес с использованием ID, суффикса и слеша в конце;
  • http://ваш_сайт/alias — адрес с использованием псевдонима;
  • http://ваш_сайт/alias/ —адрес с использованием псевдонима и слеша в конце;
  • http://ваш_сайт/alias.html — адрес с использованием псевдонима и суффикса;
  • http://ваш_сайт/alias.html/ — адрес с использованием псевдонима, суффикса и слеша в конце.

Есть много разговоров о вреде подобного дублирования контента, когда одна и та же страница доступна по нескольким адресам,  и о распределении веса поисковых систем между этими дублями одной страницы. Вполне вероятно, что это дублирование действительно отрицательно сказывается на отношении поисковиков к сайту. Многие СЕО-специалисты считают подобное дублирование контента отрицательным фактором, сдерживающим продвижение сайта в поисковых системах и всячески стремятся от него избавиться. 

Поэтому я покажу вам решение, предусмотренное в MODx, которое позволит вам устранить все дубли и реализовать безболезненное перенаправление посетителей и поисковых роботов со страниц с нежелательным URL адресом на основную контентную страницу сайта.

Делается это с помощью плагина SEO Strict URLs.

Отправляемся в админке MODx создавать новый плагин на вкладку: Элементы → Управление элементами → Плагины → Создать плагин.

Заполняем поля при создании плагина следующим образом:

Создание плагина SEO Strict URLs.

Название плагина: SEO Strict URLs

Описание: устранение дублирования страниц

Код плагина (php): в эту область скопировать содержимое этого файла.

На вкладке «Конфигурация» в область «Конфигурация плагина» вставляем следующую конструкцию:

&editDocLinks=Edit document links;int;1 &makeFolders=Rewrite containers as folders;int;0 &emptyFolders=Check for empty container when rewriting;int;0 &override=Enable manual overrides;int;1 &overrideTV=Override TV name;string;seoOverride

Создание плагина SEO Strict URLs

На вкладке «Системные события» указываем, какие события должен отслеживать плагин: ставим галочки OnWebPageInit и OnWebPagePrerender

Создание плагина SEO Strict URLs

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

Вы можете проверить работу этого плагина на любой странице создаваемого нами блога, например, http://blog.efimov.ws/contact.html. Если вы в адресной строке удалите .html либо добавите в конце слеш «/», то вас все равно жестко перенаправит на страницу вида http://blog.efimov.ws/contact.html. При отключенном плагине SEO Strict URLs, указанная выше страница блога будет доступна по нескольким адресам одновременно и перенаправление осуществляться не будет.

Плагин  SEO Strict URLs позволяет также более гибко работать с URL страниц с помощью ручной настройки адреса для каждой отдельной страницы. Управлять видом URL адресов  можно с помощью TV параметра.

Используя ручную настройку мы, например, для xml страниц можем убрать лишний суффикс вконце адреса, чтобы  URL страницы с XML картой не выводился в виде «sitemap.xml.html».

Cоздаем новый TV параметр, с именем seoOverride (имя TV параметра можете вписать любое, но при этом не забудьте указать его в конфигурации плагина SEO Strict URLs, по умолчанию там выставлено seoOverride).

Сперва создаем новый TV параметр с именем seoOverride

При создании параметра (TV) заполняем следующие поля:

Имя параметра: seoOverride

Заголовок: Управление URL

Описание: Настройка отображения URL

Тип ввода: DropDown Menu

Возможные значения:  Без ручной настройки==-1||URL без суффикса==0||URL с суффиксом==1||URL без суффикса со слешем==2

Значение по умолчанию: -1

В списке шаблонов, которые могут использовать этот параметр — отмечаем все шаблоны.

После сохранения TV параметра на странице редактирования ресурса появится выпадающий список, используя который вы можете изменять вид URL текущей страницы.

Давайте используя этот TV параметр изменим вид URL адресов для XML страниц: «XML карта сайта» и «RSS лента». Сейчас для вывода этих страниц выбран шаблон blank, что не позволяет нам привязать только что созданный TV параметр. Чтобы это сделать нам необходимо создать новый шаблон, который мы будем использовать вместо шаблона blank для XML страниц.

Создание нового шаблона для XML страниц

Имя шаблона:  Пустой шаблон

Описание: пустой шаблон для XML страниц

Код шаблона (HTML): [ *content*]

Внимание: в область «Код шаблона (HTML)» необходимо вставить только тег для вывода основного контента [ *content*] и ничего больше. Не должно быть никаких лишних символов, в том числе лишних пробелов.

Не забудьте прикрепить TV параметр seoOverride к только что созданному новому шаблону. Для этого при редактировании TV параметра выставьте еще одну галочку в блоке «Доступ шаблонов».

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

Давайте применим «Пустой шаблон» для наших XML страниц

Таким образом URL наших XML страниц будут корректно отображаться без дополнительного суффикса. Например, страница с XML картой сайта будет доступна только по адресу http://blog.efimov.ws/sitemap.xml, если же к ней обратиться по доступному ранее адресу вида sitemap.xml.html, то произойдет перенаправление на страницу с необходимым нам форматом без суффикса .html.

Склеивание доменов с www и без в файле .htaccess

После того, как вы опубликуете ваш блог или сайт в интернете, он будет доступен по адресам доменов с www и без (http://www.ваш_сайт и http://ваш_сайт). Для того, чтобы склеить эти два домена нужно осуществить перенаправление с одного из них на тот URL, который вы выберите основным. Если вы только что опубликовали ваш сайт, то выбрать основной домен можете на ваш вкус (я использую без www), но если ваш сайт уже длительное время находится в индексе поисковых систем, тогда перед склейкой проверьте, какой из доменов вашего сайта фигурирует в поисковой выдаче. 

Поисковая выдача

Если в выдаче поисковых результатов указан ваш домен без www, то используйте его в качестве основного и делайте на него перенаправление всех посетителей и поисковых роботов с домена c www. Если же поисковые машины уже проиндексировали в качестве основного домена тот адрес, который содержит www, то в этом случае лучше оставить так как есть и использовать в качестве основного домена тот, который был выбран поисковыми системами.

Сейчас в вашем файле .htaccess есть следующие закомментированные строки:

#RewriteCond %{HTTP_HOST} .
#RewriteCond %{HTTP_HOST} !^www\.example\.com [NC]
#RewriteRule (.*) http://www.example.com/$1 [R=301,L]

Чтобы сделать перенаправление на домен с www, просто раскомментируйте эти строки ,убрав «#» вначале каждой строки и замените exemple.com на имя вашего домена.

Если вы выбрали в качестве основного адреса домен без  www, то перенаправление на него, будет осуществляться с помощью следующей конструкции в файле .htaccess:

RewriteCond %{HTTP_HOST} .
RewriteCond %{HTTP_HOST} !^efimov\.ws [NC]
RewriteRule (.*) http://efimov.ws/$1 [R=301,L]

Только вместо efimov.ws в вашей конструкции должен быть вписан адрес вашего домена.

Оформление футера

В футере сайта, код которого мы во время прохождения уроков вынесли в отдельный чанк FOOTER, вы можете разместить все что угодно: краткую контактную информацию, ссылки на последние опубликованные материалы блога, ссылки на ваши другие проекты или профили в социальных сетях, упомянуть ваших спонсоров и так далее. Одним словом, размещайте все, чего ваша душа пожелает. Я приведу лишь частный пример того, как может выглядеть подвал вашего сайта, а вы уже после создания собственного блога будете размещать эту информацию по своему усмотрению. 

В нашем случае футер представляет собой обычный HTML блок, разбитый на четыре колонки. Разместим, например, в этих колонках следующие блоки: «Краткая контактная информация», «Ссылки для быстрого доступа к основным разделам», «Ссылки на самые обсуждаемые материалы блога» и «Последние комментарии на блоге». При этом последние два блока реализуем с помощью виджетов Disqus.

Вставьте в чанк FOOTER подготовленный мною код из этого файла.

Обратите внимание: сейчас в коде разметки в блоках «Обсуждаемое» и «Комментарии» подключены JavaScript коды от Disqus. При подключении ваших данных эти пути к скриптам будут отличаться, обязательно (!) измените их. На вкладке Tools в панели управления комментариями на сайте disqus.com можно взять сгенерированные коды для вставки в блог, с помощью которых осуществляется вывод последних комментариев на блоге, либо ссылок на обсуждаемые статьи. 

Tools в панели управления комментариями на сайте disqus.com

Также в представленном коде чанка FOOTER исправьте URL в блоке «Ссылки».

После добавления HTML разметки в чанк FOOTER и подключения виджетов Disqus можно еще добавить следующие CSS стили, для корректного отображения:

#disqus_thread{ padding:0 25px; margin:0;}
#disqus_thread h3{font-size: 1.5em; font-weight: normal; letter-spacing: -0.5px; margin:0; padding:0 0 10px 0; }
#disqus_thread a:link, #disqus_thread a:visited {text-decoration: none; color: #33799B;}
#recentcomments img.dsq-widget-avatar{ padding:3px; margin:3px;}
.col-b #recentcomments, .col-a #popularthreads {padding-left:25px;}

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

На этом оформление футера на сайте заканчиваем и двигаемся дальше.

Управление ресурсами MODx вне дерева

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

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

Пошагово опишу, как использовать это решение:

1. Скачиваем архив с измененными файлами;

2. Копируем файлы tree.php и nodes.php в папку manager/frames, заменяя ими существующие файлы с тем же именами;

3. Копируем файл document_data.static.php в папку manager/action, заменяя существующий там файл;

4. Отправляемся редактировать чанк mm_demo_rules, в котором по умолчанию прописываются правила для плагина ManagerManager. Добавляем в содержимое этого чанка следующие строчки:

mm_renameField('log', 'Дочерние ресурсы отображаются в дереве');
mm_changeFieldHelp('log', 'Это поле используется для папок с большим числом вложенных страниц');

Настройка плагина ManagerManager

Используя эти строки мы с помощью плагина ManagerManager просто переименовываем поле «Регистрировать посещения» на «Дочерние ресурсы отображаются в дереве». Галочка с этим параметром находится на вкладке «Настойка страницы» при редактировании ресурса.

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

Галочка для отображения дочерних ресурсов

В дереве этот документ будет отображаться в виде папки, но развернуть и посмотреть вложенные ресурсы прямо в дереве будет уже нельзя.

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

Управление статьями не в дереве документов

При большом количестве страниц они будут отображаться с постраничным разбиением.

Постраничное разбиение результатов

Изменить отображаемое количество результатов на странице можно в настройках конфигурации на вкладке «Интерфейс и представление», изменив параметр «Количество результатов».

Изменение результатов поиска

Файлы к уроку

На этом мы заканчиваем разработку блога на системе управления MODx. Я попытался в этих восьми уроках поместить самую исчерпывающую и важную информацию, которая вам должна была понадобиться при разработке блога. Получившийся результат вы можете посмотреть по адресу blog.efimov.ws.

Итоговый вид блога на MODx

Я постараюсь подготовить все файлы и в следующей заметке у вас будет возможность скачать готовый блог, который вы сможете поставить либо на локальном компьютере либо прямо на хостинге. Просмотр готового рабочего блога на MODx изнутри вам поможет справиться с какими-нибудь трудностями, которые вполне возможно возникли при прохождении этого курса.

Вы можете также посмотреть другие уроки по созданию блога на MODx:

Автор: Ефимов Виктор