There are some basics you need to know when working with Facebook's Open Graph to tag your webpages.
Descriptive Elements
Let's start with the descriptive elements: url, type, title and description. For a website we can fill these out in the following way:
<!-- Facebook Open Graph --> <meta property="og:url" content="https://www.gylphi.co.uk" /> <meta property="og:type" content="website" /> <meta property="og:title" content="Gylphi: Arts and Humanities Publisher" /> <meta property="og:description" content="Academic publisher of the arts and humanities from the twentieth century and beyond." />
The property values are hopefully clear enough to understand but are expanded on here.
Images
One of the most important factors you'll want to include are images. Images should be a minimum of 600 px wide, but preferably 1080px wide (see https://developers.facebook.com/docs/sharing/best-practices#images).
The other really important thing to know is that you should provide height and width dimensions if you want the image you use to be immediately available. Otherwise you'll need to wait for the webcrawler to assess the image and work out its dimensions.
The other really important thing to know is that you should provide height and width dimensions if you want the image you use to be immediately available. Otherwise you'll need to wait for the webcrawler to assess the image and work out its dimensions.
<meta property="og:image" content="https://www.gylphi.co.uk/images/logo.jpg" /> <meta property="og:image:width" content="1080" /> <meta property="og:image:height" content="626" />
App Id
Finally in order to receive insight data you'll need to include the facebook_id attached to your website.<meta property="og:facebook_id" content="5465847395823" />
Conclusion
You can find more out about markup from the Facebook developer site.<!-- Facebook Open Graph --> <meta property="og:url" content="https://www.gylphi.co.uk" /> <meta property="og:type" content="website" /> <meta property="og:title" content="Gylphi: Arts and Humanities Publisher" /> <meta property="og:description" content="Academic publisher of the arts and humanities from the twentieth century and beyond." /> <meta property="og:image" content="https://www.gylphi.co.uk/images/logo.jpg" /> <meta property="og:image:width" content="1080" /> <meta property="og:image:height" content="626" /> <meta property="og:facebook_id" content="5465847395823" />And use the Sharing Debugger to test your implementation.
Comments
Post a Comment