Установка социальных метатегов в yii2
  • 882

Yii2 установка мета тегов для соцсетей twitter, facebook и google+

Автор: admin | 20 августа (Пн.) 2018г. в 23ч.51м.

Для увеличения конверсии и улучшения внешнего вида контента сайта, который публикуется в социальных сетях нужно установить специальные метатеги. В каждой популярной соцсети метатеги обозначаются по разному. Рассмотрим установку метатегов для таких соцсетей, как  twitter, facebook и google+. Если Вам нужно добавить другие соцсети, то можно сделать все по примеру этих трех, изменив лишь теги на нужные.

В yii2 для установки метатегов есть специальный метод, который выводит все метатеги в блоке head, когда создается страница.
\Yii::$app->view->registerMetaTag($options, $key = null);//регистрирует метатеги​

$options - представляет собой массив, в котором ключ это имя атрибута, а значение - соответственно, значение атрибута. Вот пример:

//Устанавливаем description для страницы
\Yii::$app->view->registerMetaTag([
      'name' => 'description',
      'content' => $tags['description'],//какое-то значение из базы данных
], 'description');

Выводятся метатеги в view/layout.php Вашего приложения в месте метода $this->head():

<?php $this->beginPage() ?>
<!DOCTYPE html>
<html lang="<?= Yii::$app->language ?>">
<head>
<meta charset="<?= Yii::$app->charset ?>">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<?= Html::csrfMetaTags() ?>

<title><?= Html::encode($this->title ? $this->title ." | ".\Yii::$app->name : \Yii::$app->name) ?></title>


//ВЫВОДИМ МЕТАТЕГИ ТУТ
<?php $this->head() ?>

</head>
<body>
<?php $this->beginBody() ?>

Метатеги для соцсетей twitter, facebook и google+.

Рассмотрим необходимые метатеги для выбранных соцсетей:
<!-- Schema.org разметка for Google+ -->
<meta itemprop="name" content="Тут Title страницы">
<meta itemprop="description" content="Описание страницы тут. Не более 200 символов">
<meta itemprop="image" content="http://www.example.com/image.jpg">

<!-- Twitter Card данные -->
<meta name="twitter:card" content="общая картинка">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Тут Title страницы">
<meta name="twitter:description" content="Описание страницы тут. Не более 200 символов">
<meta name="twitter:creator" content="@author_handle">
<!-- Twitter summary card  с крупным изображением должна быть не менее 280x150px -->
<meta name="twitter:image:src" content="http://www.example.com/image.jpg">

<!-- Open Graph данные для facebook -->
<meta property="og:title" content="Тут Title страницы" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="og:description" content="Описание тут" />
<meta property="og:site_name" content="Имя сайта, i.e. Moz" />
<meta property="article:published_time" content="2013-09-17T05:59:00+01:00" />
<meta property="article:modified_time" content="2013-09-16T19:08:47+01:00" />
<meta property="article:section" content="Article Section" />
<meta property="article:tag" content="Теги" />
<meta property="fb:admins" content="Facebook numberic ID" />​
Все эти метатеги будут для каждой страницы свои. Для регистрации метатегов будем использовать упомянутую выше функцию (метод, если точнее)  Yii::$app->view->registerMetaTags();
Так как в данных тегах будут данные, которые будут доставаться с базы данных, то будем наполнять теги в экшене контроллера, который выводит страницу.
class BlogController extends Controller
{
    public function actionArticle($alias)
    {
        $article = BlogArticles::find()->where(['alias' => $alias])->one();
        
        //Тут регистрируем метатег description
        \Yii::$app->view->registerMetaTag([
                'name' => 'description',
                'content' => $article->description,
        ], 'description');

        //Далее регистрируем теги для соцсетей
        \Yii::$app->view->registerMetaTag([
                'property' => 'og:title',
                'content' => $article->description,
        ], 'description');

        \Yii::$app->view->registerMetaTag([
                'property' => 'og:type',
                'content' => $article->description,
        ], 'description');

        \Yii::$app->view->registerMetaTag([
                'property' => 'og:description',
                'content' => $article->description,
        ], 'description');

        //...................................
        //и т.д.


        return $this->render('article',compact('article'));
    }
}​
Очивидно, что если прописывать все метатеги в экшене контроллера, то кода будет слишком много и контроллер будет раздут и переполнен. И тем более если прийдется все повторять снова и в другом экшене, то получится дублирование кода. Нам это не надо. Поэтому создадим методы для формирования социальных метатегов, что позволит разгрузить контроллер от ненужного награмождения. Методы можем создать как в самом контроллере, так и в отдельном классе. Создадим класс - компонент для размещения в нем методов формирования специальных метатегов. 

Создание компонента SeoComponent.

Назовем наш компонент - SeoComponent. Создадим класс SeoComponent в папке components:
namespace frontend\components;

use yii;
use yii\base\Component;
use yii\helpers\Html;
use yii\helpers\Url;

class SeoComponent extends Component{


}​
В конфигурационном файле регестрируем компонент:
...

'components' => [
        'seo' => [
           'class' => 'frontend\components\SeoComponent',
	],

...​
 Теперь все методы этого компонента доступны по такому обращению:
\Yii::$app->seo->methodName($var);​

Создание методов генерации социальных метатегов.

Если каждый метатег регестрировать с помощью \Yii::$app->view->registerMetaTag(), то получится много кода. Сократим количество кода. Для этого посмотрим на все атрибуты тегов. Видим, что для фейсбука метатеги содержат два атрибута - property и content. Для твиттера - name и  content. Для гугл плюс - itemprop и content. Значит для каждой соцсети создадим отдельный метод и в цикле будем передавать данные в \Yii::$app->view->registerMetaTag():
    public function putFacebookMetaTags($tags){
        
        foreach($tags as $prop => $content){
            \Yii::$app->view->registerMetaTag([
                'property' => $prop,
                'content' => $content,
            ], $prop);
        }
    }
    
    public function putTwitterMetaTags($tags){
        
        foreach($tags as $name => $content){
            \Yii::$app->view->registerMetaTag([
                'name' => $name,
                'content' => $content,
            ], $name);
        }
    }
    
    public function putGooglePlusMetaTags($tags){
        
        foreach($tags as $itemprop => $content){
            \Yii::$app->view->registerMetaTag([
                'itemprop' => $itemprop,
                'content' => $content,
            ], $itemprop);
        }
    }​
Теперь в экшене воспользуемся этими методами для формирования метатегов:
\Yii::$app->seo->putFacebookMetaTags([
            'og:url'        => Url::canonical(),
            'og:type'       => 'website',
            'og:title'      => $article->metaTitle,
            'og:description'=> $article->metaDesc,
            'og:image'      => Url::to("@img-web-blog-posts/$article->id/middle/$article->faceImg", true),
            'fb:app_id'=> '1811670458869631',//для статистики по переходам

        ]);
        
        \Yii::$app->seo->putTwitterMetaTags([
            'twitter:site'        => Url::canonical(),
            'twitter:title'       => $article->metaTitle,
            'twitter:description' => $article->metaDesc,
            'twitter:creator'     => 'Coderius',
            'twitter:image:src'      => Url::to("@img-web-blog-posts/$article->id/middle/$article->faceImg", true),
            'twitter:card'=> 'summary',

        ]);
        
        \Yii::$app->seo->putGooglePlusMetaTags([
            'name'        => $article->metaTitle,
            'description'=> $article->metaDesc,
            'image'      => Url::to("@img-web-blog-posts/$article->id/middle/$article->faceImg", true),
            
        ]);​
Теперь все необхадимые теги зарегестрированы и будут выведены в html страницы и кода в контроллере стало намного меньше. Теперь можно разместить кнопки для добавления странички в соцсети и пожинать плоды тяжелой работы. )

Приветствую!

Меня зовут Сергей. Я - автор этого блога.

Если Вам был полезен материал на моем сайте, поддержите пожалуйста мой проект, чтобы о нем узнали другие люди - кликните plizz :) на иконку в соц. сети, чтобы поделиться материалом с другими.