Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Making URLs look awesome when people share them

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

Cb2b768a5e546b24052ea03334e43676?s=128

Dr Nic Williams

July 28, 2021
Tweet

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