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
   

   View Slide

2. People want to share your website
   

   View Slide

3. Social apps will try visualise your URL
   

   View Slide

4. How do social apps convert URL to card?
   https://www.realestate.com.au/sold/property-house-tas-low+head-136346458
   

   View Slide

5. … and is this the best card?
   ★No agency branding
   
   ★Only one image
   
   ★No price
   
   ★No house features
   

   View Slide

6. HTML and Open Graph metadata
   https://www.realestate.com.au/sold/property-house-tas-low+head-136346458
   

   View Slide

7. Open Graph protocol
   https://ogp.me/
   • Enables "any web page to become a rich object in a social graph"
   
   • Basic metadata
   

   View Slide

8. Ruby on Rails & Open Graph protocol
   • Plain HTML
   
   • ERb tags
   

   View Slide

9. Open Graph protocol
   https://ogp.me/
   • Structured properties
   

   View Slide

10. Open Graph protocol
    https://ogp.me/
    • Object Types

    

    

    

    • Example
    

    View Slide

11. Facebook Debugger
    https://developers.facebook.com/tools/debug
    

    View Slide

12. Facebook Debugger
    https://developers.facebook.com/tools/debug
    

    View Slide

13. Facebook Debugger
    https://developers.facebook.com/tools/debug
    

    View Slide

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
    

    View Slide

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!
    

    View Slide

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/
    

    View Slide

17. Grover
    Control Puppeteer with Ruby
    https://github.com/Studiosity/grover
    

    View Slide

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
    

    View Slide

19. https://mocralivelinks.com/showcases
    https://mocralivelinks.com/showcases
    Example
    normal website
    https://mocralivelinks.com/livelinks/showcases.png
    puppeteer
    https://mocralivelinks.com/livelinks/showcases
    

    View Slide

20. Showcasing dynamic social preview images
    https://mocralivelinks.com/showcases
    

    View Slide

21. Summary
    Thinking about your future websites
    • Put your URLs into Facebook Debugger
    
    • Add Open Graph 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
    

    View Slide