Dynamic Rich Content Preview for URL with Angular Prerender
We at Spatial Vision have embarked on a transformation journey for our IT Services. We had decided to create a new brand entity called Lapis to better market ourselves as an IT/Software company. Follow us on LinkedIn to know more about this transformation.
We needed to create a public website from scratch. For this, we wanted it to provide a rich content preview on various platforms such as Facebook, LinkedIn, Twitter, and Slack.
We had no idea where to start but we still did since “You don’t finish unless you start”.
- The first thing we did was started copying different URL’s and pasting to Slack to see what available options we have.
- And then View the page source and see what meta tags these sites had in place.
- And we slowly started to understand how each meta tag corresponds to an area that is rendered in Slack.
- Look below to see the screenshots using https://acloudguru.com/.
It was not clear to us what this og means, so a quick search showed us that this means Open Graph. According to the link:
“The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.”
Now that we had enough information it was time to try it out in our website. We added these meta tags to our Angular‘s index.html and deployed it to our dev and qa environments so we can begin the sharing on Slack (for starters). And we found out that nothing was being rendered in Slack but a bit of good news was that it was working on another platform.
So after we did a bit of code review, we could not come up with anything which would be causing a problem but we noticed that we had a very large inline style generated in the header since we were using Angular prerender and the meta tags were after that inline style so we just decided to put these meta tags as close to the top of the stack inside the head tag (making sure they are above the generated inline styles tag). And to our surprise that worked. Our suspicion was there might be a timeout for the bot to check the url’s meta tag and the bot was unable to find these meta tags within that time.
We were pretty satisfied with the result but it was a bit concerning that we had put an og:image meta tag as well but that was not rendering. But a quick search took us to this article. And from to the article we picked up these recommendations:
- The most frequently recommended resolution for an OG image is 1200 pixels x 627 pixels (1.91/1 ratio). At this size, your thumbnail will be big and stand out from the crowd. Just don’t exceed the 5MB size limit.
- If you use an image that is smaller than 400 pixels x 209 pixels, it will render as a much smaller thumbnail. It’s nowhere nearly as eye-catching.
- One thing you need to remember if you do this: lace your text, or the most significant part of it, in the middle of the image. This matters because Facebook trims the sides of thumbnails.
We got the marketing team involved, got the proper sized images we could use and replaced them in the website’s meta tags. And voila!!!
It looked like we had done enough to call it a day, but since we were too enthusiastic about it, we took it to the next level using the Angular’s Meta service to dynamically generate these tags for different pages. and we had another mini success for the day.
These are some of the online tools which we used for debugging:
Thanks for reading! Hope you enjoyed it. Feel free to add any comments.
