Creating a link preview on a Facebook page.

Creating a link preview on a Facebook page.

1. Setup the Open Graph meta descriptions on your website.
2. Configure the Facebook sharing debugger.
3. Remember to insert a single space after the URL on your Facebook page.

If you are using WordPress and the All in One SEO plugin, go to Social Meta and select ‘Use AIOSEO Title and Description’ and enter your ‘OG image source’. Verify your settings by viewing the page source in your browser, for example:

<meta property="og:title" content="English for IT professionals, free human corrections.">
<meta property="og:type" content="website" />
<meta property="og:url" content="https://andrew9.com/" />
<meta property="og:image" content="https://andrew9.com/wp-content/uploads/2019/01/header.jpg" />
<meta property="og:site_name" content="English for IT Professionals" />
<meta property="fb:app_id" content="xxxxxxxxxxxxxxxxxxxxx" />
<meta property="og:description" content="Installing Mojave on a Hackintosh and configuring SSL. My existing webserver is a Hackintosh build running El Capitan 10.11.6 with Server.app 5.2, Letsencrypt." />

Go to the Facebook sharing debugger https://developers.facebook.com/tools/debug/sharing/

Enter your website URL and click debug. You should see something like this, with no errors reported.
If not scrape again, and again a few times, as there is a cache involved here that has to be forced.

You can do a final check in Facebook by typing in your website address into a post then hit the space bar on your keyboard (NOT ENTER). Remember to insert a single space after your URL.

A preview should appear and if everything worked, it should look exactly like the Link Preview on the Sharing Debugger page.

Leave a Comment

Leave a comment