Target= “_blank”: кога и как да го поставиш

Когато кликнеш върху връзка в публикация, ти си изпратен към друг ресурс, който може да бъде вътрешен или външен. Това е основната характеристика на мрежата: способността да се създават документи, които се свързват с други и непрекъснато се обогатяват с нови ресурси. Говорейки за връзки, днес ще се спра на атрибут target=”_blank” за WordPress. Това е атрибут на HTML код, който се използва за отваряне на хипервръзка в друг раздел на браузъра.

Пример:

&lta href="https://ivytechnoweb.net" target="_blank"&gtВиж в Ivytechnoweb&lt/a&gt

Връзките могат да имат атрибути, характеристики. Най-важният атрибут на <a> елемента е атрибутът href, който показва дестинацията на връзката. Виж другите атрибути в w3schools.

В мои публикации пиша за:

• rel=“nofollow” и също в тази публикация за meta tag robots и разликата с rel nofollow;
• rel=“noreferrer” и rel=“noopener” или заедно rel=“noopener noreferrer”.

Това са „rel“ атрибути, изрази, които определят връзка между свързващия документ и този, към който се свързва. Target =”_blank” , от друга страна, указва как да отвориш връзката. Когато вмъкнеш връзка, по подразбиране се прилага „target= _self“, атрибут, който позволява на потребителя да отвори страница в същия прозорец на браузъра.

Target=”_blank” отменя това правило и налага маневра на браузъра: той отваря връзката в друг прозорец.

Защо да използваш target=“_blank“?

Много просто: за да не загубиш потребителя. 

Ако оставя настройките по подразбиране и страницата продължи с отваряне в същия прозорец, читателят ще напусне моя блог или сайт, когато щракне върху външна връзка. И това хич не е хубаво.

Основното предимство на target=“_blank“ е това.

Ето още няколко причини поради които ние (вкл. и аз) използваме target=“_blank“:

1. Защото ни харесва така

Target=“_blank“ отменя поведението по подразбиране. Връзките, отварящи се на същата страница, са поведението по подразбиране (сякаш връзката има target=“_self“). Може да си придобил навика да отваряш всички връзки в нови прозорци / раздели (както правя и аз).

(adsbygoogle = window.adsbygoogle || []).push({});

2. „Вътрешните“ и „външните“ връзки се държат по различен начин

Вътрешните връзки си поставил да се отварят по подразбиране в същия прозорец, но външните връзки (сочещи към други сайтове) се отварят в нов прозорец / раздел. Това също е по горните причини. И се препоръчва от много уеб администратори.

3. Връзка към PDF или друг вид извънмрежов ресурс

Начин да се помогне на потребителите да изтеглят файл, без да го отварят, или да го отворят в друг прозорец / раздел, без да има нужда да се връщат с бутона за връщане назад.

В противен случай може да се използва атрибута на <a> за изтегляне – download, който указва, че целта ще бъде изтеглена, когато потребител щракне върху хипервръзката.

Пример:

&lta href="/images/deskcomputer.jpg" download&gt
&lta href="files/invoice.pdf" download&gtInvoice&lt/a&gt

Ако името на оригиналния файл е кодирано за уникално съхранение на файлове, можеш да посочиш удобно за потребителя име за изтегляне, като присвоиш стойност на атрибута за изтегляне:

<a href="files/j24oHPqJiUR2ftK0oeNH.pdf" download="invoice.pdf">Invoice</a>

Когато свързваш PDF документ, е по-полезно да въведеш target=”_blank”, защото това не е нормална уеб страница, а различен документ. И target=“_blank“ може да подчертае тази функция.

4. Безкрайно превъртане на страницата

Ако твоят блог е от онези с безкрайно превъртане на страниците, тогава клиент, който е някъде по страниците, и отвори в същия прозорец друга страница, последвал твоя линк, след това трудно ще се върне на същото място да си дочете материала.

5. Потребителят започва възпроизвеждане на медийно съдържание

Например: музика, видео, подкаст… Потребителят е започнал да възпроизвежда медийно съдържание. Преместването на страници ще го спре. Тук наистина е необходимо връзката да се отвори в нов раздел.

6. Потребителят работи на тази страница с нещо, което може да бъде загубено при промяната й

Може би потребителят пише нещо. Кликването върху връзка и смяната на страници може да бъде загуба на работа в развитие и много време.

7. Някаква техническа гледна точка

(adsbygoogle = window.adsbygoogle || []).push({});

Някои правила за връзките

Преди години отварянето на връзките в нов раздел е било неприемливо, поради причина, че потребителят трябвало да избере, а не да е принуждаван. Друга причина е, откритата от WordPress опасност за фишинг при откриване на връзка в нов раздел, с името Reverse tabnabbing. Но след въвеждането и автоматичното поставяне на атрибута rel=“noopener”, когато се използва target=“_blank“, тази опасност се избягва.

В полза на поверителността пък е въведен атрибутът rel=“noreferrer”.

Виж подробно за тези два атрибута в тази моя публикация: Какво означава rel=”noopener noreferrer” атрибутът в WordPress? (и влияе ли върху SEO?)

Ето някои други характеристики, които би трябвало да имат връзките в един текст:

• Различен цвят от останалата част на текста (за предпочитане син).
• Подчертан текст.
• Цвят, който се променя след щракване.
• Курсор, който се променя, когато го задържиш върху връзка.
• Цвят на връзката, който се променя, когато читателят задържи курсора на мишката върху нея.

Детайл, който прави разликата: anchor текст. Винаги използвай текст за връзка, който кара читателя да разбере върху какво кликва. Ако е необходимо, използвай заглавието на връзката, за да предоставиш допълнителна информация за ресурса, който човекът ще намери, след като кликне.

Как да въведеш target=“_blank“ в WordPress?

Да вмъкнеш връзка с target=”_blank” в WordPress е лесно.

Ето как става в блоковия редактор:

Просто избери anchor текстa, кликни върху иконата на връзката (верига) и отметни опцията за отваряне в нов таб или прозорец в полето.

Ето какво е моето мнение

(adsbygoogle = window.adsbygoogle || []).push({});

Лично мен ме дразни, когато щракна върху връзка, докато чета нещо, и връзката се отвори на същата страница. Ако щракна върху връзка, това е, за да науча повече за нещо, но обикновено не искам да го направя веднага, а след като свърша да чета това, което изучавам в момента. Очевидно това е моето потребителско изживяване.

Също така приемам техниката на вътрешния _self и външния _blank. Честно казано трябва да помисля и за моя блог. Ако потребителят изиска друга публикация от моя блог, тя се отваря в същия раздел. Външните се отварят във външен раздел.

А твоето мнение?

Смяташ ли, че target=”_blank” е полезно решение за твоя уебсайт? Напиши в коментарите.

Заключение

Чрез target = “_blank” позволяваш на потребителите да продължат да четат твоята публикация; ако искат, по-късно ще погледнат на страницата, към която се свързваш. Ако твоят сайт се поддържа от WordPress, връзката ти към друг раздел ще носи друг кодов фрагмент със себе си:

rel = “noopener noreferrer”

WordPress автоматично добавя този малък низ всеки път, когато създадеш външна връзка, която се отваря към друг раздел. Основната причина е свързана с онлайн безопасността и опита на потребителите при сърфиране. Но какво означават тези атрибути? Виж в моята публикация: Какво означава rel=”noopener noreferrer” атрибутът в WordPress? (и влияе ли върху SEO?)