Laravel Blade React js add the meta tag for rendering on server side SEO

Question

I am trying to render the meta tags on the server-side. so i can see this output on share link like this:

I tried React-Helmet but it's only rendering on load.

My Controller

public function home()
{
    return view('home');
}

Blade:

  <div class="post-list" id="booksList"></div>

React Module:

import React from "react";
import {Helmet} from "react-helmet";

export default function MetaTags(props) {
const { title , metas } = props

return (
    <div className="application">
    <Helmet>
        <meta charSet="utf-8" />
        <title>{ title ?? '' }-NicelyLogic</title>
        <meta name="robots" content="index, follow" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="language" content="English" />
        <meta name="title" content={title ?? ''+'-NicelyLogic'} />
        <meta name="robots" content="index, follow" />
        {
            metas.map(meta => {
               return (<meta name={meta.name} content={meta.content} />)
            })
        }
    </Helmet>
    </div>
)

}

It's working 100% correct when we load the site on browser that's mean it's only rendering metas on user side. I want to render the site on server side. So it become user friendly.

narikkadan · Answer 1 · Feb 24, 2022

use septia laravel side rendering and add SSR to it

use this code as a reference for the index.php and then update your server side code accordingly

<html lang="{{ app()->getLocale() }}"> <meta> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>{{ config('custom.title') }}</title> <meta name="description" content="{{ config('custom.description') }}"/> {{-- default meta tags, it should be updated with api request --}} <meta property="og:title" content="{{ config('custom.title') }}"/> <meta property="og:description" content="{{ config('custom.description') }}"/> <meta property="og:type" content="website"/> <meta property="og:url" content="{{url()->current()}}"/> <meta property="og:image" content=""/> <link rel="canonical" href="{{url()->current()}}"/> </head> <body> {!! ssr('build/js/server.js') ->fallback('<div id="frontend"></div>') ->render()!!} <script src="{{ asset(mix('build/js/client.js')) }}"></script> <script src="{{ asset(mix('build/js/server.js')) }}"></script> </body> </html