Статья размещена автором Бетке Сергей Сергеевич

Готовим наши “картинки” для поисковиков

Речь пойдёт о некоей дополнительной оптимизации сайта для поисковиков – о правильном формировании атрибутов тега <img>. Для этих целей существует плагин к wordpress — SEO Friendly Images, но он “не работает”, когда мы формируем статьи с использованием WLW (Windows Live Writer). Разберёмся и исправим.

Для начала – особенности WLW. При вставке изображения он в обязательном порядке формирует атрибуты тега <img>:

<a href="http://sergey-s-betke.blogs.novgaro.ru/ustanovka-d-link-d-viewcam">
 <img
  src="/wp-content/uploads/2010/11/image_thumb19.png"
  style="border-width: 0px; margin: 4px 0px 4px 5px; display: inline;"
  align="right"
  width="160"
  height="120"
  title="image"
  alt="Установка D Link D ViewCam"
 />
</a>

Как видно, WLW заполняет атрибуты. Но при этом “по умолчанию” атрибут title он заполняет текстом image. Лучше бы уж совсем его не заполнял…

Готовим наши “картинки” для поисковиковДобью всё-таки… Для начала скорректируем настройки WLW. Вставили картинку. Выделяем её. На панели задач открываем страницу “Дополнительно”, и в поле “Замещающий текст” либо пишем то, что будет в атрибуте alt, либо убираем текст вовсе. Не забываем на странице “Изображение” панели задач “Сохранить настройки для изображения по умолчанию”.

При этом атрибуты alt и title будут, но будут пустыми.

Готовим наши “картинки” для поисковиков Теперь настраиваем плагин SEO Friendly Images. Выбираем обе опции – “Override default WordPress image alt tag (recommended)”, “Override default WordPress image title”. При этом в полях выше указываем правила формирования данных атрибутов.

Всё замечательно и всё работает. Но! В некоторых случаях мы хотим явно сами задать и alt, и title (кстати – WLW генерирует их с одним и тем же содержанием). Предлагаю воспользоваться следующим правилом в данном случае: если title = “image” или “”, тогда меняем значения обоих атрибутов на значения, сгенерированные правилами, если нет – не меняем.

Для этих целей нам, естественно, придётся править код плагина SEO Friendly Images. Сделаем это! Править будем файл seo-friendly-images.php.

add_filter('the_content', 'seo_friendly_images', 100);

function seo_friendly_images($content) {
	return preg_replace_callback('/<img[^>]+/', 'seo_friendly_images_process', $content);
}

function seo_friendly_images_process($matches) {
	
		global $post;
		
	
		$title = $post->post_title;

		$alttext_rep = get_option('seo_friendly_images_alt');
		$titletext_rep = get_option('seo_friendly_images_title');
		$override= get_option('seo_friendly_images_override');
		$override_title= get_option('seo_friendly_images_override_title');
			
		# take care of unsusal endings
		$matches[0]=preg_replace('|([\'"])[/ ]*$|', '\1 /', $matches[0]);					
		
		
		### Normalize spacing around attributes.
		$matches[0] = preg_replace('/\s*=\s*/', '=', substr($matches[0],0,strlen($matches[0])-2));
		### Get source.
		
		preg_match('/src\s*=\s*([\'"])?((?(1).+?|[^\s>]+))(?(1)\1)/', $matches[0], $source);
	
		
		$saved=$source[2];
		
		### Swap with file's base name.
		preg_match('%[^/]+(?=\.[a-z]{3}\z)%', $source[2], $source);
		### Separate URL by attributes.
		$pieces = preg_split('/(\w+=)/', $matches[0], -1, PREG_SPLIT_DELIM_CAPTURE | PREG_SPLIT_NO_EMPTY);
		### Add missing pieces.
		
		$cats=get_the_category();    

		$posttags = get_the_tags();
				
		$tags="";
		if ($posttags) {
			foreach($posttags as $tag) {
				$tags = $tag->name . ' ' . $tags; 
			}
		}

		
		
		if (!in_array('title=', $pieces) || $override_title=="on") {
			$titletext_rep=str_replace("%title", $post->post_title, $titletext_rep);
			$titletext_rep=str_replace("%name", $source[0], $titletext_rep);
			$titletext_rep=str_replace("%category", $cats[0]->slug, $titletext_rep);
			$titletext_rep=str_replace("%tags", $tags, $titletext_rep);
			
		
			$titletext_rep=str_replace('"', '', $titletext_rep);
			$titletext_rep=str_replace("'", "", $titletext_rep);
			
			$titletext_rep=str_replace("_", " ", $titletext_rep);
			$titletext_rep=str_replace("-", " ", $titletext_rep);
			//$titletext_rep=ucwords(strtolower($titletext_rep));
			if (!in_array('title=', $pieces)) {
			  array_push($pieces, ' title="' . $titletext_rep . '"');			  
			}
			else
			{
			  $key=array_search('title=',$pieces);
			  $pieces[$key+1]='"'.$titletext_rep.'" ';
			}
		}
		

		if (!in_array('alt=', $pieces) || $override=="on" ) {
			$alttext_rep=str_replace("%title", $post->post_title, $alttext_rep);
			$alttext_rep=str_replace("%name", $source[0], $alttext_rep);
			$alttext_rep=str_replace("%category", $cats[0]->slug, $alttext_rep);
			$alttext_rep=str_replace("%tags", $tags, $alttext_rep);
			$alttext_rep=str_replace("\"", "", $alttext_rep);
			$alttext_rep=str_replace("'", "", $alttext_rep);
			
			$alttext_rep=(str_replace("-", " ", $alttext_rep));
			$alttext_rep=(str_replace("_", " ", $alttext_rep));
			

			if (!in_array('alt=', $pieces)) {
			  array_push($pieces, ' alt="' . $alttext_rep . '"');		  
			}
			else
			{
			  $key=array_search('alt=',$pieces);
			  $pieces[$key+1]='"'.$alttext_rep.'" ';
			}
		}
		
	
		return implode('', $pieces).' /';
	}

Выше – исходный код на PHP интересных нам функций. Функции приведены в обратном порядке для облегчения чтения. Итак, сначала мы видим регистрацию фильтра содержания статей. Далее, тот самый обработчик, что мы зарегистрировали, используя регулярные выражения, заменяет найденные теги img со всеми атрибутами на построенный с помощью функции seo_friendly_images_process, которая уже и выполняет всю работу по обработке конкретного изображения. Её нам и предстоит поправить.

Правим функцию следующим образом:

function seo_friendly_images_process($matches) {
	
		global $post;
		
	
		$title = $post->post_title;

		$alttext_rep = get_option('seo_friendly_images_alt');
		$titletext_rep = get_option('seo_friendly_images_title');
		$override= get_option('seo_friendly_images_override');
		$override_title= get_option('seo_friendly_images_override_title');
			
		# take care of unsusal endings
		$matches[0]=preg_replace('|([\'"])[/ ]*$|', '\1 /', $matches[0]);					
		
		
		### Normalize spacing around attributes.
		$matches[0] = preg_replace('/\s*=\s*/', '=', substr($matches[0],0,strlen($matches[0])-2));
		### Get source.
		
		preg_match('/src\s*=\s*([\'"])?((?(1).+?|[^\s>]+))(?(1)\1)/', $matches[0], $source);
	
		
		$saved=$source[2];
		
		### Swap with file's base name.
		preg_match('%[^/]+(?=\.[a-z]{3}\z)%', $source[2], $source);
		### Separate URL by attributes.
		$pieces = preg_split('/(\w+=)/', $matches[0], -1, PREG_SPLIT_DELIM_CAPTURE | PREG_SPLIT_NO_EMPTY);
		### Add missing pieces.
		
		$cats=get_the_category();    

		$posttags = get_the_tags();
				
		$tags="";
		if ($posttags) {
			foreach($posttags as $tag) {
				$tags = $tag->name . ' ' . $tags; 
			}
		}

		$key=array_search('title=',$pieces);
		if (!in_array('title=', $pieces) || $pieces[$key+1]=='"" ' || $pieces[$key+1]=='"image" ' || $override_title=="on") {
			$titletext_rep=str_replace("%title", $post->post_title, $titletext_rep);
			$titletext_rep=str_replace("%name", $source[0], $titletext_rep);
			$titletext_rep=str_replace("%category", $cats[0]->slug, $titletext_rep);
			$titletext_rep=str_replace("%tags", $tags, $titletext_rep);
			
		
			$titletext_rep=str_replace('"', '', $titletext_rep);
			$titletext_rep=str_replace("'", "", $titletext_rep);
			
			$titletext_rep=str_replace("_", " ", $titletext_rep);
			//$titletext_rep=str_replace("-", " ", $titletext_rep);
			//$titletext_rep=ucwords(strtolower($titletext_rep));
			if (!in_array('title=', $pieces)) {
			  array_push($pieces, ' title="' . $titletext_rep . '"');			  
			}
			else
			{
			  $key=array_search('title=',$pieces);
			  $pieces[$key+1]='"'.$titletext_rep.'" ';
			}
		}
		
		$key=array_search('alt=',$pieces);
		if (!in_array('alt=', $pieces) || $pieces[$key+1]=='"" ' || $pieces[$key+1]=='"image" ' || $override=="on" ) {
			$alttext_rep=str_replace("%title", $post->post_title, $alttext_rep);
			$alttext_rep=str_replace("%name", $source[0], $alttext_rep);
			$alttext_rep=str_replace("%category", $cats[0]->slug, $alttext_rep);
			$alttext_rep=str_replace("%tags", $tags, $alttext_rep);
			$alttext_rep=str_replace("\"", "", $alttext_rep);
			$alttext_rep=str_replace("'", "", $alttext_rep);
			
			//$alttext_rep=(str_replace("-", " ", $alttext_rep));
			$alttext_rep=(str_replace("_", " ", $alttext_rep));
			

			if (!in_array('alt=', $pieces)) {
			  array_push($pieces, ' alt="' . $alttext_rep . '"');		  
			}
			else
			{
			  $key=array_search('alt=',$pieces);
			  $pieces[$key+1]='"'.$alttext_rep.'" ';
			}
		}
		
	
		return implode('', $pieces).' /';
	}

После чего отключаем опции “Override default WordPress image alt tag (recommended)”, “Override default WordPress image title” и наслаждаемся результатом работы.

Всё работает! Например в статье Камера D-Link DCS-2121 изображение самой камеры (первая картинка) именно явно заданный атрибут title руками, и он – сохранился. Остальные картинки имеют title=”image” (WLW так генерировал), и для них указанный атрибут заменён!

Опубликовать комментарий

XHTML: Вы можете использовать следующие HTML теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Tags Связь с комментариями статьи:
RSS комментарии
Обратная ссылка