Эта статья научит вас, как сделать SEO-дружественную и удобную нумерацию страниц Ajax с помощью ExpressionEngine примерно за 6 минут. 
Вот цели, которых мы достигнем с помощью этого прогрессивного улучшения:
- Отличный пользовательский опыт
- Пропускная способность для мобильных пользователей
- Минимизируйте ресурсы на стороне сервера
- SEO-дружественный, в частности:
- Обрабатываются всеми поисковыми системами
- Правильные заголовки страниц
- Правильная история браузера
- Правильное поведение 404
В нашем примере мы создаем действительно важный веб-сайт с фантастическим списком ключевых контактов для каждого важного местоположения во вселенной. Это огромный список, поэтому мы хотим разбить его на страницы, и я хотел бы показывать восемь одновременно. Мы собираемся работать извне, чтобы компоненты компоновки имели смысл.
Первое, что нужно сделать, это создать макет родительского HTML, который также будет принимать запросы Ajax без отправки или обработки всей страницы. Мы собираемся использовать новую переменную {is_ajax_request} в ExpressionEngine 3.2, чтобы сделать это. Обратите внимание, что я начинаю с префикса в именах шаблонов макета. Это делает их «скрытыми» шаблонами, к которым посетитель не может получить прямой доступ; к ним можно получить доступ, только если вы укажете их как макеты или встраивания.
макеты / _html-layout.html
{if is_ajax_request} {layout: contents} {if: else} <! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <! - Здесь мы разрешаем шаблонам, использующим этот макет, устанавливать тег заголовка , -> <title> {if layout: title! = ''} {layout: title} | {/ if} {site_name} </ title> </ head> <body> <! - Здесь у вас, вероятно, есть навигация по сайту, заголовок страницы и т. д., но для этого примера я сокращаю разметку до только то, что относится к нашему примеру с нумерацией страниц Ajax. -> <! - Переменная содержимого макета будет заменена содержимым шаблонов, которые используют этот макет. Мы также добавляем в шаблоны способ предоставления атрибута id, чтобы мы могли подключиться к этому контейнеру для CSS или JavaScript. -> <section id = "{if layout: content_id} {layout: content_id} {/ if}"> {layout: contents} </ section> <! - остальная часть разметки вашего сайта для боковых панелей, нижний колонтитул, другие сценарии и т. д. пойдут сюда. Обратите внимание, что у нас также есть переменная макета для любого специфичного для страницы JavaScript, который может потребоваться для загрузки или предоставления данного шаблона. -> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"> </ script> {layout: js} </ body> </ body html> {/ if}
Обратите внимание, что если это Ajax-запрос, мы выводим только содержимое контейнера, предоставляемое нашими шаблонами. В нашем случае это будет в первую очередь тэг Channel Entries. Мы хотим, чтобы эта внешняя обертка была универсальной и многоразовой. Мы используем переменную {layout: js}, которая также позволяет шаблонам обеспечивать необходимое поведение. Мы могли бы сделать то же самое с боковыми панелями и другими компонентами, которые не одинаковы на каждой странице сайта.
Теперь давайте очистим один слой лука назад и посмотрим на наш следующий шаблон макета:
макеты / _multi-макет
Как вы можете сказать по названию, теперь мы более конкретны в назначении нашего макета, в данном случае для многостраничных страниц. В конечном итоге это будет использоваться для нашей страницы со списком менеджеров, и это универсальное назначение, поэтому при необходимости его можно использовать на других страницах с несколькими записями. Он будет содержать наш JavaScript для разбиения на страницы Ajax, определенный в паре тегов {layout: set name = "js"} {/ layout: set}, о которой мы уже говорили родительской обертке _html-layout, где она принадлежит.
{layout = 'layouts / _html-layout'} <! - Укажите атрибут id для нашего контейнера содержимого. -> {layout: set name = 'content_id' value = 'manager-list'} <! - Переносить содержимое из нашего шаблона. -> {layout: contents} <! - Установите JS, который нужен всем нашим страницам контента "Managers". Это может выглядеть страшно, но есть только дюжина или около того строк кода, остальные - подробные комментарии, объясняющие методологию. -> {layout: set name = "js"} <script> $ (document) .ready (function () {// '# manager-list' - это идентификатор, который мы указали для родительского контейнера нашего контента. // ' .managers-list-pagination '- это класс, который мы передадим нашим контейнерам ссылок на страницы. // Поскольку содержимое, включая разбиение на страницы, заменяется в DOM каждым Ajax-запросом, // мы определяем этот обработчик события с делегированием события, наблюдая за родительский контейнер //, который существует в нашей исходной разметке и не заменен и не удален из DOM. $ ('# manager-list'). on ('click', '.managers-list-pagination a', function (e ) {// Предотвращаем браузер от его нормального поведения при нажатии на ссылку // и получаем ссылку на ссылку разбивки на страницы, на которую они нажали. E.preventDefault (); var source = $ (this) .attr ('href'); // Добавить индикатор загрузки для медленных соединений. Используйте все, что вам нравится, если вы // не знакомы с их реализацией, вы можете получить некоторые идеи по адресу http://cssload.net var loadIndicator = $ ('<div class = " загрузчик "id =" ajax-load-Indicato г "> </ DIV> '); . $ ( '# Менеджеры-реклама') перед именем (loadIndicator); // Получить наш контент $ .get (source, function (data) {// Вставить наш новый контент, убрав индикатор загрузки. $ ('# Manager-list'). Html (data); $ ('# ajax-load -indicator '). fadeOut (' fast '). remove (); // Обновляем заголовок нашей страницы для вкладок браузера, получая номер страницы по ссылке на пагинацию, по которой они щелкнули. // Поскольку наши ссылки на страницы существуют дважды в DOM (вверху) и внизу), мы только хотим, чтобы: first // или на странице 3 отображалось «Страница 33» и т. д. var title = 'Managers - Page' + $ ('. manager-list-pagination: first a. active '). text () +' | {site_name} '; document.title = title; // Из соображений безопасности pushState () не будет обновлять URL, если он содержит домен, // поэтому мы используем регулярное выражение для оставьте только путь, например / Manager / P4. var path = source.replace (/ https?: \ / \ / [^ \ /] + / i, ''); // Перетащите эту страницу в стек истории браузера для функциональность кнопки «вперед / назад». history.pushState ({}, заголовок, путь);}); }); }); </ script> {/ layout: set}
Встроенные комментарии подробно объясняют, что мы делаем. По сути, мы следим за переходами по страницам пагинации, выбираем их содержимое через Ajax и следим за тем, чтобы заголовки страниц и история браузера обновлялись соответствующим образом. Таким образом, мы постепенно улучшили пользовательский интерфейс, не нарушая ожидаемого поведения браузера ради простоты. А для роботов поисковых систем, которые понимают JavaScript, это очень важно для индексации.
Теперь нам нужно создать шаблон для URL / manager, который будет использовать _multi-layout. Мы добавим наш тег Channel Entries с нумерацией страниц, и все готово!
менеджеры / индекс
{layout = 'layouts / _multi-layout'} {exp: канал: записи channel = 'manager' limit = '8' paginate = 'both' orderby = 'title' sort = 'asc'} {if no_results} {redirect = '404'} {/ if} <! - Ваша разметка для отображения записей будет здесь. -> <h2> {title} </ h2> <! - Наш блок разбивки на страницы находится ниже, он будет размещен над и под записями, поскольку мы указали paginate = "both" -> {paginate} <! - - Установите переменную макета для заголовка страницы. Это важно, когда к полной странице обращаются и пользовательские агенты, у которых нет JavaScript. Для наших запросов Ajax мы уже позаботились об этом в _managers-layout. Обратите внимание, что в этом случае бит «| {site_name}» позаботится в нашем _html-макете, где выводится тег title. -> {layout: set name = 'title'} Менеджеры - Page {current_page} {/ layout: set} <! - Наши ссылки на страницы находятся в контейнере с классом, который мы использовали в нашем JavaScript ранее. -> <div class = 'manager-list-pagination'> {pagination_links} </ div> {/ paginate} {/ exp: channel: records}
Опять же, встроенные комментарии объясняют, что мы делаем, но я хотел бы обратить внимание на некоторую защиту, которую мы добавили от перебора URL или ошибочных ссылок.
{if no_results} {redirect = '404'} {/ if}
Это говорит ExpressionEngine отображать страницу 404 сайта (с правильными заголовками 404), которую мы определено в наших настройках шаблона если нет никаких результатов. Когда это будет? Когда URL дает подсказку тегу о том, что показывать, но нет записей, соответствующих этому критерию. Например, за пределами страницы запросы, такие как страница 4872, когда не так много записей: / Manager / P4872.
Этот простой пример может быть расширен и, конечно, размечен и стилизован для вашего сердца. Ключевыми техническими элементами реализации являются:
- Используйте пару тегов {paginate} {/ paginate} как для разбивки на страницы, так и для задания заголовка страницы при начальной загрузке URL-адреса.
- Сделать Ajax легким вызовом, только обрабатывая и обслуживая теги, необходимые для доставки контента.
- Используйте history.pushState (), чтобы поддерживать заголовки страниц и историю браузера как для удобства пользователей, так и для удобства SEO.
- Установите перенаправление 404 для запросов за пределы, запустите плотный корабль!
- Оставайтесь сухими, используя макеты и переменную {is_ajax_request}, чтобы вам не приходилось создавать специальные шаблоны Ajax.
- Эта же техника может быть непосредственно применена к охват одной записи на нескольких страницах ,
Следуйте этим принципам, и вы можете легко обеспечить SEO и удобную нумерацию страниц Ajax, впечатляя клиентов и улучшая впечатления для посетителей своего сайта.
Похожие
SEOЧто такое SEO? SEO - это аббревиатура от поисковой оптимизации, и само значение описывает оптимизацию веб-портала в поисковых системах. Это в основном стратегия цифрового маркетинга для повышения производительности присутствия компании в Интернете. Это помогает генерировать трафик на веб-сайт для пользователей Интернета для поиска любой информации, продукта или услуг, вводя ключевые слова на страницах поисковых систем, таких как Google, Yahoo, Bing и т. Д. SEO копирайтинг
Копирайтер Лесли Лангелаар-Томас в "Звезды и тюльпаны" Нет времени на (SEO) копирайтинг? Нужна помощь в написании (SEO) контента? Написание (SEO) контента требует больше, чем просто быстро и эффективно донести ваше сообщение в рамках ограничений одного экрана компьютера. Люди по-разному читают 94 SEO КОНГРЕСС
На этой неделе Гранада является центром офтальмологических исследований. Во Дворце конгрессов Гранады со вчерашнего дня по 26 сентября проходит 94-й Конгресс Испанского общества офтальмологов, 73-е издание которого состоялось на PCGR в 1997 году. Целью конгресса является объединение специалистов всех специальностей офтальмологии, разоблачающих широкое представительство врачей института. Вы можете насладиться проведением новых процедур в области офтальмологии благодаря достижениям, достигнутым SEO сайт
Является ли ваш сайт важным каналом в ваших маркетинговых коммуникациях? Это хорошо, чтобы оценить, занимает ли ваш сайт стабильно хорошие позиции в поисковых системах. Таким образом, вы сразу узнаете, где и как улучшается SEO-сайт . При проведении аудита SEO мы тщательно проверяем список факторов, которые, как мы знаем, являются критическими для Google. Тем не менее, проблемы электронной коммерции сайта SEO разные. Каждый аудит уникален, и рекомендации SEO оптимизация
При создании веб-страниц базовая оптимизация исходного кода SEO БЕСПЛАТНА. Размещение www для лидирующих позиций в поисковых системах в Интернете перед соревнованиями на самых известных порталах, таких как Seznam.cz, Google.cz, Centrum.cz, Atlas.cz и т. Д. Мы обеспечим создание и управление ссылками, ведущими на ваш сайт в Интернете, для отслеживания ключевые слова на верхних позициях, в зависимости от вашей отрасли, продуктов и направленности. Местное SEO
Вопрос в том, как это сделать правильно? Давайте представим, что ваш автомобильный генератор вышел из строя, когда вы были в поездке в Бристоле. Вы достаете свой телефон и вводите в поисковике «фиксация генератора». Вы наверняка будете рады видеть ТОП-10 результатов из Лондона, Кардиффа и Суонси. На самом деле, нет? Геолокация первая. Мы могли бы добавить название города к нашей поисковой фразе, но давайте посмотрим правде в глаза, кто хочет сделать Профессиональный SEO
По состоянию на Видео UniPymes Я написал этот небольшой урок, чтобы узнать, из чего состоит эта гибкая методология. В традиционной методологии планирования проекта, или каскада, сначала предъявляются требования, затем проектируется, затем выполняется кодирование и, наконец, оно интегрируется, с этого момента мы говорим, что срок и продукт соблюдены. Это закончено. Впоследствии управление техобслуживанием налажено. Обратный SEO
Последняя проверка 3 марта 2019 года в 22:06 Управление репутацией в поисковых системах становится все более популярным в эти дни. Это время, когда в результатах поиска на блог-платформах, Что значит SEO?
Как представить новую статью, была мысль, которая охватила меня на несколько дней. Что я думаю, что могу сделать прямо сейчас? Как мне объяснить мои намерения? Короче говоря, много сомнений и мало определенности. Однако теперь я нашел идею в трех простых словах: FAQ по веб-маркетингу или наиболее частые вопросы, которые любой пользователь сети может задать о веб-маркетинге. Давайте начнем этот путь, отвечая на первый и простой вопрос о веб-маркетинге: что это значит SEO правда
Поисковая оптимизация Enigine Во вторник я пошел на бесплатный семинар по SEO от Тонни Лурбаха. При свободном слове обычно начинают звонить сигнальные колокола. Моя модель ожидания сразу становится «о, ты захочешь ее продать». Конечно, это не является неоправданным, потому что часто это так. Тем не менее, в настоящее время информация все чаще раздается, и эта SEO Перт | SEO компания, SEO услуги - Перт WA
Профессиональная SEO компания Перт Мы предоставляем профессиональные услуги SEO в Перте. Мы оттачивали наши навыки SEO в течение 20 лет! Нам доверяют лучшие бренды по уважительной причине. С нашей поисковой оптимизацией (SEO) вы окажетесь на вершине органического рейтинга Google, когда кто-то ищет в Google продукты и / или услуги, которые вы предлагаете. На сегодняшний день
Комментарии
Знаете ли вы, как провести аудит SEO для текущего сайта, будь то в возрасте 10 или 10 лет, зная техническое SEO, SEO вне страницы, и что нужно улучшить на странице перед началом работы?Знаете ли вы, как провести аудит SEO для текущего сайта, будь то в возрасте 10 или 10 лет, зная техническое SEO, SEO вне страницы, и что нужно улучшить на странице перед началом работы? On-P возраст SEO SEO на странице - это практика оптимизации отдельных веб- страниц для повышения рейтинга и получения более релевантного Чтобы узнать средние цены на SEO, в том числе статьи SEO, смотрите нашу статью Каковы цены на SEO?
Знаете ли вы, как провести аудит SEO для текущего сайта, будь то в возрасте 10 или 10 лет, зная техническое SEO, SEO вне страницы, и что нужно улучшить на странице перед началом работы? On-P возраст SEO SEO на странице - это практика оптимизации отдельных веб- страниц для повышения рейтинга и получения более релевантного На протяжении всей книги мне приходил в голову один вопрос: почему он называется «SEO», когда SEO является аббревиатурой от «поисковой оптимизации» - не следует ли его называть «SEO»?
На протяжении всей книги мне приходил в голову один вопрос: почему он называется «SEO», когда SEO является аббревиатурой от «поисковой оптимизации» - не следует ли его называть «SEO»? Наибольшая слабость в содержании обусловлена объемом темы. В результате рекомендации и рекомендации по действиям и стратегии обычно формулируются во многих местах. Пример (стр. 516): «Если здесь [в SEA] ключевые слова открываются по низкой цене за конверсию и требуется дополнительный трафик, то это возможно Кто не читал «Успешный SEO: Стратегия и методы SEO - издание 2015» Оливье Андрие, один из французских SEO?
Кто не читал «Успешный SEO: Стратегия и методы SEO - издание 2015» Оливье Андрие, один из французских SEO? Если это ваш случай, его нужно срочно исправить! Это действительно впечатляющая книга на 661 страницу, в которой абсолютно перечислены все аспекты и современные методы SEO. Предпочитаю последняя версия 2015 года, которая полностью обновлена (35 €) , «Написанная одним из ведущих французских специалистов по SEO, эта книга Кто такой мастер SEO, эксперт и эксперт по SEO в Blitar?
Кто такой мастер SEO, эксперт и эксперт по SEO в Blitar? Вам часто будет любопытно на этот вопрос, если вы давно в мире блоггера, страница. Почему? Потому что в мире блогеров и сайтов, которые не будут разделены в науке о SEO, знания, которые воплощают то, что мы публикуем в Seacrh Engine, появляются на главной странице Google. Страницы Google одной не должно быть, но она уже может появиться на 10 лучших страницах Google, вместо этого это признак того, что в нашем письме уже есть методы SEO, «От эмпирического SEO к SEO, ориентированному на данные: как управлять своей стратегией в 2017 году?
«От эмпирического SEO к SEO, ориентированному на данные: как управлять своей стратегией в 2017 году?»). Специалист также отмечает, что все эти данные можно отслеживать с помощью очень гибких и мощных, даже с открытым исходным кодом, настраиваемых решений для панели мониторинга, таких как Superset, разработанных Airbnb. Прежде всего: умело эксплуатируемые, все эти данные могут питать системы машинного обучения и, таким образом, открывать путь к прогнозированию. Датавиз для обнаружения Если вы не являетесь веб-редактором, ваша первая мысль о поисковой оптимизации (SEO) может быть: «Какое отношение SEO имеет ко мне?
Если вы не являетесь веб-редактором, ваша первая мысль о поисковой оптимизации (SEO) может быть: «Какое отношение SEO имеет ко мне?» Тем не менее, когда мы редактируем веб-копию, мы можем помочь с SEO. И точно так же, как косвенное редактирование помогает издателю быть более успешным, так же, как и SEO. Мы знаем, какое значение наше рукописное редактирование вносит в рукопись, и как это влияет на успех издателя. Хороший SEO помогает большему количеству людей найти опубликованную Чем отличаются SEO и локальное SEO?
Чем отличаются SEO и локальное SEO? Местное SEO направлено на повышение вашего присутствия для местных клиентов, которые проводят поиски. Это помогает вашему бизнесу общаться с людьми, которые проводят поиски в вашем регионе или ищут такой же бизнес в вашем регионе. Будучи местным бизнесом, Google Карты играют важную роль, помогая людям общаться с вашим бизнесом. Когда люди проводят поиск конкретной компании в вашем регионе, они часто встречают в Google Картах список компаний, Как вы можете узнать, что такое хороший SEO и плохой набор инструментов SEO?
Как вы можете узнать, что такое хороший SEO и плохой набор инструментов SEO? Более интересным фактом является то, что вы можете использовать свой инструмент аудита SEO, чтобы получить больше трафика, потенциальных клиентов, продаж и, в свою очередь, больше доходов для вашего бизнеса. Люди продолжают искать вещи в поисковых системах. Такой трафик может быть очень мощным, потому что это очень специфический и интенсивный трафик. Методы SEO помогут вам позиционировать Com за июль-август 2018 года вышло и предлагает следующие статьи (не стесняйтесь, подписывайтесь!): Удовлетворенность пользователей и SEO - Неактивный контент в SEO: как лечить их?
com за июль-август 2018 года вышло и предлагает следующие статьи (не стесняйтесь, подписывайтесь!): Удовлетворенность пользователей и SEO - Неактивный контент в SEO: как лечить их? - Расширения справки по поиску в браузере Firefox - 14 действий для улучшения показателей Lighthouse - Лоран Буррелли: Как будет выглядеть SEO через 5 лет? - Может ли Google подать в суд на SEO-агентство за мошенничество? - Обзор инструментов - Обзор URL. Но понимаете ли вы различные части SEO, и что есть как на странице, так и вне страницы SEO?
Но понимаете ли вы различные части SEO, и что есть как на странице, так и вне страницы SEO? На этой странице мы поговорим обо всем, что подпадает под общий термин SEO на странице и поговорите о том, как вы можете максимизировать свои усилия, чтобы увидеть лучшие результаты. Если вы хотите поговорить со специалистом о SEO для вашего сайта, вы можете связаться с нами по телефону
Https?
Когда это будет?
Нужна помощь в написании (SEO) контента?
На самом деле, нет?
Что я думаю, что могу сделать прямо сейчас?
Как мне объяснить мои намерения?
Знаете ли вы, как провести аудит SEO для текущего сайта, будь то в возрасте 10 или 10 лет, зная техническое SEO, SEO вне страницы, и что нужно улучшить на странице перед началом работы?
Знаете ли вы, как провести аудит SEO для текущего сайта, будь то в возрасте 10 или 10 лет, зная техническое SEO, SEO вне страницы, и что нужно улучшить на странице перед началом работы?
На протяжении всей книги мне приходил в голову один вопрос: почему он называется «SEO», когда SEO является аббревиатурой от «поисковой оптимизации» - не следует ли его называть «SEO»?
Кто не читал «Успешный SEO: Стратегия и методы SEO - издание 2015» Оливье Андрие, один из французских SEO?
