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

Dr Nic Williams

July 28, 2021

More Decks by Dr Nic Williams

Other Decks in Marketing & SEO


  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?

    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

    View Slide

  7. Open Graph protocol
    • 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
    • Structured properties

    View Slide

  10. Open Graph protocol
    • Object Types

    • Example

    View Slide

  11. Facebook Debugger

    View Slide

  12. Facebook Debugger

    View Slide

  13. Facebook Debugger

    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
    • 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
    attened, static images

    • IDEA: Render in a browser, and save to image!

    View Slide

  16. Puppeteer/Chromium by Google
    • 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

    View Slide

  18. Dynamic HTML-based social images
    Using Puppeteer to render your images
    https://myapp.com/ normal website

    View Slide

  19. https://mocralivelinks.com/showcases
    normal website

    View Slide

  20. Showcasing dynamic social preview images

    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