Добавление Open Graph в блог на WordPress

Всем привет! Сегодня хочу рассказать о том, что такое Open Graph, для чего нужен и как его можно добавить в свой блог на Wodpress простым способом.

Open Graph — это специальный протокол, который был разработан в Facebook. В последствие на него стали использовать большинство популярных месенджеров и социальных сетей для отображения ссылок.

Для того чтобы добавить Open Graph на свой сайт, достаточно в html внутри тега <head> разместить блок с таким содержанием:

<meta property="og:title" content="Название страницы">
<meta property="og:description" content="Описание страницы">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">
<meta property="og:type" content="website">

По-своей сути это обычные мета теги, но с дополнительной микроразметкой og: которую понимаю социальные сети вроде вконтакте и месенджеры вроде телеграмм

Наверное есть множество готовых плагинов для редактирование open graph тегов в WordPress, но плагины это не мой путь, тем более доработка для Wodpress не просто простая, а очень простая.

Для того, чтобы сделать вывод мета тегов og нужно отредактировать файл темы functions.php

Для начала давайте пропишем событие при котором будет вызываться функция которая будет автоматически заполнять content мета тегов Open Graph и возвращать блок с заполненной разметкой.

Используем для этой цели событие wp_head(). Это событие вызывается при загрузки шапки сайта, как раз то что нужно.

add_action( 'wp_head', 'load_og_meta' );

А теперь описываем функцию load_og_meta():

function load_og_meta() {
    $og_meta = '';

    // Выводим только для страниц и постов
    if ( is_page() || is_single() ) {
        
        // Получаем пост 
        $post = get_post(get_queried_object_id());

        // Эта функция получает метки нашего поста, может быть полезна для социальных сетей вроде VK
        $tags = get_tags_to_message($post->ID);
        if (!empty($text)) {
            $tags .= PHP_EOL.$text.PHP_EOL;
        }

        // Получаем изображение поста, если оно есть
        if (has_post_thumbnail($post->ID)) {
            $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );
        }

        // Тут немного приводим в порядок текст для описания
        $text = $tags . preg_replace('/[\n\r]+/s', "\n\n", strip_tags($post->post_content));
        if (strlen($text) > 500) {
            $text = mb_substr($text, 0, 500) . '...';
        }

        // Заполняем мета теги данными
        $og_meta .= '<meta property="og:title" content="' . $post->post_title. '" />' . PHP_EOL;
        $og_meta .= '<meta property="og:description" content="' . $text . '" />' . PHP_EOL;
        $og_meta .= '<meta property="og:url" content="' . get_permalink($post->ID) . '" />' . PHP_EOL;
        $og_meta .= '<meta property="og:type" content="URL" />' . PHP_EOL;
        $og_meta .= '<meta property="og:site_name" content="' . get_bloginfo('name') . '" />' . PHP_EOL;
        $og_meta .= '<meta property="og:locale" content="' . get_bloginfo('language') . '" />' . PHP_EOL;
        if (isset($image[0])) {
            $og_meta .= '<meta property="og:image" content="' . $image[0] . '" />' . PHP_EOL;
        }
    }
    echo $og_meta;
}

// функция получения меток
function get_tags_to_message($post_id) {
    $post_tags = get_the_tags( $post_id );
    $text = '';
    if (!empty($post_tags)) {
        foreach ($post_tags as $tag) {
            $text .= sprintf('#%s ', $tag->name);
        }
    }

    return $text;
}

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

Если у вас есть какие-нибудь вопросы, то всегда можете написать мне в телеграм
Так же подписывайтесь на телеграм канал и если пользуетесь вконтакте, недавно была запущено сообщество, так что так же можете присоединятся.

Один комментарий