Доброго времени суток, Друзья. Сегодня, я решил поднять тему, которая должна быть интересной практически всем, кто, так или иначе, связан с созданием сайтов.
Ни для кого, ни секрет, что скачав бесплатно шаблон, для своего сайта, независимо от движка, который используется, для управления контентом. Мы можем столкнуться с проблемой исходящих ссылок, которые ставятся различными вебмастерами, необязательно авторами. Парочку ссылок может оставить автор шаблона, затем еще парочку могут оставить те кто, например, перевел шаблон, те, кто выложил… И в общем итоге, исходящих ссылок может быть довольно солидное количество.
Я не буду поднимать тему, стоит ли оставлять ссылки автора шаблона или нет. Принимать решение только Вам. Порой шаблоны настолько заспамлены ссылками, что довольно остро встает вопрос, как удалить исходящие ссылки с сайта. Но прежде, чем удалять ссылки, их необходимо найти.
Как найти внешние ссылки в исходном коде?
Способов поиска, я думаю не мало. Можно искать исходящие ссылки, с помощью различных сервисов, плагинов или модулей для движков. Например, как написано в этой статье. Но самый простой и точный способ — это поиск исходящих ссылок вручную. Возможно, у Вас появилось чувство, что руками искать придется довольно долго. Или что данный процесс довольно трудоемкий, нежели воспользоваться каким-либо сервисом или утилитой. Но на самом деле, все очень просто, а надежность данного метода ни сравнима, ни с чем.
И, кроме того, у нас есть ни один вариант поиска. Сначала рассмотрим вариант поиска, с помощью исходного кода. В данном случае, необходимо хотя бы образно понимать структуру используемого шаблона. То есть, из каких основных файлов состоит шаблон. К примеру, wordpress, состоит из главной страницы index.php или home.php, файла полной новости single.php, файла страниц page.php футера, хэдера и сайдбара. Зачем это нужно?
Это нужно для того, чтобы понять, где проверить сайт на исходящие ссылки. Например, если мы проверим главную страницу сайта — это не даст нам гарантии, что ссылок на сайте нет, так как, проверив главную страницу, мы проверим только файлы: index.php, header.php, footer.php и sidebar.php. Однако ссылки могут быть спрятаны в записи или на страницах, то есть в файлах single.php и page.php.
Отсюда можно сделать вывод, что стоит проверить как минимум три страницы: главную, страницу с записью и обычную страницу с какой-либо информацией, например, «О сайте».
Теперь, разберем, как найти внешние ссылки? Заходим на страницу сайта и нажимаем сочетание клавиш Ctrl+U. Откроется новая вкладка с исходным кодом сайта. Вот в нем-то мы наверняка сможем найти исходящую ссылку, даже если в файле, она зашифрована. Для того, чтобы найти, достаточно нажать сочетание клавиш Ctrl+F, после чего появится форма поиска. И в поле формы написать начало любого адреса в сети интернет, это протокол. То есть, пишем http и жмем «Enter». После этого, абсолютно все ссылки на сайте будут подсвечены в коде.
А дальше дело за малым — вычислить ссылки, которые не были установлены нами. И удалить их в файлах. Чтобы найти, в каком файле они запрятаны, достаточно воспользоваться следующим вариантом поиска внешних ссылок.
Как найти ссылку на сайте?
Следующий вариант — это поиск ссылок в самих файлах сайта. Допустим, мы скачали шаблон для сайта, и сразу его можно проверить на наличие исходящих ссылок. Для этого, можно воспользоваться текстовым редактором NotePad++.
Чтобы найти ссылку на сайте, открываем редактор. В верхнем меню нажимаем на кнопку поиск, и из выпавшего списка выбираем «Найти в файлах». Дальше уже дело техники. Вводим в поле «Найти» протокол, используемый гиперссылками — http. И в поле «Папка» выбираем местонахождение шаблона на компьютере. После чего, нажимаем на кнопку «Найти все». Затем, программа выведет результаты поиска в нижней части окна. Где просмотрев ссылки, мы можем вычислить те, которые явно не относятся к шаблону.
Но у данного варианта, в отличие от первого, есть один большой недостаток, если ссылка зашифрована, то найти по протоколу ее не удастся. Хотя можно поменять цель поиска. И вместо http попробовать найти нечто подобное: base64. Довольно часто закодированные ссылки содержат такой кусок кода. Но все же данный вариант менее надежный, в отличии от первого.
Также, стоит отметить, что закодированные ссылки могут повлиять на работу шаблона, после удаления кода. Поэтому, перед удалением, следует cделать резервную копию сайта или файлов.
Оба способа могут показаться не такими уж понятными для начинающих, так как найдя ссылку, мы не всегда можем сразу определить ее точное местонахождение в файлах шаблона, модуля или плагина. Однако, при хорошем понимании структуры шаблона и методов подключения дополнительных файлов, довольно просто найти исходящие ссылки с сайта.
А как ищите Вы исходящие ссылки на сайте? Хотелось бы узнать методы, которыми пользуетесь Вы.
А у меня на этом все. Удачи!
import urllib2
website = "WEBSITE"
openwebsite = urllib2.urlopen(website)
html = getwebsite.read()
print html
So far so good.
But I want only href links from the plain text HTML. How can I solve this problem?
dreftymac
31.2k26 gold badges119 silver badges181 bronze badges
asked Jun 19, 2010 at 12:58
Try with Beautifulsoup:
from BeautifulSoup import BeautifulSoup
import urllib2
import re
html_page = urllib2.urlopen("http://www.yourwebsite.com")
soup = BeautifulSoup(html_page)
for link in soup.findAll('a'):
print link.get('href')
In case you just want links starting with http://, you should use:
soup.findAll('a', attrs={'href': re.compile("^http://")})
In Python 3 with BS4 it should be:
from bs4 import BeautifulSoup
import urllib.request
html_page = urllib.request.urlopen("http://www.yourwebsite.com")
soup = BeautifulSoup(html_page, "html.parser")
for link in soup.findAll('a'):
print(link.get('href'))
answered Jun 19, 2010 at 13:04
systempuntooutsystempuntoout
71.5k47 gold badges168 silver badges241 bronze badges
4
You can use the HTMLParser module.
The code would probably look something like this:
from HTMLParser import HTMLParser
class MyHTMLParser(HTMLParser):
def handle_starttag(self, tag, attrs):
# Only parse the 'anchor' tag.
if tag == "a":
# Check the list of defined attributes.
for name, value in attrs:
# If href is defined, print it.
if name == "href":
print name, "=", value
parser = MyHTMLParser()
parser.feed(your_html_string)
Note: The HTMLParser module has been renamed to html.parser in Python 3.0. The 2to3 tool will automatically adapt imports when converting your sources to 3.0.
answered Jun 19, 2010 at 13:02
StephenStephen
47.7k7 gold badges61 silver badges69 bronze badges
4
Look at using the beautiful soup html parsing library.
http://www.crummy.com/software/BeautifulSoup/
You will do something like this:
import BeautifulSoup
soup = BeautifulSoup.BeautifulSoup(html)
for link in soup.findAll("a"):
print link.get("href")
answered Jun 19, 2010 at 13:07
Peter LyonsPeter Lyons
142k30 gold badges276 silver badges273 bronze badges
1
Using BS4 for this specific task seems overkill.
Try instead:
website = urllib2.urlopen('http://10.123.123.5/foo_images/Repo/')
html = website.read()
files = re.findall('href="(.*tgz|.*tar.gz)"', html)
print sorted(x for x in (files))
I found this nifty piece of code on http://www.pythonforbeginners.com/code/regular-expression-re-findall and works for me quite well.
I tested it only on my scenario of extracting a list of files from a web folder that exposes the filesfolder in it, e.g.:
and I got a sorted list of the filesfolders under the URL
answered Sep 20, 2017 at 11:09
RaamEERaamEE
2,8754 gold badges31 silver badges52 bronze badges
Using requests with BeautifulSoup and Python 3:
import requests
from bs4 import BeautifulSoup
page = requests.get('http://www.website.com')
bs = BeautifulSoup(page.content, features='lxml')
for link in bs.findAll('a'):
print(link.get('href'))
answered Nov 1, 2018 at 11:48
SpasSpas
84016 silver badges13 bronze badges
This is way late to answer but it will work for latest python users:
from bs4 import BeautifulSoup
import requests
html_page = requests.get('http://www.example.com').text
soup = BeautifulSoup(html_page, "lxml")
for link in soup.findAll('a'):
print(link.get('href'))
Don’t forget to install «requests» and «BeautifulSoup» package and also «lxml«. Use .text along with get otherwise it will throw an exception.
«lxml» is used to remove that warning of which parser to be used. You can also use «html.parser» whichever fits your case.
answered Jan 29, 2019 at 12:10
saksak
1,23017 silver badges36 bronze badges
My answer probably sucks compared to the real gurus out there, but using some simple math, string slicing, find and urllib, this little script will create a list containing link elements. I test google and my output seems right. Hope it helps!
import urllib
test = urllib.urlopen("http://www.google.com").read()
sane = 0
needlestack = []
while sane == 0:
curpos = test.find("href")
if curpos >= 0:
testlen = len(test)
test = test[curpos:testlen]
curpos = test.find('"')
testlen = len(test)
test = test[curpos+1:testlen]
curpos = test.find('"')
needle = test[0:curpos]
if needle.startswith("http" or "www"):
needlestack.append(needle)
else:
sane = 1
for item in needlestack:
print item
answered Feb 15, 2013 at 5:05
0xhughes0xhughes
2,6414 gold badges25 silver badges38 bronze badges
Here’s a lazy version of @stephen’s answer
import html.parser
import itertools
import urllib.request
class LinkParser(html.parser.HTMLParser):
def reset(self):
super().reset()
self.links = iter([])
def handle_starttag(self, tag, attrs):
if tag == 'a':
for (name, value) in attrs:
if name == 'href':
self.links = itertools.chain(self.links, [value])
def gen_links(stream, parser):
encoding = stream.headers.get_content_charset() or 'UTF-8'
for line in stream:
parser.feed(line.decode(encoding))
yield from parser.links
Use it like so:
>>> parser = LinkParser()
>>> stream = urllib.request.urlopen('http://stackoverflow.com/questions/3075550')
>>> links = gen_links(stream, parser)
>>> next(links)
'//stackoverflow.com'
bignose
29.8k14 gold badges77 silver badges110 bronze badges
answered Jan 15, 2017 at 17:13
reubanoreubano
5,0091 gold badge40 silver badges41 bronze badges
This answer is similar to others with requests and BeautifulSoup, but using list comprehension.
Because find_all() is the most popular method in the Beautiful Soup search API, you can use soup("a") as a shortcut of soup.findAll("a") and using list comprehension:
import requests
from bs4 import BeautifulSoup
URL = "http://www.yourwebsite.com"
page = requests.get(URL)
soup = BeautifulSoup(page.content, features='lxml')
# Find links
all_links = [link.get("href") for link in soup("a")]
# Only external links
ext_links = [link.get("href") for link in soup("a") if "http" in link.get("href")]
https://www.crummy.com/software/BeautifulSoup/bs4/doc/#calling-a-tag-is-like-calling-find-all
answered Aug 14, 2019 at 12:13
Simplest way for me:
from urlextract import URLExtract
from requests import get
url = "sample.com/samplepage/"
req = requests.get(url)
text = req.text
# or if you already have the html source:
# text = "This is html for ex <a href='http://google.com/'>Google</a> <a href='http://yahoo.com/'>Yahoo</a>"
text = text.replace(' ', '').replace('=','')
extractor = URLExtract()
print(extractor.find_urls(text))
output:
['http://google.com/', 'http://yahoo.com/']
answered May 5, 2020 at 12:26
От автора: не люблю каждый раз натыкаться на одни и те же грабли! Вот сегодня опять та тема, в которой никак не обойтись без регулярных выражений. Это и есть мои любимые «грабли». Но все равно я не сдамся, и чтобы с помощью PHP находить ссылки, я обойдусь без них!
Никуда без них не деться!
Нет уж, господа консерваторы! Я постараюсь уж как-нибудь реализовать парсинг документов без этого застарелого средства. Ну не хватает у меня терпения на составление шаблонов с помощью регулярных выражений. А когда терпение лопается, то рождаются другие более «ругательные» выражения :). Так что «грабли» в сторону – мы идем по собственному галсу!
Чтобы не опростоволоситься, нам потребуется сторонняя библиотека — Simple HTML DOM. Скачать ее можно по этой ссылке. Не беспокойтесь, версия хоть и старая, но работает. А главное, что это средство посвежее будет, чем выражения регулярные :).
После распаковки помещаем файл simple_html_dom.php в папку со скриптом, чтоб легче было подключать. Все остальные файлы в принципе нас не интересуют, но пригодятся вам в будущем. Там есть и мануал, и примеры использования библиотеки.
Профессия PHP-разработчик с нуля до PRO
Готовим PHP-разработчиков с нуля
Вы с нуля научитесь программировать сайты и веб-приложения на PHP, освоите фреймворк
Laravel, напишете облачное хранилище и поработаете над интернет-магазином в команде.
Сможете устроиться на позицию Junior-разработчика.
Узнать подробнее
Командная стажировка под руководством тимлида
90 000 рублей средняя зарплата PHP-разработчика
3 проекта в портфолио для старта карьеры
Реализуем!
Напомню, что сегодня мы научимся, как найти ссылки PHP без «ужасных» регулярных выражений. Теперь нам осталось подключить скрипт библиотеки у себя в коде и просканировать указанную веб-страницу на наличие гиперссылок.
|
<?php include ‘simple_html_dom.php’; $razmetka = file_get_html(‘//test2.ru/’); foreach($razmetka—>find(‘a’) as $teg) echo $teg—>href . «<br>»; ?> |
Для доказательства действенности этого метода приведу код разметки «отпарсеной» страницы.
Сразу оговорюсь, что я не сканировал ничей сайт. Для демонстрации примера я использовал Денвер, а в нем стоит программная заглушка, которая не позволяет парсить удаленные хосты.
Еще пример!
Вот еще один вариант реализации, в котором нам также удастся обойтись без «граблей».
|
<?php $razmetka_html = file_get_contents(‘sample.html’); $dom = new DOMDocument; $dom—>loadHTML($razmetka_html); $tegi = $dom—>getElementsByTagName(«a»); foreach ($tegi as $teg) { echo $teg—>nodeValue.» «; echo $teg—>getAttribute(‘href’).«<br>»; echo «<br>»; } ?> |
Разметка страницы, в которой с помощью PHP находили ссылки в тексте.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<html> <head> <title>Sample</title> </head> <body> <div class=«menu»> <h2>Menu</h2> <ul> <li><a href=«1.php»>Linc 1</a></li> <li><a href=«2.php»>Linc 2</a></li> <li><a href=«3.php»>Linc 3</a></li> <li><a href=«4.php»>Linc 4</a></li> <li><a href=«5.php»>Linc 5</a></li> </ul> </div> <div class=«cont»> <p>PHP is a server scripting language</p> </div> </body> </html> |
Профессия PHP-разработчик с нуля до PRO
Готовим PHP-разработчиков с нуля
Вы с нуля научитесь программировать сайты и веб-приложения на PHP, освоите фреймворк
Laravel, напишете облачное хранилище и поработаете над интернет-магазином в команде.
Сможете устроиться на позицию Junior-разработчика.
Узнать подробнее
Командная стажировка под руководством тимлида
90 000 рублей средняя зарплата PHP-разработчика
3 проекта в портфолио для старта карьеры
Мне очередной раз удалось избавиться от своих «граблей» :). А вам?
Здравствуйте, уважаемые друзья. Тема сегодняшней статьи: Внешние ссылки. Мы разберёмся, что такое внешние ссылки, и какие подводные камни подстерегают начинающих сайтостроителей и не только. Сегодня в Интернете каждый день регистрируются и создаются десятки тысяч сайтов и блогов. И это только в русскоязычном сегменте. Создать свой сайт сегодня не составит труда ни школьнику, ни пенсионеру. И это благодаря тому, что появилось много систем управления контентом (CMS), различного рода конструкторов, бесплатных шаблонов и множества обучающих материалов.
Но из такого множества, 90 % так и не увидят своих целевых посетителей и клиентов. И причин для этого много, ведь в продвижении сайтов не бывает мелочей. Именно мелочи и играют ключевую роль в продвижении.
А сейчас я расскажу, где может быть такая мелочь, о которой даже и не подозревают новички. А если и знают, то либо не могут сами решить эту задачу, либо не придают ей должного значения.
Так вот, как известно каждая страница сайта имеет свой статический вес, а внешние и внутренние ссылки передают часть этого статического веса страницам, на которые они ведут. Тем самым уменьшая вес Вашей страницы. И в результате, это печально сказывается при поисковом ранжировании.
Но бояться нет причин, эту ситуацию всегда можно подправить и со временем ваш сайт наберёт вес в глазах поисковых систем.
Содержание
- Как найти внешние ссылки
- Поиск внешних ссылок в исходном коде
- Как закрыть внешние ссылки
- Как удалить скрытые внешние ссылки в шаблоне WordPress
Как найти внешние ссылки
Здесь нужно понимать, что абсолютно все внешние ссылки закрывать не обязательно. Главное закрыть ссылки с главной страницы вашего сайта. А также нужно понимать, что ссылки можно закрыть, а можно удалить. То есть следует понимать, какие ссылки следует оставить, а какие лучше убрать.
Для начала разберёмся, где наиболее часто встречаются внешние ссылки. В качестве примера будем рассматривать главную страницу (так как принцип построения шаблона у всех одинаков).
Как правило, внешние ссылки присутствуют в подвале сайта (footer), это могут быть различные счётчики, ссылки на разработчиков и так далее. А на бесплатных шаблонах WordPress, как правило, в подвале скрыты кодированные внешние ссылки. Но об этом чуть позже.
Также внешние ссылки присутствуют во всех баннерах, блоке «новые комментарии», а также в анонсах статей, расположенных на главной странице.
А ссылки в комментариях и СПАМ вообще могут нанести существенный вред вашему сайту.
Для облегчения визуального обнаружения внешних ссылок советую установить расширение для браузера RDS bar, с помощью которого вы влёт будете видеть, что за ссылка. Это лишь одно из множества достоинств этого расширения.
Так выглядят закрытые и открытые внешние ссылки, если смотреть через RDSbar.
Закрытые ссылки, обведены чёрным пунктиром, или зачёркнуты, открытые обведены красным пунктиром.
Но ссылки бывают и скрытые, поэтому для того чтобы узнать точное количество внешних ссылок с главной страницы сайта нужно воспользоваться специальными онлайн-сервисами: pr-cy.ru или dinews.ru.
Как видно на скриншотах, с главной страницы моего блога открыта всего одна ссылка. И то это сделано намеренно, это необходимо для подтверждения авторства в Гугл. А всего внешних ссылок 11, и это те ссылки, которые мне нужны (ссылки на мои странички в социальных сетях, счётчики).
Теперь, когда известны способы поиска внешних ссылок и где их найти, можно переходить к следующему шагу.
Поиск внешних ссылок в исходном коде
После того, как вы нашли сами ссылки и знаете абсолютный URL, нужно найти эту ссылку в исходном коде Вашего шаблона. Это хорошо, когда Вы видите, где эта ссылка, ну вроде подвала или сайтбара. А если ссылку не видно, поможет поиск в исходном коде.
Для вызова исходного кода нажимаем комбинацию клавиш CTRL+U
Далее вызываем поисковую форму CTRL+F
Вводим адрес внешней ссылки и нажимаем клавишу Enter
Когда внешняя ссылка найдена в исходном коде, присмотритесь и определите в каком блоке шаблона она размещена. На указанном выше скриншоте, если посмотреть внимательно, видно, что ссылка находится в блоке (footer). То есть это счётчик Яндекс.Метрики в подвале моего блога.
Вот таким вот образом и осуществляется поиск в исходном коде.
Как закрыть внешние ссылки
Прежде всего, будем закрывать внешние ссылки, которые по определению нужны для вас. То есть те ссылки, без которых обойтись нельзя, но можно закрыть от поисковых роботов. И хотя алгоритмы работы поисковых систем постоянно меняются, и поисковые системы сегодня учитывают и закрытые ссылки, тем не менее, частичку статического веса Вы сумеете сохранить.
Итак, для закрытия ссылок используются:
тег <noindex> — закрывает текст от индексации
атрибут тега ссылки rel="nofollow" – сообщение роботу не переходить по ссылке
Теперь можно добавить эти коды к внешним ссылкам. По описанному выше примеру ищем расположение внешней ссылке в исходном коде шаблона.
А затем переходим в панель администратора WordPress в раздел «Внешний вид» — «Редактор» в файл, отвечающий за соответствующий блок в шаблоне.
Для поиска ссылки, можно использовать всё тот же поиск CTRL+F. Найдя ссылку добавляем атрибут rel="nofollow"
Пример закрытия внешней ссылки:
<a href="ВНЕШНЯЯ ССЫЛКА" rel="nofollow">анкор ссылки или картинка</a>
Как удалить скрытые внешние ссылки в шаблоне WordPress
Зачастую при создании сайта или блога на системах управления контентом, в том числе и WordPress. Используются бесплатные шаблоны (темы оформления). Но вот в этих самых бесплатных шаблонах есть те самые скрытые внешние ссылки. Не во всех, но во многих.
Удаление или сокрытие таких ссылок, приводит к нарушению работы сайта. А за частую и полному параличу сайта. Ну что ж это за работа, когда шаблон не загружается и браузер отображает только квадрат Малевича.
Поэтому с такими ссылками нужно быть крайне осторожным. И если у Вас нет опыта работы с исходным кодом, то лучше поискать другую тему. Без внешних ссылок. Или же доверить это дело фрилансерам.
Ну а если Вы всё же решили попробовать, тогда обязательно сделайте резервную копию и можно приступать.
В качестве примера будем рассматривать удаление скрытых внешних ссылок из шаблона на тестовом домене. Это лишь один отдельный случай, с другими шаблонами будет проще, а с какими то сложнее. Пример лишь показывает один из принципов защиты скрытых внешних ссылок и как эту защиту обойти.
1. Проверяем шаблон на наличие внешних ссылок по выше описанным примерам.
Как видите, всего 15 внешних ссылок. Часть из которых ведёт на страницы в социальных сетях, а часть на хостинг, темы и предложения создать сайт бесплатно.
2. Большая часть этих ссылок находится в подвале. Следовательно, переходим в панель администратора WordPress в раздел «Внешний вид» — «Редактор» и открываем файл footer.php.
На скриншоте показан код, отвечающий за вывод скрытых внешних ссылок.
<?php // This theme is released free for use under creative commons licence. http://creativecommons.org/licenses/by/3.0/ // All links in the footer should remain intact. // Warning! Your site may stop working if these links are edited or deleted ?> <div id="info"><?php __wordpress_pf(); ?></div>
Где в комментариях предупреждают о последствиях. То есть если сейчас удалить или подправить код, — сайт перестанет работать.
Также в файле index.php присутствует блок с дублирующими ссылками, которые смещены на 1970 пикселей. Это чтобы видно не было.
Нарушив условие в этом файле, сайт также перестанет работать.
3. А учитывая тот факт, что WordPress работает на языке РНР, значит есть управляющие файлы, в которых прописаны все условия. И если условие перестанет выполняться, последует ошибка и сайт перестанет работать.
Так вот, файл, отвечающий за функционал, называется functions.php. В этом файле, главное знать, что искать.
А искать нужно фрагмент из вышеприведённого кода «wordpress_pf», который расположен в файле footer.php.
Где нужно удалить переменную и условие с этой переменной. После чего можно удалять указанные фрагменты кода в файлах footer.php и index.php.
Так вы удаляете скрытые внешние ссылки, и сайт продолжает работать без проблем.
Ну, вот друзья, на этом тему считаю раскрытой. Если будут вопросы, пишите в комментариях, буду рад пообщаться. Заходите в гости, будет много интересного. Желаю Вам удачи!
P.S. и обязательно смотрите видеоурок в котором я подробно показываю и рассказываю как закрыть и удалить внешние ссылки.
С уважением, Максим Зайцев.
Как создать правильную ссылку на сайте с использованием атрибутов, подробным описанием их типов и с примерами. Так же пошаговое объяснение как отредактировать ссылку в редакторе WordPress. Часто нужно сделать ссылку на другую страницу сайта своего или чужого. И встает вопрос как сделать? Для начала немного разберемся что такое ссылка.
Типы ссылок
SEO-специалисты применяют разделение ссылок типы:
- Внутренние – ссылки на страницы или объекты внутри сайта. К этому типу относятся – меню, текстовые ссылки, якоря, кнопки, модальные окна и другие объекты. Данный тип ссылок необходим для юзабилите сайта и SEO при например – передачи веса страниц.
- Внешние – ссылки на страницы или объекты на сторонних сайтах. Они нужна для: продвижения ваших соц. сетей, работы с партнерами, для упрощения загрузки страниц, для указания поисковикам доп. параметров и так далее.
Программисты применяют другое разделение на типы ссылок:
- абсолютные – это полное расположение страницы в интернете. Например: https://help2site.ru/services/dorabotka-i-redaktirovanie-sajta/
- относительные – относительный путь от данной страницы к нужной странице. Например: /services/dorabotka-i-redaktirovanie-sajta/
| Типы ссылок | абсолютные | относительные |
|---|---|---|
| внешние | https://help2site.ru
ссылка на другой сайт |
такой тип ссылки невозможен |
| внутренние | https://help2site.ru/services/
внутренняя ссылка на этот же сайт, но она приведена как абсолютная |
/services/
внутренняя относительная ссылка на страницу этого сайта. Суда так же относятся все якоря. |
Отдельно стоит отметить что не все ссылки “видны пользователям” ссылки могут находиться и в скрытых областях страниц. Наиболее частый пример скрытых полезных ссылок это применения микроразметки данных https://schema.org/ очень важной при продвижении сайтов.
Виды объектов для ссылок на сайтах:
- Текстовая ссылка. Пример: На данной странице есть много ссылок и полезной информации. Как видите слова “полезная информация” являются ссылкой. Данная ссылка может вести на другую страницу или на якорь на данной странице.
- Кнопка. Все мы их любим и знаем. Это тоже ссылка.
- Изображение. Наживая на картинку вы можете перейти на другую страницу или сайт или открыть увеличенное изображение на этой странице.
- Иконка. Иконки бываю разных типов. но все их можно сделать ссылками на страницы или якоря.
- Модальные окна – это когда вы кликаете кнопку и открывается окно над открытой страницей.
- tooltip – это когда вы подводите мышь к объекту и всплывает пояснительный текст. ПримерПример tooltip – подсказка к тексту.
- И любой объект на странице. Но это уже более профессиональная тема
Общий вид ссылки
Код ссылки состоит из:
- адреса куда должен перейти пользователь или робот (это если говорить о SEO)
- правил по котором должен осуществляться переход
- визуального стиля ссылки
Код чистой ссылки:
<a href="адрес_куда_должен_перейти_пользователь">текст_ссылки</a>
Где функция href отвечает за url перехода, а адрес_куда_должен_перейти_пользователь – это url в виде:
- https://help2site.ru/ – внешний url на страницу. Используется когда вам нужно сделать ссылку на другой сайт или вы не знаете как правильно прописать внутреннюю ссылку.
- /contact – внутренняя ссылка на страницу сайта
- #glava5 – внутренняя ссылка на якорь установленный на данной странице
- /contact#glava5 – внутренняя ссылка на якорь на другой странице вашего сайта
Атрибуты ссылок
name
Атрибут “name” задает имя идентификатора для определения имени места на странице куда должен переходить якорь
<a name="имя_якоря"></a>Где имя_якоря отвечает за идентификацию функции. Самый частый пример использования кнопка “Наверх”, для того чтобы она при нажатии отправила в то место где вы хотите, нужно добавить атрибут name или существующему объекту или создать пустую ссылку с данным именем. Пример кода для текстовой ссылки:
<p><a name="top"></a></p>
<p>Тексты на странице, чем больше тем лучше как говорят SEO-специалисты</p>
<p><a href="#top">Наверх</a></p>target
Атрибут “target” задает параметры для загрузки ссылки в этом же окне, в новом окне или фрейме или нет.
Значения атрибута: |
описание атрибута |
|---|---|
| _blank | открываем новую вкладку в браузере для ссылки |
| _self | загружаем ссылку в существующем окне. По умолчанию для всех ссылок. |
| _parent | загружаем ссылку во фрейм |
| _top | отменяем загрузку во фрейм. Применяется в основном при отключении наследования параметров родителя. |
<a href="https://help2site.ru/casestudies/" target="_blank"></a>Открывать ссылку в новом окне так же можно через атрибут – noopener.
Пример – наши работы
title
Атрибут “title” задает пояснение к ссылке. Отображается в виде всплывающего окна при наведении на ссылку. Любимый атрибут SEO-специалистов который позволяет при правильном его использовании значительно поднять сайт в выдаче.
<a href="#top" title="Легкое касание мышки вас перенесет к шапке странице">Наверх</a>Пример – Наверх
rel
Атрибут “rel” определяет отношения текущий страницы к странице на которую будет осуществляться переход и описывает ее. Данный атрибут определяется только для поисковых роботов и задает им правила перехода и индексирования открывающейся страницы. Параметр нужен для SEO-оптимизации и продвижения сайтов.
<a href="url" rel="nofollow noreferrer">текст</a>Один атрибут может содержать несколько значений размещенных через пробел.
Значение атрибута: |
Описание атрибута |
|---|---|
| archives | url архива сайта. Важный параметр для поисковых роботов говорящий им что по этой ссылке находится архив сайта. |
| author | Ссылка на страницу об авторе на том же домене. Параметр описывающий ссылку как “та страница о компании”. Нужен в SEO, если вы назвали страницу “О компании” как “Мы крутые ребята и там типо о нас есть материал”. По названию робот никогда не поймет что это страница описывающая вашу компанию. |
| bookmark | Постоянный url на раздел или запись. |
| first | Ссылка на первую страницу. |
| help | Ссылка на документ со справкой. Указанию роботу, что у вас есть страница с помощью пользователям сайта |
| index | Ссылка на содержание. |
| last | Ссылка на последнюю страницу. |
| license | Ссылка на страницу с лицензионным соглашением или авторскими правами. Робот будет знать про ваши лицензии. |
| me | Ссылка на страницу автора на другом домене. Похвастайтесь роботу публикациями о вас. |
| next |
Ссылка на следующую страницу или раздел. Важный параметр для блогов, говорящий что это не последний материал |
| nofollow |
Не передавать по ссылке ТИЦ и PR. Тайная любовь SEO-специалистов |
| sponsored |
Ссылки, размещенные в качестве рекламы или за плату. Google ввел с сентября 2019 года. |
| ugc |
Помечаются ссылки размещенные пользователями в комментариях. Google ввел с сентября 2019 года. |
| noreferrer |
Не передавать по ссылке HTTP-заголовки. И еще раз про SEO-продвижение |
| noopener |
Открытие ссылки в новом окне, без возможности обращения к объекту window исходной страницы. Это ваша безопасность. |
| prefetch |
Указывает, что надо заранее кэшировать указанный ресурс. |
| prev |
url предыдущей страницы или раздела. Скажите роботу что у вас в блоге есть еще материалы. |
| search |
url страницы поиска. Расскажите ему что вы используете поиск по сайту. |
| sidebar |
Добавить ссылку в избранное браузера. Можно пользователю предложить добавить ваш сайт в избранное и сказать это роботу. |
| tag |
Указывает, что метка (тег) имеет отношение к текущему документу. Расскажите поисковику про метки на сайте. |
| up |
url родительской страницы. |
rev
Атрибут “rev” в отличие от “rel” описывает текущую страницу по отношению к остальным страницам сайта. Заранее заданных параметров нет поэтому описание делается текстом. Пример:
<a href="index.html" rel="Главная страница" rev="Дочерняя страница">Перейти на главную страницу</a>shape
Атрибут “shape” задает параметры активной области, действителен только на изображениях включенных в объект. Проблема – работает не со всем браузерами. Значения:
circle – Область в виде круга.
default – Область по умолчанию (прямоугольная).
poly – Полигональная область произвольной формы.
rect – Прямоугольная область.
<object type="image/jpeg" data="images/logo.jpg">
<map name="link">
<p><a href="url" shape="circle">логотип</a></p>
</map>
</object>tabindex
Атрибут “tabindex” определяет последовательность перехода по ссылкам при использовании клавиши клавиатуры “TAB”. Применяется при создании специализированных сайтов с ограничениями. Например – сайты для слепых.
<a tabindex="число">...</a>type
Атрибут “type” применяется для описания ссылки при вставке объектов MIME (Multipurpose Internet Mail Extension, Многоцелевые расширения почты Интернета). К ним относятся видео, аудио, pdf, архивы (zip, rar и другие), таблицы и многое другое. Полный перечень MIME-типов.
<a href="url" type="video/mp4">посмотреть видео</a>Как создать и отредактировать ссылку на сайте
Если читаете данный материал скорее всего у вас сайт на какой либо CMS (WopdPress, 1C:Битрикс, Drupal, Joomla!, MODx или любой другой). На всех системах стоят разные редакторы которые по разному позволяют создавать ссылки. Например: создать кнопку, добавить изображение или объект. Правятся ссылки в них через открытие (если позволяет CMS) html-кода и поиска там нужного элемента ссылки. Эта работа скорее для профессионалов и вы можете заказать ее у нас – доработка и поддержка сайта. Мы сейчас рассмотрим возможности простого текстового редактора в котором вы сможете самостоятельно все сделать.
Как создать ссылку в WordPress
Откройте нужную запись или страницу в редакторе. Выделите текст или изображение на который вы хотите поставить ссылку. Нажмите кнопку “Вставить/изменить ссылку“.
В открывшемся окне вставьте адрес ссылки (на фото “/blog”), вы увидите текст ссылки (если нужно можно отредактировать), заголовок (это атрибут title) и rel (по умолчанию “нет” и “nofollow”, подробнее про rel) и “Цель” (это атрибут target со значением “Нет” (значение по умолчанию – _self) или “Новое окно”(значение – _blank)).
Предупреждение: если вы в атрибуте rel в WordPresse выбираете “nofollow”, то CMS автоматически вам подставит
rel="nofollow noopener noreferrer"
Если вам нужно добавить какие либо другие атрибуты то вам нужно будет перейти или в панели Инструменты > Исходный код или во вкладку “Текст”. Найти нужный элемент и отредактировать его.
Предупреждение: не все ваше творчество в коде нравится WordPress, при возврате обратно в Визуально часть кода может исчезнуть. Из этой ситуации можно выйти – оставив так как получилось и вести блог или сайт дальше. Или обратиться к нам за доработками вашего сайта.
Если нужно сделать ссылку с изображения то нужно вставить картинку в текст. Выделить ее и дальше нажимаем на “Вставить/изменить ссылку” и дальше аналогично работе с текстом.
Рекомендации и советы по созданию ссылок
- используйте правильно атрибуты и их значения. Как говорилось выше правильные title творит чудеса SEO.
- используйте атрибут rel для контроля и перераспределения весов страниц на сайте. Это важно при SEO-продвижении.
- создавайте и работайте с якорями. Это поможет в юзабилити сайта и даст прирост по поведенческим факторам в поисковом ранжировании.
- не злоупотребляйте ссылками все должно быть сбалансировано на странице.
- контролируйте работоспособность ссылок. Удаляйте и исправляйте “битые” ссылки
Бонус – как сделать tooltip через ссылку
Делаем дополнительную всплывающую подсказку в тексте.
Добавляем или в css или прямо в редакторе стиль.
<style>
a.tooltip span {
display: none; /* чтобы не отображался до наведения мыши
padding: 5px; /* отступ в рамке подсказки
margin-left: 10px; /* отступ слева от текста
width: 100px; /* ширина tooltip
}
a.tooltip:hover span {
display: inline;
position: absolute;
background: #ffffff; /* цвет фона
border: 1px solid #cccccc; /* толщина и цвет рамки
color: #555555; /* цвет шрифта
text-align: center; /* выравнивание по центру текста в подсказке
}
</style>Добавляем код к тексту
ваш текст до <a class="tooltip" href="#">подсказки<span>текст подсказки</span></a>И получаем: ваш текст до подсказки текст подсказки
Удачи вам! и если что звоните-пишите.
- Об авторе
- Недавние публикации
