Recently, We were designing a mobile web view for the news article shared on the app. I simply choose AngularJs for the ease of use and flexibility it provies.
However, after complete implementation. When someone tried to share the story on Facebook, we saw this:
We were relying on Angular's interpolation to evaluate the meta tags which didn't work since AngularJs is entirely executed on client side. This caused facebook to show raw values i.e.
To solve this problem, we moved the meta tags evaluation to server side. Since we were using Java stack along with Spring, it was easy to do so. We made sure that our HTML markup was filtered through JSP tags. It was as easy as adding these directives on top of page:
Now with JSTL tags in place, we replaced the meta tags with JPS tags:
Before returning the JSP page through an API call, we evaluated these meta tags on the server side itself: