Как добавить вставки социальных сетей в статьи в WordPress

Если вы отправили ссылку на свою статью WordPress, и она не расширилась, чтобы показать изображение, заголовок и описание, это потому, что вы не настроили свои метатеги Open Graph в WordPress. Мы покажем вам, как настроить их, чтобы улучшить ваше присутствие в социальных сетях.

Что такое метатеги Open Graph?

Конфигурация для встраивания в социальные сети выполняется в стандартном формате, изначально созданном в Facebook, который называется «протокол Open Graph».

По сути, они выглядят как следующие HTML-теги <meta> , которые обычно размещаются в заголовке вашего сайта:

<meta property="og:image" content="https://i.imgur.com/imagelink.jpg"> 
<meta property="og:title" content="Website Title" /> 
<meta property="og:description" content="Website Description" /> 
<meta property="og:type" content="article" /> 
<meta property="og:url" content="https://example.com/" />

Однако, хотя это сработает для обычного веб-сайта, вы не можете просто вставить это в свой HTML-код WordPress. Это связано с тем, что WordPress — это система управления контентом (CMS), и она должна заполнять заголовок, описание и изображение в зависимости от статьи, на которую вы ссылаетесь.

Есть два основных способа сделать это — вручную, с некоторыми изменениями в ваших файлах PHP или автоматически с помощью плагина. Чем меньше зависимостей от плагинов, тем лучше, поэтому мы рекомендуем добавлять их вручную, если вы разбираетесь в технологиях.

Но если вы не используете виртуальный хостинг или используете его и не имеете доступа к своим системным файлам, нет ничего плохого в настройке его с помощью плагина.

Ручное добавление тегов в PHP

PHP используется для автоматического создания HTML-файла по запросу пользователя. Код PHP, используемый для создания заголовка, зависит от того, какую тему вы используете. Технически он расположен в header.php, но вызывает функцию с именем wp_head(), поэтому лучше добавить новое действие к этому в functions.php, расположенный здесь:

wordpress/wp-content/themes/theme/functions.php

Если вам не нравятся текстовые редакторы, вы можете установить плагин под названием Head, Footer и Post Injections, который позволит вам добавлять код через настройки плагина, хотя вам, вероятно, следует просто использовать плагин ниже, если вы все равно добавляете плагины. .

В противном случае вы можете использовать редактор командной строки, такой как nano или micro, или перенести этот файл на рабочий стол для редактирования. В любом случае, откройте это в выбранном вами текстовом редакторе и прокрутите вниз:

Затем вставьте следующую функцию:

function fb_opengraph() {
    global $post;
 
    if(is_single()) {
        if(has_post_thumbnail($post->ID)) {
            $img_src = wp_get_attachment_image_src(get_post_thumbnail_id( $post->ID ), 'medium');
        } else {
            $img_src = get_stylesheet_directory_uri() . '/img/opengraph_image.jpg';
        }
        if($excerpt = $post->post_excerpt) {
            $excerpt = strip_tags($post->post_excerpt);
            $excerpt = str_replace("", "'", $excerpt);
        } else {
            $excerpt = get_bloginfo('description');
        }
        ?>
 
    <meta property="og:title" content="<?php echo the_title(); ?>"/>
    <meta property="og:description" content="<?php echo $excerpt; ?>"/>
    <meta property="og:type" content="article"/>
    <meta property="og:url" content="<?php echo the_permalink(); ?>"/>
    <meta property="og:site_name" content="<?php echo get_bloginfo(); ?>"/>
    <meta property="og:image" content="<?php echo $img_src; ?>"/>
 
<?php
    } else {
        return;
    }
}
add_action('wp_head', 'fb_opengraph', 5);

По сути, это проверяет, является ли страница отдельной публикацией или главной страницей, и соответствующим образом настраивает описание и изображение. Обратите внимание, что он использует /img/opengraph_image.jpg для страниц, не являющихся статьями, поэтому вам нужно будет туда что-то добавить.

Затем он добавляет все метатеги OG, используя любые данные, которые в настоящее время использует страница. Это должно вступить в силу немедленно, хотя вам, возможно, придется подождать, пока кэши обновятся.

Использование плагина

Настроить это с помощью плагина проще. Вы захотите найти «Open Graph and Twitter Card Tags» и установить его:

Активируйте его и перейдите в настройки:

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

Вы должны увидеть, как изменения работают сразу после того, как вы нажмете «Применить».

Некоторые другие более крупные плагины, такие как YoastSEO, также могут настраивать метатеги, но этот плагин делает это просто, без дополнительного объема.

---

---