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.

If you need to know more about React, Its recommended to join React JS Course Online today.

Feb 23, 2022 in Others by Kichu
• 19,050 points
844 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, 2022 by narikkadan
• 58,640 points

Related Questions In Others

0 votes
0 answers

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

I'm searching a fully working example about ...READ MORE

Feb 21, 2022 in Others by Kichu
• 19,050 points
280 views
0 votes
0 answers

Pre-rendering VS Server-side rendering for Angular SEO

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

Feb 14, 2022 in Others by Kichu
• 19,050 points
266 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, 2022 in Others by narikkadan
• 58,640 points
169 views
0 votes
1 answer

Pre-rendering VS Server-side rendering for Angular SEO which ones better

This article is perfect to explain the ...READ MORE

answered Feb 25, 2022 in Others by narikkadan
• 58,640 points
360 views
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,840 points
1,927 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,840 points
21,506 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,840 points
497 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, 2022 in Others by narikkadan
• 58,640 points
540 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, 2022 in Others by narikkadan
• 58,640 points
248 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP