Настраиваем Турбо-страницы для сайта на WordPress и Laravel

Я знаю, что подавляющее большинство SEO'шников, а также просто владельцев сайтов бесятся от одного только упоминания Турбо-страниц. Однако есть и те, кому очень даже интересна данная тема.

В связи с этим, я и решил написать эту статью, из которой вы узнаете о том, как самостоятельно настроить Турбо-страницы без каких-либо плагинов/пакетов на сайте, сделанном на WordPress/Laravel.

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

Но почему?

Просто на VC.ru, я часто встречаю статьи, которые содержат в себе «голое SEO». Например, по поводу ускорения сайта или его адаптации под мобильные устройства SEO'шники обычно пишут так: "проанализируйте сайт, составьте ТЗ для программиста" и т. д.

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

Буквально только что дописал код для Турбо-страниц, поэтому не судите строго. Ну и для начала давайте его разберем, а потом я объясню куда и для чего его нужно вставлять.

<?php header('Content-Type: application/xml; charset=utf-8'); echo "<?xml version='1.0' encoding='UTF-8' ?>"; ?> <rss xmlns:yandex="http://news.yandex.ru" xmlns:media="http://search.yahoo.com/mrss/" xmlns:turbo="http://turbo.yandex.ru" version="2.0"> <channel> <title><?php bloginfo( 'name' ); ?></title> <link><?php bloginfo( 'url' ); ?></link> <description><?php bloginfo( 'description' ); ?></description> <language><?php bloginfo( 'language' ); ?></language> <turbo:analytics type="Yandex" id="Идентификатор"></turbo:analytics> <turbo:analytics type="Google" id="Идентификатор"></turbo:analytics> <turbo:analytics type="MailRu" id="Идентификатор"></turbo:analytics> <turbo:analytics type="Rambler" id="Идентификатор"></turbo:analytics> <yandex:related type="infinity"> <?php query_posts('orderby=rand&showposts=5'); if (have_posts()) : while (have_posts()) : the_post(); ?> <link url="<?php the_permalink(); ?>"><?php the_title(); ?></link> <?php endwhile; endif; ?> </yandex:related> <?php $args = array( 'posts_per_page' => 10 ); $query = new WP_Query( $args ); while ( $query->have_posts() ) : $query->the_post(); ?> <item turbo="true"> <link><?php the_permalink(); ?></link> <author><?php the_author(); ?></author> <category><?php $cat = get_the_category( $post->ID ); echo $cat[0]->cat_name; ?></category> <pubDate><?php the_date( 'D, d M Y H:i:s O' ); ?></pubDate> <turbo:content> <![CDATA[ <header> <h1><?php the_title(); ?></h1> <figure> <img src="<?php the_post_thumbnail_url(); ?>"> </figure> <menu> <a href="<?php esc_url(home_url( '#' )); ?>">Пункт меню #1</a> <a href="<?php esc_url(home_url( '#' )); ?>">Пункт меню #2</a> <a href="<?php esc_url(home_url( '#' )); ?>">Пункт меню #3</a> <a href="<?php esc_url(home_url( '#' )); ?>">Пункт меню #4</a> <a href="<?php esc_url(home_url( '#' )); ?>">Пункт меню #5</a> </menu> </header> <?php the_content(); ?> ]]> </turbo:content> </item> <?php endwhile; wp_reset_postdata(); ?> </channel> </rss>

header('Content-Type: application/xml; charset=utf-8') — отправка HTTP-заголовка. Проще говоря, в данном случае, эта строчка кода говорит браузеру, чтобы он обрабатывал страницу не как HTML, а как XML-документ.

Думаю не стоит объяснять, что такое title, link, description и language. Кстати, если вы используете плагины для заполнения title и description, то тогда советую прописать их вручную. То есть прямо в коде следующим образом:

... <title>Заголовок главной страницы...</title> <link><?php bloginfo( 'url' ); ?></link> <description>Описание главной страницы...</description> <language><?php bloginfo( 'language' ); ?></language> ...

Ну, а сюда нужно вставить идентификатор счетчика: <turbo:analytics type="Yandex" id="Идентификатор"></turbo:analytics>. Если на вашем сайте также установлены другие счетчики, то вы можете их дописать, как показано в примере ниже:

... <turbo:analytics type="Yandex" id="1111111"></turbo:analytics> <turbo:analytics type="Google" id="2222222"></turbo:analytics> <turbo:analytics type="MailRu" id="3333333"></turbo:analytics> <turbo:analytics type="Rambler" id="4444444"></turbo:analytics> ...

Следующий отрезок кода выводит рандомные посты в Турбо-страницах:

<yandex:related type="infinity"> <?php query_posts('orderby=rand&showposts=5'); if (have_posts()) : while (have_posts()) : the_post(); ?> <link url="<?php the_permalink(); ?>"><?php the_title(); ?></link> <?php endwhile; endif; ?> </yandex:related>

Далее мы делаем запрос в БД и затем выводим 10 последних постов. Однако вам нужно прописать вручную пункты меню и их URL-адреса. Вы можете добавить любое количество ссылок на разделы сайта следующим образом:

<menu> <a href="<?php esc_url(home_url( 'Относительная ссылка' )); ?>">Пункт меню #1</a> <a href="<?php esc_url(home_url( 'Относительная ссылка' )); ?>">Пункт меню #2</a> <a href="<?php esc_url(home_url( 'Относительная ссылка' )); ?>">Пункт меню #3</a> <a href="<?php esc_url(home_url( 'Относительная ссылка' )); ?>">Пункт меню #4</a> <a href="<?php esc_url(home_url( 'Относительная ссылка' )); ?>">Пункт меню #5</a> </menu>

Обратите внимание, там где написано «Относительная ссылка», вам нужно вставить обычные URL-адреса разделов без основного домена, типа /category/post-name или /tor/what-is-tor-browser/ и т. д.

Теперь перейдите в админку сайта WordPress, зайдите в раздел «Страницы», создайте новую страницу с любым именем, но с URL-адресом turbo. URL-адрес должен быть следующим: domain/turbo/.

Создание страницы с URL-адресом: domain/turbo/

Откройте FTP-клиент, зайдите в папку /wp-content/themes/название активной темы и затем создайте в ней файл page-turbo.php. Вставьте в этот файл код, опубликованный выше и затем перейдите на страницу domain/turbo/.

Создание файла page-turbo.php в каталоге темы

Все, Турбо-страницы для WordPress готовы. Теперь перейдите в Yandex.Webmaster и настройте внешний вид ваших Турбо-страниц.

На Laravel настроить Турбо-страницы даже гораздо проще, чем на WordPress. Думаю, у вас уже есть категории и посты, поэтому вам нужно только оформить контроллер и вывести в темплейте необходимые данные.

Контроллер будет выглядеть примерно так (в зависимости от ваших моделей, переменных и таблиц в базе данных):

<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use Illuminate\Support\Facades\DB; use App\{Page, Article}; class FeedController extends Controller { public function turbo() { $articles = Article::orderBy('created_at', 'desc') ->where('published', 1) ->paginate(10); $page = DB::table('pages')->find(1); $randoms = Article::orderBy(DB::raw('RAND()')) ->where('published', 1) ->paginate(5); return response()->view('turbo', [ 'articles' => $articles, 'page' => $page, 'randoms' => $randoms ])->header('Content-Type', 'text/xml'); } }

Ну, а темплейт должен быть примерно таким:

<rss xmlns:yandex="http://news.yandex.ru" xmlns:media="http://search.yahoo.com/mrss/" xmlns:turbo="http://turbo.yandex.ru" version="2.0"> <channel> <title>{{ $page->title }}</title> <link>{{ url('/') }}/</link> <description>{{ $page->description }}</description> <turbo:analytics type="Yandex" id="77777777"></turbo:analytics> <yandex:related> @foreach( $randoms as $random ) <link url="{{ url('blog', $random->slug) }}" img="{{ asset('img/' . $random->image) }}">{{ $random->heading }}</link> @endforeach </yandex:related> @foreach( $articles as $article ) <item turbo="true"> <link>{{ url('blog', $article->slug) }}</link> <author>{{ $article->users()->get()->first()->name }}</author> <category>{{ $article->tags()->get()->first()->title }}</category> <pubDate>{{ \Carbon\Carbon::parse( $article->created_at )->format( 'D, d M Y H:i:s O' ) }}</pubDate> <turbo:content> <![CDATA[ <header> <h1>{{ $article->heading }}</h1> <figure> <img src="{{ asset('img/' . $article->image) }}"> </figure> <menu> @foreach( $categories as $category ) <a href="{{ url('category', $category->slug) }}">{{ $category->name }}</a> @endforeach </menu> </header> {!! $article->content !!} ]]> </turbo:content> </item> @endforeach </channel> </rss>

То есть, здесь весь прикол заключается в следующей строчке: response()->view('...', [...])->header('Content-Type', 'text/xml');. Ну, а далее уже можно выводить любые данные из БД и передавать их в темплейт.

Кто-то из вас напишет, что на много легче решить данную задачу на WordPress с помощью плагина, а на Laravel с помощью пакета. Для кого-то возможно так и есть, но мне гораздо легче все это написать самому и если что, - манипулировать кодом так, как мне вздумается.

Я не против плагинов, но какие-то простые задачки, типа микроразметок, Турбо-страниц и хлебных крошек можно сделать и без помощи плагинов.

P.S. Если у кого-то возникнут трудности - пишите в комментариях, буду рад вам помочь.

3 комментария

Артем Акулов

15.10.2020

Турбо страницы - это дно. Никогда их не настраивайте.

Ответить

Виктор Петров

Ну почему ж сразу дно. Надо просто использовать их разумно. Приведу пару примеров:
а) новостники и отчасти информационка - тут, пожалуй, мастхев;
б) расширенный сниппет на выдаче по ряду запросов (из всё того же информационного контента на сайте услуг или коммерции.
Банальный пример. Есть у меня на продвижухе (условно говоря) сайт супер-пупер.ру. А у них есть заклятые партнеры пупер-супер.ру. По брендовому запросу показывают обоих, но у пупер-супер.ру есть такой вот расширенный сниппет с картинками из турбо-страниц. Кликабельность обеспечена - а запрос-то по сути витальный.
Во-всех прочих случаях необходимости в турбо и сливе трафа на Яндекс я не вижу. Как минимум, конверсия с них в разы меньше, чем с обычных страничек.

Аккаунт удален

15.06.2021

Комментарий недоступен

Настраиваем Турбо-страницы для сайта на WordPress и Laravel

Турбо-страницы для сайта на WordPress

Турбо-страницы для сайта на Laravel

Подведем итоги в заключение