Помимо этого блога у меня еще есть пара проектов, среди которых есть сайт-каталог с флеш играми – flashpl.ru. И вот, однажды, наткнувшись на один заморский сайт по проверке сайтов на валидность для seo, я решил вбить его туда.
Первое на что я обратил внимание – отсутствие у некоторых изображений атрибута alt.
Для начала – что это вообще за атрибут?
Атрибут alt – альтернативное описание изображения. Например если изображения в браузере отключены, или они просто не погрузились, то это описание будет вместо картинки. И, как везде пишут, что “в наш век поисковики не научились распознавать картинки…” – чушь. Гиганты уже давно умеют распознавать изображения, но изображение дополненное текстом лишним не будет. Поэтому я решил добавить везде этот, в принципе, необязательный атрибут.
Сделав поиск по проекту по маске <img я нашел порядка 200 вхождений, среди которых были как и с alt, так и без него.
Так как я человек ленивый, и мне не охота выбирать из всех 200 вариантов нужные мне, я решил это сделать с помощью своего любимого инструмента – регулярных выражений.
Я не буду писать по шагам как я его писал, я всего лишь расскажу как оно работает.
Собственно, вот оно
<img(s+(?!alt)([^=>]*?)=((('|")([^=>]*?)5)|([^s>"']*)))+s*/?>
Если нужно найти изображения без какого либо другого тэга, то, думаю, вполне понятно что и где заменять.
А теперь как оно работает.
Как видите – оно делится на несколько частей
- <img – собственно то, с чего начинается любое изображение.
- (s+(?!alt)([^=>]*?)=(((‘|”)([^=>]*?)5)|([^s>”‘]*)))+ – об этом ниже подробнее (плюсик в конце указывает что таких скобок может быть 1 или больше)
- s*/?> – Конечная конструкция – сколько угодно пробелов, а после либо > либо />
Если первая и 3 части не вызывают непонимания, то о 2 такого сказать нельзя.
Для начала разложим ее еще на несколько частей
- (?!alt)([^=>]*?)
- (((‘|”)([^=>]*?)5)|([^s>”‘]*))
И получим – (s+ #1 = #2)+
Как видите – все просто. Вначале 1 или более пробелов, после атрибут, а после его значение.
Разберемся вначале со значением – там 2 условия, разделенные ИЛИ (|)
- ((‘|”)([^=>]*?)5) – тут мы ищем одинарную кавычку или двойную, потом жадный поиск (все кроме равно и закрывающей скобки. О том, почему все кроме равно, ниже), а после совпадение №5 (одинарная или двойная кавычка)
- ([^s>”‘]*) – а тут мы ищем все что угодно кроме кавычек, закрывающего знака, и пробелов.
Тут нужно немного пояснить. Записи могут быть двух видов. С кавычками (внутри все кроме открывающей кавычки – вариант 1), и без (внутри все кроме пробелов – вариант 2)
Отлично – значение атрибута мы вычленили, теперь займемся его названием – (?!alt)([^=>]*?)
Первая скобка – негативный просмотр вперед. То есть под условие попадают все атрибуты, которые не alt.
После идет жадный поиск, который включает в себя все кроме равно и закрывающей скобки. Почему именно так, а не просто жадный поиск? Потому что если атрибут alt будет стоять не первым, например
<img src="img.png" alt="Изображение" />
То под эту маску – (?!alt)(.*?) попадает “img.png” alt=”Изображение”. Если использовать все кроме равно, то все будет хорошо.
А если перед этой строкой идет еще одна строка с изображением без атрибута alt, то под нее попадет
<img src="123" title="123" /> <img alt="123" id="123" />
Что не слишком хорошо.
Потестировать и поиграться с выражением вы можете здесь
Да, я убил на эту регулярку 2 часа, и да, я знаю, что быстрее 200 изображений прошерстить руками, но не могу я ничего с собой поделать, когда есть задача, которую можно решить с помощью регулярных выражений.
И теперь на моем портале у каждой картинки есть атрибут alt, и надеюсь это положительно повлияет на его продвижение.