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

0 votes

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

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.

Feb 23 in Others by Kichu
• 19,040 points
143 views

1 answer to this question.

0 votes

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

answered Feb 24 by narikkadan
• 10,840 points

Related Questions In Others

0 votes
0 answers
0 votes
0 answers

Pre-rendering VS Server-side rendering for Angular SEO

i want to integrate an seo optimization ...READ MORE

Feb 14 in Others by Kichu
• 19,040 points
68 views
0 votes
1 answer

Pre-rendering VS Server-side rendering for Angular SEO

https://developers.google.com/web/updates/2019/02/rendering-on-the-web use this article it explains all about ...READ MORE

answered Feb 22 in Others by narikkadan
• 10,840 points
53 views
0 votes
1 answer
0 votes
1 answer

Error:Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag

Hello @kartik, It is happening because any where ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,720 points
1,741 views
0 votes
1 answer

How do you import a javascript package from a cdn/script tag in React?

Hello, Go to the index.html file and import ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,720 points
17,981 views
0 votes
1 answer

From php returning JSON to JavaScript

Hii @kartik, You can use Simple JSON for PHP. ...READ MORE

answered Jun 5, 2020 in Java-Script by Niroj
• 82,720 points
337 views
0 votes
1 answer

How implement SEO (Metatags) in Angular 2 (with Angular universal for rendering on server side)?

https://github.com/angular/universal-starter follow this repo among it there ...READ MORE

answered Feb 22 in Others by narikkadan
• 10,840 points
140 views
0 votes
1 answer

How implement SEO (Metatags) in Angular 2 (with Angular universal for rendering on server side)?

 in this https://github.com/angular/universal-starter you can see  angular-meta.ts service that handles ...READ MORE

answered Feb 26 in Others by narikkadan
• 10,840 points
112 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP