Jump to content

Why do Squarespace sites create really tiny open-graph SEO images in Slack?

Recommended Posts

Posted

Site URL: https://opinionx.co

As a SaaS startup, we are active in a bunch of Slack-based communities that are relevant to our target customers and also use Slack for internal comms too. 

Whenever I share a link in Slack for a non-Squarespace site, it loads the site preview with a large image. Whenever I share a link to a Squarespace website, the Open-Graph image is really tiny and is placed to the right-hand side rather than beneath. 

Does anyone know why this is? I've also tried it with a bunch of other Squarespace sites (found via this link) and the same happens for all of them. Is there any fix for this or does Squarespace just not have up-to-date Open-Graph API integration?

Images attached below showing normal website pitch.com versus Squarespace website opinionx.co.

26-08.PNG

  • Replies 3
  • Views 915
  • Created
  • Last Reply
Posted

Try adding Twitter's "Summary Card with Large Image" meta tags to the page, using code injection. For some reason Squarespace doesn't do this by default.

For your homepage, the code would look something like this (replace the parts in caps)

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@YOUR-TWITTER-HANDLE">
<meta name="twitter:title" content="PAGE-TITLE">
<meta name="twitter:description" content="META-DESCRIPTION">
<meta name="twitter:image" content="https://images.squarespace-cdn.com/content/5e22fb8d8524a16d5bd5683c/1629916794384-47XCJWB3ASMFS3SGE17Q/OpinionX+Open-Graph+Image+2021.png?format=1500w&content-type=image%2Fpng">

Not 100% but I'm guessing that will get you the desired result. This is based on Slack's API documentation which seems to prefer to use Twitter image markup for full size images in link previews.

 

--

Blue Hills Digital
Support with website optimization and finding a digital marketing strategy that works.

Latest resource: Website Audit Checklist for 2021 [Template and 15-Step Guide]

Posted

Thanks for the DIY solution, Ed!

I played around with implementing it just now, but given that the problem seems mostly confined to Slack and that I'd have to do a custom implementation for each page (particularly on the blog), I've decided that I'll just leave it as is.

Pity that Squarespace doesn't have this set up for websites properly already, but I've got plenty of other fish to fry. Thanks for the help 🙂

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.