Laravel、Blade 和 React js 添加元标记以在服务器端 SEO 上渲染

Question

我正在尝试在服务器端渲染元标记。所以我可以在共享链接上看到这个输出，如下所示：

我尝试了 React-Helmet，但它仅在加载时渲染。

我的控制器

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

刀片：

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

反应模块：

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>
)

}

当我们在浏览器上加载网站时，它的工作 100% 正确，这意味着它只在用户端渲染元。我想在服务器端渲染该网站。所以它变得用户友好。

Answer 1

你不能使用React来控制元数据在搜索引擎上的显示，因为js在你的根视图渲染之后处理这些事情。尝试通过将变量传递到根视图来更改根视图 (

app.blade.php

):

<meta name="title" content="{{ $title ?? 'App title' }}">
<meta name="description" content="{{ $description ?? 'App desc' }}">

共享这些变量以在控制器方法中查看：

...
  $post = Post::findOrFail($id);
  view()->share([
    'title' => $post->title,
    'description' => $post->desc,
  ]);
...

重新加载并查看源代码，您可以看到它们已在首次服务器加载时渲染。 我正在使用

Laravel

+

ReactJs

和

InertiaJs

。