


Блог IT-шника
Блог IT-шника
Привіт:) У цьому пості покажу простий спосіб додати розмітку Open Graph без встановлення плагінів.
За замовчуванням WordPress не забезпечує підтримку протоколу Open Graph. Для цього зазвичай використовуються SEO-плагіни (наприклад, Yoast SEO), які мають всі необхідні налаштування.
Іноді потрібно додати цю розмітку не для всіх сторінок сайту, а лише для однієї або декількох. Наприклад, для лендінгу чи візитки. Якщо для СЕО-оптимізації на сайті не використовується окремий плагін, то заради Open Graph його встановлювати не обов'язково. Для цього можна обійтися власним кодом у файлі functions.php.
Для прикладу додамо розмітку на головну сторінку сайту. Для цього використовується WordPress-функція is_front_page()
. Замість або разом із нею можете скористатись іншими умовними тегами (Conditional Tags) для визначення тієї чи іншої конкретної сторінки сайту, на якій потрібно вивести дані Open Graph.
if ( ! function_exists( 'mp_add_opengraph_doctype' ) ) {
function mp_add_opengraph_doctype( $output ) {
return $output . ' prefix="og: https://ogp.me/ns#"';
}
}
if ( ! function_exists( 'mp_insert_opengraph_microdata' ) ) {
function mp_insert_opengraph_microdata() {
if ( is_front_page() ) {
echo '
<meta property="og:title" content="Текст Title" />
<meta property="og:description" content="Текст Description" />
<meta property="og:url" content="https://site.com/" />
<meta property="og:image" content="https://site.com/logo.png" />
<meta property="og:image:secure_url" content="https://site.com/logo.png" />';
}
}
}
add_filter( 'language_attributes', 'mp_add_opengraph_doctype' );
add_action( 'wp_head', 'mp_insert_opengraph_microdata', 5 );
У коді функція mp_add_opengraph_doctype()
додає атрибут prefix="og: https://ogp.me/ns#"
для тегу <html>
. В результаті у коді сторінки це виглядатиме приблизно так:
<html lang="en-US" prefix="og: https://ogp.me/ns#" >
Рядки нижче власне додають всередині <head></head>
мета-теги із вказаними даними. В атрибуті content
необхідно підставити власні значення.