How To Change Facebook Link Thumbnail and Description

To change the Facebook link thumbnail and description in WordPress we need to utilise a coding technology called “OpenGraph”. This allows a website to tell Facebook what information to display when someone shares a link.

Facebook for Developers has a tool known as Debugger that allows a user to see what a Facebook link will look like when copied and pasted into a post. You can enter any link here to see what title, thumbnail and description Facebook will use for that link.

Here is the code to place in your functions.php file in order to change the links, description, title and thumbnail. Make sure you replace the relevant sections with your own data for your site. Setting the third parameter for the add_action ensures the function is executed first and the code is inserted at the top of the heading so it takes preference over any other OpenGraph tags in the page.

add_action('wp_head', 'es_add_facebook_page_config', 1);

function es_add_facebook_page_config() {
	?>
	<meta property="og:image" content="http://mywebsite.com/wp-content/uploads/2015/04/image.png" />
	<meta property="og:title" content="Title you want to display" />
	<meta property="og:site_name" content="Name of your website"/>
	<meta property="og:description" content="Add a description here about the page you are linking to" />
	<?php
}

add_action('wp_head', 'es_add_facebook_page_config', 1);

function es_add_facebook_page_config() {

<?php

}

The above code will show the same description and image for all pages. If you want a different description or image for a specific page on your site then you can use the following code which checks for a specific page name. In this instance it’s for my contact page.

add_action('wp_head', 'es_add_facebook_page_config_for_contact', 1);

function es_add_facebook_page_config_contact() {
	if(is_page('contact')) {
		?>
		<meta property="og:image" content="http://mywebsite.com/wp-content/uploads/2015/04/image.png" />
		<meta property="og:title" content="Contact" />
		<meta property="og:site_name" content="Eversion Systems"/>
		<meta property="og:description" content="Send me an email to contact me" />
		<?php
	}
}

add_action('wp_head', 'es_add_facebook_page_config_for_contact', 1);

function es_add_facebook_page_config_contact() {

if(is_page('contact')) {

<?php

}

Leave a Reply Cancel reply