Искате ли да разберете как хората от различни региони намират в резултатите версии на страници от сайта, предназначени специално за тях? В тази статия ще разкажа за важните за визуализацията на сайта тагове — alternate, hreflang, media — и как могат да се използват успешно при популяризирането.
За какво въобще можем да ползваме тези тагове?
За да помогнем на търсачките да разберат на какви езици са преведени страниците на сайта, за кои региони са предназначени отделните му раздели, кои страници имат мобилна версия.
Всички тагове се внедряват в кода на сайта, в контейнера <head></head>. Вярно, има особености. За тях малко по-нататък.
За какво служи таг alternate?
Благодарение на единичния таг <link rel="alternate" /> роботите на търсачките могат да определят езиковите варианти и мобилната версия на една и съща страница от сайта — и да покажат на нужния потребител нужния алтернативен вариант на текущата страница.
Примери:
- определяне на езикова версия на сайта: <link rel="alternate" hreflang="kz" href="https://kz.example.com/" />;
- определяне на мобилна версия на сайта: <link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.example.com/">.
Как се използва атрибут type?
Тагът rel="alternate" в комбинация с атрибута type и значение, различно от “text/html”, насочва търсещите ботове към алтернативната версия на страницата в друг формат. Най-разпространените стойности са:
- application/rss+xml — за RSS формат;
- application/atom+xml — за формат Atom;
- application/activitystream+json — за Activity Streams JSON формат.
Например:
<link rel="alternate" type="application/rss+xml"
href=".rss" title="RSS feed for this page"/><link
rel="alternate" type="application/atom+xml" href=".atom"
title="Atom feed for this page"/><link rel="alternate"
type="application/activitystream+json" href=".as"
title="Activity Streams JSON feed for this page"/>За какво ни трябва таг hreflang?
Тагът казва на търсачките за съществуването на сайта на две идентични страници, но на различни езици или за различни региони. Hreflang предотвратява слепването на страници в процеса на индексиране и най-често се използва, когато:
- Контентът на регионални сайтове/каталози/субдомейни е частично или напълно идентичен. Например, сайтовете са насочени към различни региони, но езикът им е един и същ (Великобритания, САЩ, Австралия).
- Специалистите са превели само шаблона на сайта и контентът се генерира основно от потребителите. Трябва да се избягва появата на контент на няколко езика на един и същ URL.
- Контентът на различни езикови версии на сайта е преведен напълно на друг език, например, има варианти на страници както на английски, така и на испански.
- Сайтът е преведен частично и трябва да се показва само на потребители, ползващи определен език и/или от определен регион.
Таг hreflang обаче не дава 100% гаранция, че търсещите системи няма да вземат страниците с контент на един и същ език за дублирани. Затова силно препоръчваме страниците да съдържат уникален контент, ако разделяте страници на един език за различни региони.
В тага може едновременно да се посочват езикова и регионална версия на сайта. За целта трябва да се ползва такъв формат:
<link rel=”alternate” hreflang="xx-YY" href="URL" />- xx — език (задължително) според ISO 639-1;
- YY — регион (не е задължително) според ISO 3166-1 Alpha 2;
- URL — абсолютен URL на алтернативна страница.
Как да внедрим правилно таг hreflang?
- Важно е да се помни за необходимостта от взаимно свързване на страниците с линкове. Ако за българската версия е посочена алтернативна — англоезична, то и на англоезичната версия трябва да има посочена българската версия, иначе HTML кодът на страницата няма да е действителен. Линк към версията на всяка страница трябва да се постави също.
Например, за страница https://domain.com/page1:
<link rel="alternate" hreflang="en-GB"
href="https://domain.co.uk/page1"
/><link rel="alternate" hreflang="es"
href="https://domain.es/page1" /><link
rel="alternate" hreflang="x-default"
href="https://domain.net/page1"
/><link rel="alternate" hreflang="en"
href="https://domain.com/page1" />- Взаимното линкване трябва да сочи към аналогична страница от алтернативната версия на сайта. Често посочват началната страница като алтернатива на вътрешни страници, например, статия, каталог, продуктова страница. Това е грешка.
- Регистърът на символите при посочване на региона не е важен (поне така е за Google), но е най-добре стандартите да се спазват: да се посочва език с малки букви, а регион — с главни.
- Атрибутите hreflang могат да се използват във всякакви структури на сайта (различни домейни, субдомени или директории).
- Hreflang трябва да бъде използван независимо от настройките в Google Search Console.
Съществуват три начина за внедряване на тага hreflang: с помощта на HTML-тагове, ХML-карти и HTTP-заглавия.
Да предположим, че имаме сайтове:
- https://domain.com/ — за англоезични потребители от всякакви региони.
- https://domain.co.uk/ — за англоезични потребители от Британия.
- https://domain.es/ — за испаноезични потребители.
- https://domain.net/ — за всички останали потребители.
Внедряваме hreflang с помощта на HTML-тагове
На страниците, имащи алтернативна версия на друг език и/или за друг регион, трябва да се поставят линкове към версията.
За началните страници на сайтовете трябва да се сложат кодове в контейнера <head></head>.
За https://domain.com/:
<link rel="alternate" hreflang="en-GB"
href="https://domain.co.uk/" /><link rel="alternate"
hreflang="es" href="https://domain.es/"
/><link rel="alternate" hreflang="x-default"
href="https://domain.net/" /><link rel="alternate"
hreflang="en" href="https://domain.com/" />За https://domain.co.uk/:
<link rel="alternate" hreflang="en"
href="https://domain.com/" /><link
rel="alternate" hreflang="es"
href="https://domain.es/" /><link
rel="alternate" hreflang="x-default"
href="https://domain.net/" /><link
rel="alternate" hreflang="en-GB"
href="https://domain.co.uk/" />За https://domain.es/:
<link rel="alternate" hreflang="en"
href="https://domain.com/" /><link
rel="alternate" hreflang="en-GB"
href="https://domain.co.uk/" /><link rel="alternate"
hreflang="x-default" href="https://domain.net/"
/><link rel="alternate" hreflang="es"
href="https://domain.es/" />За https://domain.net/:
<link rel="alternate" hreflang="en"
href="https://domain.com/" /><link
rel="alternate" hreflang="en-GB"
href="https://domain.co.uk/" /><link
rel="alternate" hreflang="es"
href="https://domain.es/" /><link
rel="alternate" hreflang="x-default"
href="https://domain.net/" />Подреждането на самите тагове вътре в контейнера не е важно.
Внедряваме hreflang с помощта на XML-карта
Това е приоритетен начин, особено при наличие на голям брой алтернативни страници.
В картата трябва да се добави xhtml:link-element за всяка от страниците с алтернативни варианти. Тези тагове трябва да сочат към алтернативните адреси, включително към текущия. Вътре в елемента <url> трябва да се посочи xhtml:link-element c линковете към алтернативните версии на страниците.
За https://domain.com/:
<?xml version="1.0" encoding="UTF-8"?><urlset
xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="https://www.w3.org/1999/xhtml"><url><loc>
https://domain.com/</loc><xhtml:link rel="alternate"
hreflang="en-GB" href="https://domain.co.uk/"
/><xhtml:link rel="alternate" hreflang="es"
href="https://domain.es/" /><xhtml:link rel="alternate"
hreflang="x-default" href="https://domain.net/"
/><xhtml:link rel="alternate" hreflang="en"
href="https://domain.com/" /></url>...</urlset>За https://domain.co.uk/:
<?xml version="1.0" encoding="UTF-8"?><urlset
xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="https://www.w3.org/1999/xhtml"><url><loc>
https://domain.co.uk/</loc><xhtml:link rel="alternate"
hreflang="en" href="https://domain.com/" /><xhtml:link
rel="alternate" hreflang="es" href="https://domain.es/"
/><xhtml:link rel="alternate" hreflang="x-default"
href="https://domain.net/"
/><xhtml:link rel="alternate"
hreflang="en-GB" href="https://domain.co.uk/"
/></url>...</urlset>За https://domain.es/:
<?xml version="1.0" encoding="UTF-8"?><urlset
xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="https://www.w3.org/1999/xhtml"><url><loc>
https://domain.es/</loc><xhtml:link rel="alternate"
hreflang="en" href="https://domain.com/" /><xhtml:link
rel="alternate" hreflang="en-GB" href="https://domain.co.uk/"
/><xhtml:link rel="alternate" hreflang="x-default"
href="https://domain.net/"
/><xhtml:link rel="alternate" hreflang="es"
href="https://domain.es/" /></url>...</urlset>За https://domain.net/:
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="https://www.w3.org/1999/xhtml"><url><loc>
https://domain.net/</loc><xhtml:link rel="alternate"
hreflang="en" href="https://domain.com/" /><xhtml:link
rel="alternate" hreflang="en-GB" href="
https://domain.co.uk/" /><xhtml:link rel="alternate"
hreflang="es" href="https://domain.es/"
/><xhtml:link rel="alternate" hreflang="x-default"
href="https://domain.net/" /></url>...</urlset>Внедряваме hreflang с помощта на HTTP-заглавия
Този начин може да се използва за страници, които не са HTML-документи, а са например PDF-файлове:
Link: <https://domain.com/document.pdf/>;
rel="alternate"; hreflang="en"Link:
<https://domain.co.uk/document.pdf/>;
rel="alternate"; hreflang="en-GB"Link:
<https://domain.es/document.pdf/>; rel="alternate";
hreflang="es"Link: <https://domain.net/document.pdf/>;
rel="alternate"; hreflang="x-default"Прочетете също препоръките на Google за използването на атрибута hreflang.
Как да използваме таг media?
При оптимизация на страници за мобилни телефони и таблети най-често се използва:
- създаване на адаптивна версия на сайта;
- динамично показване;
- създаване на мобилна версия на сайта.
При използване на първите два метода, URL остава един и същ за десктоп и мобилната версия на страницата. При използване на мобилна версия на сайта се създават различни страници за различните версии на екраните, което води към дублиране на информация на различни URL.
За да се избегне изключването на такива дублирани страници от резултатите от търсенето, трябва да се използва атрибут media. Както и в случая с hreflang, използването на атрибута е препоръка на системите за търсене и не дава гаранции за присъствие в резултатите и на двете версии на една и съща страница.
Как правилно да внедрим таг media?
Да предположим, че десктоп версията на страницата на сайта е достъпна на https://domain.com/page, а мобилната на https://m.domain.com/page.
В такъв случай, на https://domain.com/page трябва да се постави указател към мобилната версия на сайта:
<link rel="alternate" media="only screen and (max-width: 640px)" href="https://m.domain.com/page">На мобилната версия на страницата, тоест на https://m.domain.com/page, трябва да се сложи код:
<link rel="canonical" href="https://domain.com/page">Прочетете също допълнителните препоръки на Google (тук още) за внедряването на атрибута media.
Изводи
- Единичният таг <link rel="alternate" /> е нужен за определяне на езикови варианти и мобилна версия на една и съща страница на сайта.
- При използване в комбинация с атрибута type и стойност, различна от “text/html”, rel="alternate", сочи към алтернативна версия на страницата в друг формат.
- Тагът hreflang казва за наличието на две идентични страници, но на различни езици или за различни региони. Hreflang предотвратява слепването на страници и най-често се използва в тялото на страниците. Съществуват три начина за внедряване на тага hreflang: с помощта на HTML-тагове, ХML-карти и HTTP-заглавия.
- За да се избегнат изключвания на дублирани страници от резултатите от търсене, трябва да се внедри таг media. Както и в случая с hreflang, използването на тага е препоръка на самите търсачки и не дава 100% гаранция за поява на дублираните страници в резултатите.
1
0
0
1
0