Rich Link Previews in SMS

  • Updated

A rich link preview is the title, description and image that appear under a link in an SMS. Two things decide whether your link shows one: the Open Graph tags on the page you link to, and whether the Member has saved your Community number as a contact. This article covers how to set up both and how to fix a preview that is missing or showing the wrong image.

Who this applies to: Leaders who include links in SMS Campaigns. Setting up Open Graph tags needs edit access to the HTML of the page you link to, so you may need to ask your web developer. 

 

What is a rich link preview? 

A rich link preview replaces a bare URL in an SMS with the page's title, a short description and an image. It makes the link easier to recognize before a Member taps it.

Your preview depends on two separate things, and you need both:

  • The page you link to. It needs Open Graph tags that name the title, description and image. You control this.
  • The Member's phone. The preview only displays if your Community number is saved as a contact. Your Members control this.

What are Open Graph tags? 

Open Graph (OG) tags are metadata in the head of a webpage. They set the title, description and image that show when someone shares a link to that page. When you send a link in a Campaign, the OG tags on the destination page are what set the preview image.

 

Why do Members need to save your number? 

Links only display a preview when the sender's number is saved in the recipient's contacts. A Member who has not saved your number sees the link without a preview, even if your OG tags are correct.

 

Why should I use rich link previews? 

A link with an image and a title tells a Member what they will land on before they tap. Your Members opted in to hear from you, so a link they can recognize at a glance is easier to trust than a bare URL. A preview also lets you control what that first impression looks like, instead of leaving it to whatever the page happens to expose.

How do I use it?

Setting up Open Graph tags

  1. Open the HTML of the page you plan to link to.
  2. Add these four tags to the <head> section:
html
   <meta property="og:title" content="Your Page Title" />
   <meta property="og:description" content="A brief description of your page" />
   <meta property="og:image" content="https://example.com/path-to-your-image.jpg" />
   <meta property="og:url" content="https://example.com/your-page-url" />

  1. Replace the example values with your own. Each tag does one job:

    Tag What goes in it
    og:title The title of your content
    og:description A short description of your content
    og:image The full URL of the image you want to display
    og:url The URL of the page being shared
  2. Save and publish the page.
  3. Test your tags on platforms that support rich previews, and confirm the image you want is the one that shows. 

These limits affect the image and link:

Limit What to do
Image size Use an image at least 1200 x 630 pixels. 
Image format Use JPG or PNG.
Link match The URL in og:url should match the link you send in your message.

Updating the preview image

  1. Change the content value of the og:image tag to the URL of your replacement image.
  2. Save and publish the page.
  3. Clear any cached copies of the page, including your web server's cache and your content delivery network (CDN) cache. Cached copies can keep serving the old image.
  4. Test your tags again, as in step 5 of Setting up Open Graph tags.
  5. Send your Campaign with the link. 

Getting Members to save your number

  1. Open your Signup Confirmation message. 
  2. Add a line asking Members to save your number. For example: "Make sure to add me to your contacts too!"
  3. Save the message.

How Members save your number

Phone Steps
iPhone Tap the number, select Create New Contact or Add to Existing Contact, then save.
Android Tap the number, choose Add to Contacts, then save it as a new or existing contact.

 

How do I use it well?

  • Ask more than once. Remind your Members to save your number now and then, especially when you change numbers or bring on new Members. The preview depends on the saved contact, so a Member who skipped the signup reminder will not see previews until they save it.
  • Make the ask sound like you. A personal message reads as a real request. A generic one reads as a system notice and is easier to ignore.

Common questions

How do I make sure that my pictures and videos show up as a rich link preview?

Check these causes in order. The first one is the most common reason a Member does not see a preview.

Cause How to tell Fix
The Member has not saved your number Another Member who has saved your number sees the preview, and this one does not. Ask the Member to save your number. See Getting Members to save your number.
Your page has missing or incorrect OG tags The head of the page is missing one of the four tags, or the og:image URL does not load in a browser. Add or correct the tags. See Setting up Open Graph tags.
A cached copy is serving an old image The preview shows the previous image after you changed og:image. Clear your server and CDN caches. See Updating the preview image.

 

Why is my link preview showing the old image? {#common-questions-old-image}

A cached copy of your page is the most likely cause. Update the og:image tag, then clear your web server and CDN caches. The steps are in Updating the preview image.

Related articles