Open Graph w WordPress2 min read

09 Kwi, 2014 Wordpress 0 Komentarzy Wojciech Władziński

Dziś pokażę jak w prosty sposób zaimplementować Facebookowy Open Graph na stronę WordPressa dla standardowych artykułów za pomocą wtyczki jak i bez jej pomocy. Zacznę może od wyjaśnienia czym jest Open Graph.

Opisuje on na naszej stronie dane w taki sposób aby Facebook mógł korzystać dokładnie z tych danych jakie mu wskażemy. Poniżej zamieszczam przykład przy Share artykułu:

1. Aby to zrobić należy w swoim szablonie strony w pliku functions.php umieścić poniższy kod:

function wp_opengraph_for_posts() {
if ( is_singular() ) {
global $post;
setup_postdata( $post );
$output = '<meta property="og:typ" content="article" />' . "\n";
$output .= '<meta property="og:title" content="' . esc_attr( get_the_title() ) . '" />' . "\n";
$output .= '<meta property="og:url" content="' . get_permalink() . '" />' . "\n";
$output .= '<meta property="og:description" content="' . esc_attr( get_the_excerpt() ) . '" />' . "\n";
if ( has_post_thumbnail() ) {
$imgsrc = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
$output .= '<meta property="og:image" content="' . $imgsrc[0] . '" />' . "\n";
}
echo $output;
}
}
add_action( 'wp_head', 'wp_opengraph_for_posts' );

function wp_opengraph_for_posts() {

if ( is_singular() ) {

global $post;

setup_postdata( $post );

$output = '<meta property="og:typ" content="article" />' . "\n";

$output .= '<meta property="og:title" content="' . esc_attr( get_the_title() ) . '" />' . "\n";

$output .= '<meta property="og:url" content="' . get_permalink() . '" />' . "\n";

$output .= '<meta property="og:description" content="' . esc_attr( get_the_excerpt() ) . '" />' . "\n";

if ( has_post_thumbnail() ) {

$imgsrc = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );

$output .= '<meta property="og:image" content="' . $imgsrc[0] . '" />' . "\n";

}

echo $output;

}

add_action( 'wp_head', 'wp_opengraph_for_posts' );

2. Następnie w pliku header.php znajdujemy nasz tag <html> i zamieniamy go na taki:

 <html <?php language_attributes(); ?> prefix="og:http://ogp.me/ns#">

1	<html <?php language_attributes(); ?> prefix="og:http://ogp.me/ns#">

Wtyczka do Open Graph

Jeżeli używasz All in Seo Pack (włącz i skonfiguruj dodatek Social Meta poprzez opcje wtyczki) lub Yoast SEO (SEO => Społeczności) możesz użyć ich funkcji do oznaczenia elementów dla FB.

WP Facebook Open Graph protocol

Przetestowałem kilka z nich i ta wydaje mi się najlepsza. Po zainstalowaniu do opcji dodaje nam się panel wtyczki w którym możemy znaleźć:

User account ID – koniecznie wpisać trzeba ID swojego profilu/strony FB.
Domyślny obrazek, który będzie wyświetlany jeżeli dany artykuł nie będzie posiadał żadnego.
Wymuszanie korzystania przez Facebooka tylko z tego url obrazka podanej wyżej

Artykuły

O Wojciech Władziński

Branżą SEO zajmuję się od 2008 roku. Na co dzień starszy specjalista ds. SEO w firmie Seogroup. Tworzę i optymalizuję duże serwisy jak i mniejsze strony internetowe. Szczególnie upodobałem sobie środowisko WordPressa, który mimo powszechnej opinii nie jest tylko platformą blogową.

Zabezpieczenie WordPressa przed atakami hackerów - 10 lipca 2016
Dodatkowe funkcje w edytorze wizualnym WordPressa - 20 maja 2016
WordCamp 2016 w Gdyni - 19 kwietnia 2016
Linkowanie wewnętrzne na stronie – porady - 1 marca 2016
Wyświetlanie pól wpisów i taksonomii tworzonych przez Types - 17 lutego 2016
Wtyczki do WP, których nie znasz a powinieneś cz.8 - 10 lutego 2016
Redukcja współczynnika odrzuceń dzięki Reduce Bounce Rate - 15 stycznia 2016
Posumowanie roku 2015 – najpopularniejsze artykuły w 2015 - 5 stycznia 2016
Jak ukryć widgety na urządzeniach moblinych ? - 8 października 2015
Wtyczki do WP, których nie znasz a powinieneś cz.7 - 9 lipca 2015

seowordpress.pl

Czego szukasz?

Open Graph w WordPress2 min read

Wtyczka do Open Graph

O Wojciech Władziński

Czytaj również

Zostaw odpowiedź

Przeczytaj inne:

Wtyczki do WP, których nie znasz a powinieneś cz.7