Task outline
Whenever I share my webpage to social media, I either get the wrong image displayed or nothing is displayed. Fix this problem.
Output or results of activity
- Facebook now displays the correct image.
- Twitter now displays the correct card.
Comments on knowledge and skills demonstrated
This required searching the internet for the appropriate instructions.
Once i found the correct site, it was straight forward in fixing Facebook although Facebook debugger is still complaining about some errors.
However, it works! Twitter involved adding some meta tags and validating on their website.
First, I added the meta tags to the header as suggested at the Open Graph Protocol website. The twitter tags I got from SangFroid Web Design.
- og tags are for Facebook.
- twitter tags are for twitter.
Next, I logged in to Facebook and went to the debugger page and followed the instructions.
Resources:
Facebook Debugger
Twitter Card validator
Open Graph Protocol
SangFroid Web Design
The Essential Meta Tags for Social Media