Backlinks
Web

Configuring image previews for different websites. This is surprisingly hard - and, of course, many websites do not follow the open graph protocol specification precisely - so workarounds and additional tags are necessary to supply the HTML needed ot make this happen on any page.

There are two standards: the "Open Graph Protocol" specification (from `Meta`) and the "Twitter Card" specification (guess who made this one). Most other services follow one specification or another to display previews of website information, so both have to be adhered to.

Some services such as Signal do not use the open graph protocol for previews; rather, they rely on linking an 'icon' attribute to the site. Consider the source code. This assumes that the icon to display for the website is linked as a favicon in the header of the precise page we are using. The Signal code manually parses the header of the website for the icon and displays it.

Resources

Open Graph Protocol

• Open Graph Protocol Specification
• Need Facebook App ID for proper scraping for IG and Facebook
• Getting Facebook App ID for Facebook meta
• Facebook Sharing Debugger
• Fixing Facebook Link preview

Twitter Card

• Twitter Image Preview
• Twitter Image Card Validator
• Working with Twitter cards