Making URLs look awesome when people share them

Slide 1

Slide 1 text

Dr Nic Williams https://mocralivelinks.com/ 27 July 2021 People want to share your website Making URLs look awesome when people share them

Slide 2

Slide 2 text

People want to share your website

Slide 3

Slide 3 text

Social apps will try visualise your URL

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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!

Slide 16

Slide 16 text

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/

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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