When you enter a link in a Facebook post or on any other social media site, you want to show the title, some text and preview to your visitors, … if you see nothing or the wrong image in the preview, you have to set Open Graph meta tags.
What’s usually no big deal if you use some CMS, there are some plugins that do the job, if you code your own pedigree database you have to take care of that.
The 3 most important are og:image, og:title and og:description
Take a screenshot of your website and define it as $ogImage. Put the following code between the head tags of your header or index file if you want the same image for all pages. You can now use your variable $ogImage or the url of the image.
1) <meta property="og:image" content="<?php echo $ogImage;?>" /> or 2) <meta property="og:image" content="http://www.example.com/pathToYourImage.jpg" />
In case you want another image for a certain page, use 1) for the header and add the following code to that page:
if(empty($ogImage)){ ?>
<meta property="og:image" content="www.example.com/pathToYourImage.jpg" />
<? } else {?>
<meta property="og:image" content="<?php echo $ogImage;?>" />
<? }
Proceed likewise for the title and the description.
Both the title and the description don’t need to be only static text, you can include also any php variable defined before. In the example below I use variables for the amount of pedigrees and photos:
<meta property="og:description" content="<?php echo $total[0];?> pedigrees including <?php echo $photo_total[0];?> pictures." />
To see the results immediately use Facebook’s own “Sharing Debugger”: