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
  2. … and is this the best card? ★No agency branding

    ★Only one image ★No price ★No house features
  3. Open Graph protocol https://ogp.me/ • Enables "any web page to

    become a rich object in a social graph" • Basic metadata
  4. 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
  5. 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!
  6. 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/
  7. 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
  8. 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