Alternative way to serve OpenGraph meta tags for Social Media & Marketing - VueJS / ReactJS

JS frameworks are getting more and more popular day by day. But these are not perfect, as a main issue today we will mention Marketing.

If you have ever developed any application using VueJS or ReactJS you may know that there is an issue with sharing the link, eg. on Facebook. Open Graph tags will not be parsed as Facebook bot can’t execute JS code to render your page with meta tags, in result you will see an empty card with a link without any specific title or image. Which isn’t good.

We came with an alternative idea of fixing this issue. But before that let’s talk about good practices for doing such things. 

Solution 1: SSR

Server-side rendering (SSR) is a popular technique for rendering a client-side single page application (SPA) on the server and then sending a fully rendered page to the client. This allows for dynamic components to be served as static HTML markup.

This approach can be useful for search engine optimization (SEO) when indexing does not handle JavaScript properly. It may also be beneficial in situations where downloading a large JavaScript bundle is impaired by a slow network.

Main issue: If you have already developed without SSR, it will require a huge amount of work to switch to SSR.

Solution 2: Prerender

The goal of this plugin is to provide a simple prerendering solution that is easily extensible and usable for any site or single-page-app built with webpack.

Main issue: You will have to manually set the list of all URLs to pre-render, so it is not suitable for dynamic websites.

So what to do if you have already developed your application via CSR and don’t want to switch to SSR ? We can give you an alternative solution, yes it is not perfect, but it can do his job well.

Solution 3: Redirect Technique

We will show it as an example of Apache2 Web Server and Facebook bot.

But you are free to do it in your way

First of all you will need to have a placeholder link on the backend which is opening a blank html page but with all Meta Tags set properly. Eg. it may be on api.example.com/page/example-page

Then you will have to open your JS apache config file eg. /etc/apache2/sites-available/project_vue.config, and add below code inside

<If "%{HTTP_USER_AGENT} == 'facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)'">

        Rewriteengine ON

        RewriteCond %{REQUEST_URI} event

        RewriteRule ^ https://api.example.com%{REQUEST_URI} [NE,R,L]

</If>

So inside the IF statement we are checking if requester is facebookbot, and if is true we are redirecting him to another subdomain, you are free to add any other bot to the statement.

We are done with front-end part, so lets move to backend.

Open your backend configuration of Apache2 eg. /etc/apache2/sites-available/project_api.config

And in this section we will do right the opposite of previous step

<If "%{HTTP_USER_AGENT} != 'facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)'">

        Rewriteengine ON

        RewriteRule ^ https://example.com%{REQUEST_URI} [NE,R,L]

</If>

As you may see we are checking if the requester is NOT facebookbot, redirect the user to our main domain.

That’s it, hope this helped you <3