reactjs React Js中的动态Meta标签，没有Ssr，没有使用Helmet标签，只有前端

8yoxcaq7 于 2023-08-04 发布在 React

关注(0)|答案(2)|浏览(114)

我有一个问题，在我的项目中，我不能使用 * SSR， Helm * 和 * 后端，是可能的，我们可以使用动态Meta而不使用SSR和后端，如果我们可以只使用react js在前端，和 * 我已经尝试react helment，但它是不工作在我的项目，因为我的项目是非常大的，所以如果eny解决方案请给予我答案...
我已经尝试了许多解决方案和React库，但没有任何一个工作像... * Helm ，react-heam，react-heam-async，react-meta-tags，react-meta

reactjs

来源：https://stackoverflow.com/questions/73497519/dynamic-meta-tag-in-react-js-without-ssr-without-using-helmet-tag-and-only-fro

2条答案

按热度按时间

hgncfbus1#

我使用下面的程序实现了这一点，它对我很有效，
在react js public/index.html中编写PHP代码，仅基于文件顶部的url slug获取Meta标签

<?php
    
    $url = explode('/', $_SERVER['REQUEST_URI']);
    $meta = [];
    $meta = json_decode(file_get_contents('api_url'));

    
    //Add your API call by using file_get_contents or curl to take meta tags  value from backend
    
    ?>
    <!DOCTYPE html>
    -----
    -----
    ---
    <meta property="og:title" content="<?php echo $meta['title'];?>" />
      <meta property="og:description" content="<?php echo $meta['description'];?>" />
      <meta property="og:url" content="<?php echo $meta['url'];?>" />
      <meta property="og:image" content="<?php echo $meta['cover_image'];?>" />
      <meta name="twitter:card" content="summary_large_image" />

字符串
然后创建.htaccess文件，其中index.html福尔斯在服务器中，并在.htacess中编写下面的代码

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php [L]

型
然后按如下方式更新package.json

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build && sudo mv index.html index.php",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

型
现在它会成功的

赞(0）回复(0）举报 2023-08-04

t2a7ltrp2#

我不确定你想达到什么目的。这个概念分为两种选择。服务器端或客户端。
如果是客户端，你应该对 react-helmet 感到满意。你说你的项目很大。我不认为这与项目大小有关，可以动态地更改Meta。我认为为什么你不能完成react-helmet是因为你没有从你的index.html中删除静态 Meta 代码。发生的事情是，你可能会得到客户端动态Meta，它是从 Helm 生成的，但被来自index.html的静态元标记所取代。所以把它们取下来应该会很好...
现在来动态 SEO 为OG（开放图）Meta标签没有SSR。有一些预渲染动态Meta标签的包可能有助于解决您的问题，而无需在您的 React App 上实现SSR。

react-snap是您正在寻找的解决方案。
查看**THIS**讨论。
Strategies to SEO on React的
Using Express as backend的

赞(0）回复(0）举报 2023-08-04

我来回答

reactjs React Js中的动态Meta标签，没有Ssr，没有使用Helmet标签，只有前端

2条答案

相关问题

热门标签

最新问答