SEO для Blogger - динамічна зміна title для окремої сторінки (три перших рядки)

Якщо ви розробляєте шаблон для blogger з нуля, то Вам обов'язково доведеться забезпечити наявність необхідних мета тегів для пошукової оптимізації.

Простим прописуванням мета тегів вручну тут вирішити питання не вийде, а потрібно буде використовувати засоби та можливості динамічного оновлення мета тегів.

Саме на цю тему я хочу розпочати цикл публікацій.

Я не буду окремо зупинятися на важливості SEO а перейду відразу до практичних рішень.

Пишемо 1 рядок

Перший рядок, який ми пропишемо відразу після тегу <head> пропоную писати наступний код:

<b:if cond='data:view.isError'><title>Error 404: Page Not Found</title></b:if>

Зверніть увагу, я пишу код в один рядок, щоб у такому ж вигляді його зручно було додавати до Вашого шаблону.

Перш ніж ми розберемося детальніше з цим рядком, нам потрібно з'ясувати, чому ми його прописуємо відразу після тегу <head>.

Заголовок сторінки (<title>) є важливим елементом для SEO, тому його розміщують всередині <head>. Пошукові системи сканують <title> для отримання інформації про сторінку.

Заголовок сторінки повинен бути визначений якнайшвидше, щоб користувач і браузер мали чітке уявлення про вміст сторінки ще до її повного завантаження.

Вказуючи, що це сторінка 404, ви уникаєте плутанини, яка могла б призвести до помилок в індексації.

У шаблонах Blogger змінна data:view.isError доступна ще до завантаження основного контенту сторінки. Розміщення цього коду відразу після <head> дозволяє динамічно змінити заголовок, якщо це сторінка з помилкою.

Користувачі відразу бачать, що це сторінка помилки. Пошукові системи дають правильний сигнал про статус сторінки, допомагаючи уникнути плутанини з індексацією. Логіка умовного відображення заголовка знаходиться в одному місці, близькому до інших метаданих.

Тепер перейдемо до детальнішого пояснення цього рядка.

Тег <b:if>

Це спеціальний тег шаблонізатора Blogger (Blogspot), який використовується для умовного рендерингу. Він дозволяє виконувати певний блок HTML-коду тільки тоді, коли умова (cond) є істинною.

Умова data:view.isError

data:view.isError — це змінна, яка визначає, чи є поточна сторінка помилковою (наприклад, 404 — сторінка не знайдена). Якщо сторінка викликає помилку, ця змінна має значення true.

Вміст блоку <title>

Якщо умова data:view.isError є істинною, тег <title> задає текст заголовку сторінки як "Error 404: Page Not Found". Це дозволяє пошуковим системам і користувачам бачити, що це сторінка помилки.

Ми розглянули цікаву реалізацію коду першого рядка <title> для випадку коли сторінка не знайдена. Я пояснив чому вона розміщується відразу після тегу <head>.

Пишемо 2 рядок

Продовжуємо розглядати рядки коду для Blogger, які допомагають підтримувати правильну структуру і адаптивність для SEO Вашого шаблону.

Розглянемо, на мій погляд, дуже цікавий рядок у шаблоні Blogger, який також використовує умовну конструкцію для динамічного управління заголовком сторінки залежно від її типу.

Динамічний заголовок для головної сторінки блогу: Якщо ви перебуваєте на головній сторінці, <data:blog.pageTitle/> вставляє назву блогу у заголовок сторінки. Головна сторінка блогу часто має найбільше значення для SEO, тому важливо, щоб її заголовок був чітким і релевантним.

<b:if cond='data:view.isHomepage'><title><data:blog.pageTitle/></title></b:if>

Повторимо дещо з попередньої публікації для тих хто її не читав.

Тег <b:if>

Цей тег визначає, що вкладений код виконується тільки тоді, коли умова cond є істинною.

А тепер нове - Умова data:view.isHomepage

Змінна data:view.isHomepage є специфічною для Blogger і має значення true, якщо поточна сторінка є головною сторінкою блогу (тобто сторінкою, що відображає головний список публікацій). Тобто, якщо умова істинна, виконується вкладений блок коду:

<title><data:blog.pageTitle/></title> <title>: задає заголовок сторінки, який відображається у вкладці браузера або результатах пошуку.<data:blog.pageTitle/>: динамічний маркер Blogger, який автоматично підставляє заголовок вашого блогу, заданий у налаштуваннях (наприклад, "Мій блог" або "Новини").

Висновок простими словами:

Якщо Ви, чи користувач знаходитесь не на головній сторінц блогу, то цей код не спрацює, а якщо Ви перейдете на головну, то спрацює! :)>

Отже ми вже маємо в своєму арсеналі два рядки для SEO:

<b:if cond='data:view.isError'><title>Error 404: Page Not Found</title></b:if>
<b:if cond='data:view.isHomepage'><title><data:blog.pageTitle/></title></b:if>

Пишемо 3 рядок

Продовжуємо працювати з тегом title у blogger. Розглянемо можливість застосування ще одного цікавого рішення для динамічного створення чи оновлення title.

Ми знаємо, що blogger нам може запропонувати кілька видів сторінок - головна сторінка, сторінка зі списком публікацій певної категорії і сторінка з однією публікацією, або повністю певна сторінка. Для нас головне зрозуміти поділ на два типи сторінок - сторінки зі списком кількох постів, або окремий пост.

Наша задача відокремити мультисторінки зі списком постів від сторінок з одинарною публікацією, до якої нам і потрібно динамічно визначити значення title. Можливо закрутив дещо складнувато, але якщо щось буде не зрозуміло, пишіть у коментарях!

Отже нам потрібен код, який визначатиме умову відображення тега <title>, який, яки ми вже знаємо задає заголовок сторінки у браузері. І у мене є хороша новина, такий код існує і ми його сьогодні детально розглянемо.

<b:if cond='!data:view.isMultipleItems'><title><data:blog.pageName/> - <data:blog.title/></title></b:if>

Цей рядок використовується в шаблонах для Blogger (платформи для створення блогів). Він визначає умови, за яких можливе відображення тега <title>, який у свою чергу задає заголовок сторінки у браузері. Довге речення вийшло, але я дуже старався і зовсім не мав на меті комусь винести мозок! 😉

Отже перейдемо до детального пояснення рядка:

<b:if cond='!data:view.isMultipleItems'>
Цей тег умовного блоку в шаблонах Blogger, який перевіряє умову:

data:view.isMultipleItems — це властивість, яка вказує, чи відображається список кількох постів (наприклад, головна сторінка блогу або сторінка з певною категорією).
!data:view.isMultipleItems — логічне заперечення. Тобто, умова true, якщо відображається не список, а окремий пост або сторінка.

Отже, цей блок активується, коли відображається одна сторінка або один пост.

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

<title> - Тег для визначення заголовка сторінки, який показується у вкладці браузера.
<data:blog.pageName/> - спеціальна змінна Blogger, яка містить назву поточної сторінки (наприклад, назва поста чи сторінки).
<data:blog.title/> - інша змінна Blogger, яка містить заголовок блогу загалом.
</title> - закриваючий тег <title>.
</b:if> - закриває умовний блок.

Коли умова !data:view.isMultipleItems виконується (відображається окремий пост або сторінка), у <title> записується назва цієї сторінки або поста (<data:blog.pageName/>) та загальний заголовок блогу (<data:blog.title/>), розділені дефісом (-).

Отже, вітаю! Ми отримали третій корисний рядок коду, який нам допоможе динамічно працювати з тегами в Blogger.

<b:if cond='data:view.isError'><title>Error 404: Page Not Found</title></b:if>
<b:if cond='data:view.isHomepage'><title><data:blog.pageTitle/></title></b:if>
<b:if cond='!data:view.isMultipleItems'><title><data:blog.pageName/> - <data:blog.title/></title></b:if>

Робимо висновок - цей рядок коду нам також необхідний!👍

Якщо є питання чи коментарі, пишіть, з радістю обговоримо! Підписуйтесь на блог! Вдалого кодування!

SHEN