Архив рубрики: SEO

SEO

Скрытие ссылок и блоков с помощью JS/Ajax

03.02.2014 Profer Оставить комментарий

Порой необходимо скрыть ссылки или блоки (например вывод последних новостей, меню с кучей полезных ссылок и т.п.), чтобы в браузере пользователя были видны все блоки, а поисковик видел чистый код без примесей лишней информации. В данном случае есть несколько способов, расскажу про те, которые я тестировал и использовал на разных сайтах на WordPress.

Скрытие блоков

Самый первый и простой способ, который мной был тестирован несколько лет назад - это просто оборачивание блока в JS-вывод. Например:

document.write('<div class="info">Какая-то информация</div>');

1	document.write('<div class="info">Какая-то информация</div>');

Такой способ прост, но в данном случае информация остаётся на странице, хоть и завёрнутая в блок script. Раньше поисковики не учитывали подобные js-блоки, но теперь они вполне способны это переварить, что нас может весьма не устраивать 🙂

Другой способ посложнее - выводить блок с помощью AJAX-вставки. В данном случае нам нужно будет вызывать сторонний скрипт, получать от него информацию и выводить уже на стороне пользователя.

Основная часть - это вывод самого блока. Рекомендую сделать один скрипт, который будет делать вывод блока, в зависимости от того, какой мы его попросим. Например через $_POST-запрос отправлять переменную с названием блока.

В самом выводе есть два варианта. Первый - когда блок у вас статичен и не меняется. Тут всё просто, забиваем его в в скрипт вывода. Выглядеть будет примерно так:

if(isset($_POST['act'])){
    if($_POST['act']=='block_info'){ ?>
        <div>Какая-то информация</div>
<?php } 
}

if(isset($_POST['act'])){

if($_POST['act']=='block_info'){ ?>

<div>Какая-то информация</div>

<?php }

}

В другом случае - блок динамический (например те же последние новости/записи). В этом случае нам нужно будет подсоединить к нашему скрипту ещё и сам движок WP. Делается это просто, необходимо подсоединить файл wp-config.php, а он за собой уже подтянет весь движок. Блок для вывода последних постов будет так:

if(isset($_POST['act'])){
	if($_POST['act']=='block_info'){ ?> 
		include('../wp-config.php'); 
		<div class="title">Последние статьи</div> 
		<?php $the_query = new WP_Query( array( 'post_type' => 'post', 'posts_per_page' => 5, 'order' => 'DESC' ) );
		while ($the_query->have_posts()) : $the_query->the_post(); ?>
			<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> 
		<?php endwhile;
		wp_reset_query(); ?> 
<?php } 
}

if(isset($_POST['act'])){

if($_POST['act']=='block_info'){ ?>

include('../wp-config.php');

<div class="title">Последние статьи</div>

<?php $the_query = new WP_Query( array( 'post_type' => 'post', 'posts_per_page' => 5, 'order' => 'DESC' ) );

while ($the_query->have_posts()) : $the_query->the_post(); ?>

<?php endwhile;

wp_reset_query(); ?>

<?php }

}

Но у данного подключения движка есть один минус, если у вас много посетителей и вы используете плагин кеширования, то плагин не будет кешировать эти данные, поэтому придётся придумать своё кеширование, чтобы избежать черезмерной нагрузки.

Теперь необходимо это закинуть куда-нибудь на сайт, например в папку "ajax" в корень сайта, а сам файл назвать output.php.

Теперь приступим к выводу на стороне пользователя. Здесь мы просто должны сделать $_POST-запрос с названием нужного нам блока. Например так:

$.ajax({
	type: "POST",
	url: "/ajax/output.php",
	data: {act:'block_info'},
	dataType : "text",
	success: function(msg){
		$('#block_info').html(msg);
	}
});

$.ajax({

type: "POST",

url: "/ajax/output.php",

data: {act:'block_info'},

dataType : "text",

success: function(msg){

$('#block_info').html(msg);

}

});

Перед этим надо не забыть вывести блок, куда собственно будет подставлять информация после AJAX-запроса:

<div id="block_info"></div>

1	<div id="block_info"></div>

Скрытие ссылок

Тут можно поступить так же, как и с блоками: самый простой - просто обернуть в JS, посложнее - AJAX, но тут для каждой ссылки нужно будет задавать своё название.

Есть и третий вариант, он пригодится в том случае, когда на странице уже есть наша ссылка, но мы хотим, чтобы по этой ссылке пользователь переходил, если бы кликнул по другому блоку. Приведу простой пример:

<div>
	<a href="http://www.example.net/post.html"><img src="http://www.example.net/wp-content/uploads/2014/01/img.png" alt="Миниатюра поста" /></a>
	<div class="post-info"><a href="http://www.example.net/post.html">Заголовок поста</a></div>
</div>

<div>

<div class="post-info"><a href="http://www.example.net/post.html">Заголовок поста</a></div>

</div>

В данном случае у нас дубль ссылки, на заголовке и на изображении. Хорошо бы избавиться от одной ссылки. В этом случае нам поможет событие onclick, с помощью которого мы и будем перенаправлять на нужную ссылку, но сперва нам нужно как-то подцепится к донору ссылки. Донора и приемника ссылки мы будем определять через классы. После изменения кода, выглядеть это будет так:

<div>
	<img src="http://www.example.net/wp-content/uploads/2014/01/img.png" alt="Миниатюра поста" class="replace donor" />
	<div class="post-info"><a href="http://www.example.net/post.html" class="donor">Заголовок поста</a></div>
</div>

<div>

<div class="post-info"><a href="http://www.example.net/post.html" class="donor">Заголовок поста</a></div>

</div>

Как мы видим, здесь добавились классы, класс "replace" указывает, кто будет принимать ссылку, а по классу "donor" мы будем определять пару для поиска. Поиск и подстановка события onclick через JS выглядит так:

$(document).ready(function(){
	$('.replace').live('click', function() {
		var strClass="a."+$(this).attr('class').replace("replace ", "");
		document.location.assign($(strClass).attr('href'));
	});
});

$(document).ready(function(){

$('.replace').live('click', function() {

var strClass="a."+$(this).attr('class').replace("replace ", "");

document.location.assign($(strClass).attr('href'));

});

В итоге мы получим нормальную ссылку с анкором, а так же изображение, при клике на которое будет происходить переход по этой ссылке.

Есть и четвёртый вариант. В данном случае мы не будем указывать явно ссылку, а зададим её через сторонний атрибут "date-loc" и заменим слеши на пробелы, т.е. было так:

<a href="/category/podcategory">Текст ссылки</a>

1	<a href="/category/podcategory">Текст ссылки</a>

стало:

<div date-loc="category podcategory" class="new_location">Текст ссылки</div>

1	<div date-loc="category podcategory" class="new_location">Текст ссылки</div>

Теперь осталось через JS задать действие для перехода, для всех ссылок, которым мы указали класс "new_location":

$('.new_location').live('click', function() {
	document.location.assign("/" + $(this).attr("date-loc").split(" ").join("/"));
});

$('.new_location').live('click', function() {

document.location.assign("/" + $(this).attr("date-loc").split(" ").join("/"));

});

Таким образом будут обратно подставляться слеши и делаться переход при клике.

Какой вариант лучше, выбирайте сами 🙂 Так же не забывайте, что для исправной работы всех представленных выше кодов, вам понадобится подключённая библиотека JQuery.

SEO

Простые редиректы в WordPress

31.01.2014 Profer Оставить комментарий

Иногда бывает нужно сделать редиректы в самом WordPress. Для этого существует функция wp_redirect, которая используется следующим образом:

wp_redirect( 'http://www.example.com/page.html', 301 );

1	wp_redirect( 'http://www.example.com/page.html', 301 );

Первым аргументом функции указывается куда производиться редирект, а второй - статус код.

Функция очень полезная, но если у вас используется кеширующий плагин и эту функцию просто вставить в код темы, то плагин закеширует эти данные, и в итоге всё-равно получится страница с кодом 200, а не 301-ым редиректом. Тут нам поможет хук template_redirect:

add_action( 'template_redirect', 'my_redirect', 1 );

1	add_action( 'template_redirect', 'my_redirect', 1 );

Здесь вызывается наша функция my_redirect перед тем, как будет загружен шаблон сайта. Последнее число в примере обозначает приоритет выполнения, чем выше число, тем позже выполнится функция. Теперь осталось написать функцию my_redirect, которая будет отвечать за условия редиректа и вставить это всё в function.php нашей темы. Ниже я приведу пример:

function my_redirect(){
    global $post;    
    if(is_single()){
        $post_url=get_permalink($post->ID);
        if($post_url!='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']){
            wp_redirect($post_url, 301 ); exit;
        }
    }
}
add_action( 'template_redirect', 'my_redirect', 9);

function my_redirect(){

global $post;

if(is_single()){

$post_url=get_permalink($post->ID);

if($post_url!='http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']){

wp_redirect($post_url, 301 ); exit;

}

add_action( 'template_redirect', 'my_redirect', 9);

В данном примере я делаю редирект с неправильного URL-а поста на правильный, это бывает необходимо в том случае, если по какой-либо причине у вас где-нибудь просочился не верный URL. Например ссылка "www.example.com/my_category/post.html/123" будет открываться так же, как и "www.example.com/post.html", что не очень хорошо, особенно для поисковиков, ведь по сути это дубль. Таким образом можно задать автоматические условия для перенаправления на правильные URL-ы.

SEO

Теги, релевантные заголовку

25.03.2010 Profer Оставить комментарий

Итак, как бы было замечательно, если бы теги выдавались не просто обычным списком по популярности, а в зависимости от того, какой заголовок в данный момент на странице. Ведь если в заголовке например название статьи, то выдавались бы тогда теги, связанные именно с этой статьей. Нет ничего сложно, достаточно немного знание php и некоторых функций wordpress. Приступим :).

Разделим задачу на два блока, первый – берём заголовок и разбиваем его на слова, второй – сравниваем получившиеся слова с нашими тегами и выводим те, которые подходят по сравнению.

Первая часть самая лёгкая. За заголовок отвечает функция wp_title, забьём её в переменную, уберём лишние знаки препинания и разбиваем на слова (полноценным словом будем считать часть текста, которая отделена от остальных пробелом).

$tit = wp_title('', false);
$name=str_replace (' - ', ' ', $tit);
$name=str_replace (',', '', $name);
$name=str_replace ('.', '', $name);
$name=str_replace (':', '', $name);
$zah=explode(' ', trim($name));

$tit = wp_title('', false);

$name=str_replace (' - ', ' ', $tit);

$name=str_replace (',', '', $name);

$name=str_replace ('.', '', $name);

$name=str_replace (':', '', $name);

$zah=explode(' ', trim($name));

Приступим к основной части. Чтобы получить список тегов используется функция get_tags. Для надёжности разобьём ещё и теги на слова, ведь порой теги бывают из пары слов. Алгоритм проверки сводим к следующему: необходимо проверить входит ли каждое из наших получившихся слов в название тега или наоборот, входит ли тег в слово. Например, если слово из заголовка муж, то ему соответственно подойдут теги мужчина и мужественный, действительно и обратное. Так же не забудем отсеять слова меньше 3-х букв, т.к. это обычно только предлоги, если их оставить, то от слова на выведутся все теги, содержащие этот слог(например, название, знание и др.). Во всём этом нам помогут функции eregi(ищет вхождение шаблона в строке), mb_strtolower(переводит слова к нижнему регистру в зависимости от используемой кодировки на сайте) и iconv_strlen(находит длину строки, необходимо указать кодировку).

Собственно получившийся код:

$tag_array = get_tags('orderby=count&order=DESC&number=0');
$tit = wp_title('', false);
$name=str_replace (' - ', ' ', $tit);
$name=str_replace (',', '', $name);
$name=str_replace ('.', '', $name);
$name=str_replace (':', '', $name);
$zah=explode(' ', trim($name));
if(count($zah)>0)
{	 
	 for ($x = 0; $x < count($tag_array); $x++)
	 {
		  for($z=0; $z<count($zah); $z++)
		  {
			   if(iconv_strlen($zah[$z], 'UTF-8')>3)
			   {
					$slov=explode(' ', $tag_array[$x]->name);
					
					for($y=0; $y<count($slov); $y++)
					{
						 if(eregi("^(".mb_strtolower($zah[$z]).")(.*)", $slov[$y]) or eregi("^(".$slov[$y].")(.*)", mb_strtolower($zah[$z])))
						 {
							  echo '<a href="' . get_option('home') . '/tag/' . $tag_array[$x]->slug . '/" rel="tag">';
							  echo $tag_array[$x]->name;
							  echo '</a> ';
							  unset($tag_array[$x]);
							  break;
						 }
					}
			   }
		  } 
	 }
}

$tag_array = get_tags('orderby=count&order=DESC&number=0');

$tit = wp_title('', false);

$name=str_replace (' - ', ' ', $tit);

$name=str_replace (',', '', $name);

$name=str_replace ('.', '', $name);

$name=str_replace (':', '', $name);

$zah=explode(' ', trim($name));

if(count($zah)>0)

{

for ($x = 0; $x < count($tag_array); $x++)

{

for($z=0; $z<count($zah); $z++)

{

if(iconv_strlen($zah[$z], 'UTF-8')>3)

{

$slov=explode(' ', $tag_array[$x]->name);

for($y=0; $y<count($slov); $y++)

{

if(eregi("^(".mb_strtolower($zah[$z]).")(.*)", $slov[$y]) or eregi("^(".$slov[$y].")(.*)", mb_strtolower($zah[$z])))

{

echo '<a href="' . get_option('home') . '/tag/' . $tag_array[$x]->slug . '/" rel="tag">';

echo $tag_array[$x]->name;

echo '</a> ';

unset($tag_array[$x]);

break;

}

Можно добавить ещё сюда проверку, что если нет тегов, то ничего не выводим, ещё можно вместо отсева по количеству букв сделать просто отсев определённых слов, используя в str_replace массив некоторых значений, но основную мысль я донёс, а дальше уже дело вашего творчества ;).

Копаемся в WordPress и не только