Making URLs look awesome when people share them

If you operate a website or ecommerce/shopify store then you want your happy users to share your URLs with their friends via social apps Facebook, Apple iMessage, Whatsapp, Slack, and more. These social apps try to make your URLs look great. How does this work and how do you make sure your images look great?

Also, how can you create dynamic images that reflect the data in your database? Product names, pricing, five star ratings, and more?

In this slide deck we look at Open Graph protocol and the Puppeteer tools for generating images of HTML/CSS from your website. We also introduce some specific ideas for Ruby on Rails via the Grover library.

This talk combines with a live demo at https://mocralivelinks.com/open_graph_demo/plain_html

Transcript

1. Dr Nic Williams https://mocralivelinks.com/ 27 July 2021 People want to share your website Making URLs look awesome when people share them
2. People want to share your website
3. Social apps will try visualise your URL
4. How do social apps convert URL to card? https://www.realestate.com.au/sold/property-house-tas-low+head-136346458
5. … and is this the best card? ★No agency branding ★Only one image ★No price ★No house features
6. HTML and Open Graph metadata https://www.realestate.com.au/sold/property-house-tas-low+head-136346458
7. Open Graph protocol https://ogp.me/ • Enables "any web page to become a rich object in a social graph" • Basic metadata
8. Ruby on Rails & Open Graph protocol • Plain HTML • ERb tags
9. Open Graph protocol https://ogp.me/ • Structured properties
10. Open Graph protocol https://ogp.me/ • Object Types
 
 
 
 • Example
11. Facebook Debugger https://developers.facebook.com/tools/debug
12. Facebook Debugger https://developers.facebook.com/tools/debug
13. Facebook Debugger https://developers.facebook.com/tools/debug
14. What does Facebook want from images? Social apps all converged on same conventions • Use images with 1200 pixels wide or more, for high resolution devices • Use 1.91 to 1 aspect ratio (think: landscape, 2 to 1 ratio) • Examples: 1200 x 631, 1500 x 785 • Encode images in gzip and de fl ate • Pre-cache the image with Facebook Debugger or Graph API • Use og:image:width and og:image:height metadata tags • Change image URL to if changing image
15. How to create images for website? Website is HTML/CSS, why not image too? • It is inconvenient that you design website in HTML/CSS • But social preview images are fl attened, static images • IDEA: Render in a browser, and save to image!
16. Puppeteer/Chromium by Google https://pptr.dev/ • Node/JavaScript library to control browser • Generate screenshots, PDFs • Automate form submission • Extract live JavaScript data • Test Chrome Extensions • Test at https://try-puppeteer.appspot.com/
17. Grover Control Puppeteer with Ruby https://github.com/Studiosity/grover
18. Dynamic HTML-based social images Using Puppeteer to render your images https://myapp.com/ normal website https://myapp.com/ https://myapp.com/home/ogimage.png puppeteer https://myapp.com/home/ogimage
19. https://mocralivelinks.com/showcases https://mocralivelinks.com/showcases Example normal website https://mocralivelinks.com/livelinks/showcases.png puppeteer https://mocralivelinks.com/livelinks/showcases
20. Showcasing dynamic social preview images https://mocralivelinks.com/showcases
21. Summary Thinking about your future websites • Put your URLs into Facebook Debugger • Add Open Graph <meta> tags until Facebook is happy • Use HTML/CSS to design social images that match your website • Store them as images via Puppeteer • Do it in real time to include live data • https://mocralivelinks.com/ is providing this service for Shopify merchants