I have an admission to make. Social share images for Pika were broken on Twitter/X, LinkedIn, and Apple Messages for months. And it made me sad.
But in the past few months we got it fixed. And that made me very happy!
We really love our Pika social share images. They are pretty. They are readable. They reflect the theme chosen by the blogger. They're great! When they work.
One day we went to share one of our blog posts and noticed that Twitter/X wasn’t playing nicely with Pika. At the time that service had been repeatedly mucking with how it displayed links. Seemingly every week there was a new change. So we sat on it for a bit, but eventually we decided it was probably us, not them. Especially since a couple other services were also having issues.
We tried many and various things to fix it. I’ll share those below so we can get to the point…
The fix in our case was to make sure our server was returning the correct headers:
Content-Type: text/html; charset=utf-8
We arrived at this fix when a customer pointed out that our Content-Type differed from other working services.
Using the service HTTP Header Check,
they shared output from our server that showed:
Content-Type: */*; charset=utf-8
Most services were fine figuring this out. Twitter/X, LinkedIn, and Apple Messages were not fine figuring this out. Naturally I introduced this bug when fixing another bug. 🤦
What other things did we try?
Our twenty-nine-comment thread on Basecamp proves we tried just about everything.
- We compared line-by-line our
METAtags between Pika and various other blogs (including this one right here) - We tweaked those
METAtags about fifteen different ways for each little discrepancy that we detected - We read all the documents
- We tried the card validator
- We tried LinkedIn's post inspector
- We tried LinkedIn's support (they sent us to their developer forums who in turn said “not our problem” and sent us to an abandoned area of Stack Overflow 🙄)
- We tweaked our robots.txt
- We played with
charset=uft-8vscharset=us-ascii