Наша команда-партнер Artmisto
Ця стаття навчить вас, як зробити SEO-дружнє Agax та дружнє користування за допомогою ExpressionEngine за 6 хвилин.
Ось цілі, які ми досягнемо з цим поступовим вдосконаленням:
- Чудовий досвід користувачів
- Зручний для мобільних користувачів
- Мінімізуйте ресурси на сервері
- SEO-дружні, зокрема:
- Скануються усіма пошуковими системами
- Належні назви сторінок
- Правильна історія веб-переглядача
- Правильне поведінка
У нашому прикладі ми створюємо дійсно важливий сайт, який має фантастичний список ключових контактів для кожного важливого місця у Всесвіті. Це величезний список, тому ми хочемо його роздрукувати, і я хотів би показати вісім разів. Ми працюватимемо ззовні, щоб компоненти компонування мали сенс.
Перше, що потрібно зробити, це створити батьківський макет 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> <! - Тут ви, напевно, маєте навігацію сайту, заголовок сторінки тощо, але для цього прикладу я скорочую розмітку до тільки те, що має відношення до нашого прикладу Agax. -> <! - Змінна змісту макета буде замінена на вміст шаблонів, які використовують цей макет. Ми також додаємо спосіб для шаблонів, щоб надати атрибут 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> </ html> {/ if}Зверніть увагу, що якщо це запит Ajax, то єдиним вмістом, який ми виводимо, є вміст контейнера, який надається нашими шаблонами. У нашому випадку це буде, перш за все, тег Записи каналу. Ми хочемо, щоб ця зовнішня обгортка була загального призначення та багаторазовою. Ми використовуємо змінну {layout: js}, яка також дозволяє шаблонам надавати необхідну поведінку. Ми могли б зробити те ж саме з боковими панелями та іншими компонентами, які не збігаються на кожній сторінці сайту.
Тепер повернемо один шар лука назад і подивимося на наш наступний шаблон макета:
макети / _multi-макет
Як ви можете сказати за назвою, ми тепер стаємо більш конкретними в цілях нашого макета, в даному випадку для багатосторінкових сторінок. Зрештою, це буде використано для сторінки з лістингами менеджерів, і вона є загальною метою, тому її можна використовувати на інших багатосторінкових сторінках за потреби. Він буде тримати наше JavaScript для Agax паґінації, визначеної в тезі {layout: set name = "js"} {/ layout: set} тегова пара, яку ми вже розповідали батьківському _html-layout wrapper, де він належить.
{layout = 'layouts / _html-layout'} <! - Надайте атрибут id для нашого контентного контейнера. -> {layout: set name = 'content_id' value = 'listing-list'} <! -> {layout: contents} <! - Встановіть JS, що потрібні всім нашим "менеджерам" вмістних сторінок. Це може виглядати страшно, але є лише десяток рядків коду, решта - детальні коментарі, що пояснюють методологію. -> {layout: set name = "js"} <script> $ (document) .ready (function () {// '# менеджер-список' - це ідентифікатор, який ми надали для батьківського контейнера нашого вмісту. // ' .managers-listing-pagination '- це клас, який ми надамо нашим контейнерам посилань на сторінки. батьківський контейнер //, який існує в нашому оригінальному розмітку і не замінений або видалений з DOM. $ ('# менеджер-список'). on ('клік', '.managers-list-pagination a', функція (e ) {// Запобігання звичайній поведінці браузера при натисканні посилання // і захоплення href посилання на розбиття сторінок, яке вони натиснули. E.preventDefault (); var source = $ (this) .attr ('href'); // Додаємо індикатор завантаження для повільних з'єднань, використовуємо все, що завгодно, якщо ви не знайомі з їх використанням, ви можете отримати деякі ідеї на http://cssload.net var loadIndicator = $ ('<div class = " loader "id =" ajax-load-indicato r "> </div> '); $ ('# менеджер-список'). prepend (loadIndicator); // Вибір нашого вмісту $ .get (source, function (data) {// Вставте наш новий вміст, видаливши індикатор завантаження. $ ('# Managers-listing'). Html (data); $ ('# ajax-load // Оновити назву сторінки для вкладок веб-переглядача, отримуючи номер сторінки з посилання на сторінки сторінок, які вони натискали. і внизу), ми хочемо тільки захопити: перший // або на сторінці 3 з'явиться "Сторінка 33", і так далі. var title = 'Менеджери - Сторінка' + $ ('. document.title = title; // З міркувань безпеки pushState () не оновлює URL-адресу, якщо вона містить домен, // тому ми використовуємо регулярний вираз для зберегти тільки шлях, наприклад / managers / P4. var path = source.replace (/ https?: / [^ / + + / i, '')) // Натисніть цю сторінку на стек історії браузера функціональність кнопок вперед / назад: history.pushState ({}, назва, шлях);}); }); }); </script> {/ layout: set}Вбудовані коментарі докладно пояснюють, що ми робимо. В основному ми спостерігаємо за посиланнями на розбиття сторінок, вибираючи їх вміст через Ajax, і переконайтеся, що назви сторінок і історія браузера відповідно оновлюються. Таким чином, ми поступово розширювали користувацький досвід, не порушуючи жодної очікуваної поведінки браузера, щоб бути спритним. А для роботів пошукових систем, які розуміють JavaScript, це дуже важливо для індексування.
Тепер нам потрібно створити шаблон для URL / менеджерів, який буде використовувати _multi-layout. Ми додамо тег Записи каналу з нумерацією сторінок, і ми закінчили!
менеджери / індекс
{layout = 'layouts / _multi-layout'} {exp: channel: entries канал = 'менеджери' limit = '8' paginate = 'обидва' orderby = 'title' sort = 'asc'} {якщо no_results} {redirect = '404'} {/ if} <! - Ваша розмітка буде відображатися тут. -> <h2> {title} </h2> <! - Наш блок нумерації сторінок нижче, він буде розміщений вище і нижче записів, оскільки ми вказали paginate = "both" -> {paginate} <! - - Встановити змінну компонування для назви сторінки. Це є важливим, коли доступ до повної сторінки здійснюється і агентами користувачів, які не мають JavaScript. Для наших запитів Ajax ми вже опікувалися цим у _managers-layout. Зверніть увагу, що в цьому випадку біт "| {site_name}" дотримується в нашому _html-макеті, де виводиться тег заголовка. -> {layout: set name = 'title'} Менеджери - Сторінка {current_page} {/ layout: set} <! - Наші посилання на розбиття сторінок знаходяться в контейнері з класом, який ми раніше використовували в JavaScript. -> <div class = 'менеджери-лістинг-нумерація'> {pagination_links} </div> {/ paginate} {/ exp: канал: записи}Знову ж таки, вбудовані коментарі пояснюють те, що ми робимо, але я хотів би звернути увагу на певний захист, який ми додали до неправдивих або неправильних посилань.
{if no_results} {redirect = '404'} {/ if}Це говорить ExpressionEngine для відображення сторінки 404 сайту (з правильними 404 заголовками), які ми маємо визначено в налаштуваннях шаблонів якщо результатів немає. Коли це буде? Коли URL-адреса дає підказки до тегу про те, що показувати, але немає жодного запису, що відповідає цьому критерію. Наприклад, запити сторінок, наприклад, сторінки 4,872, коли таких записів не так багато: / managers / P4872.
Цей простий приклад можна розширити, і, звичайно, позначити і підібрати до змісту вашого серця. Ключовими технічними елементами впровадження є:
- Використовуйте пару тегів {paginate} {/ paginate} як для нумерації сторінок, так і для встановлення назви сторінки на початковому завантаженні URL-адреси.
- Зробити Ajax викликає легку вагу, тільки обробляючи і обслуговуючи теги, необхідні для доставки змісту.
- Використовуйте history.pushState () для збереження назв сторінок і історії веб-переглядача для зручності користувачів і зручності в SEO.
- Встановіть переадресацію 404 для виклику поза межами, запустіть жорсткий корабель!
- Залишайтеся DRY, використовуючи макети та змінну {is_ajax_request}, щоб вам не потрібно створювати спеціальні шаблони Ajax.
- До цієї ж методики можна безпосередньо застосувати що охоплює один запис на декількох сторінках .
Дотримуйтесь цих принципів, і ви можете легко доставити SEO та дружню версію Ajax, вражаючи клієнтів та покращуючи досвід відвідувачів свого сайту.
Https?Коли це буде?
