如何使用 php 添加动态元标签

Question

我从 Laravel API 获取数据，我想显示动态元标题和描述，但是当我在检查元素中设置动态数据时，它会显示动态值，但不会在页面源中更新，并且在 Whatsapp、Facebook 等社交媒体上分享时也不会显示动态标题和描述。

这是我的代码..

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="theme-color" content="#084594" />
<meta property="og:title" id='metaTitle' content="Static Title">
<meta property="og:description" id='metaDescription' content="Static Description">

现在我正在使用 Jquery 更改它

<script>
$(document).ready(function() {
  const API = "<?= API ?>";
  $('#metaTitle').attr('content','Dynamic Title')
  $('#metaDescription').attr('content','Dynamic Description')
  function getCategory() {
   
    $.ajax({
      type: "get",
      url: `${API}/all_category`,
      success: function(response) {
        console.log("responseCat", response.category);
        $.each(response.category, function(key, item) {
          let cat = item.name.split(' ')[0];
          $("#filter").append(
            `<li data-filter=".${cat}"><a href="#">${item.name}</a></li>`
          );
        });
        isotopFilter();
      },
    });
  }

  function getPortfolio() {
    $.ajax({
      type: "get",
      url: `${API}/all_portfolios`,
      success: function(response) {
        console.log("responseCat", response.portfolio);
        $.each(response.portfolio, function(key, item) {
          let cat = item.category.split(' ')[0];
          let url_title = item.title.toLowerCase().replace(/[ ().]/g, '-');
          url_title = url_title.replace('--', '-');
          $(".masonry_wrapper").append(
            `<div class="col-md-4 col-sm-6 flex-active item ${cat}"><div class="tutorial_card"> <div class="service-content"> <a href="portfolio/${url_title}" > <h3>${item.title}</h3></a > </div><div class="read"> <a href="portfolio/${url_title}" class="btn btn-default" >View Portfolio</a > </div></div></div`
          );
        });
        isotopFilter();
      },
    });
  }

  
  getCategory();
  getPortfolio();
});

但它在 ctrl + u 页面源代码中显示静态标题和描述，但在检查元素中它随动态标题和描述而变化。 而且当共享页面时它显示静态标题和描述

Answer 1

正如@brombeer 在评论中已经指出的那样，大多数社交媒体和机器人并不关心客户端的更改（Javascript 在客户端计算机上执行）。

您需要使用 PHP 在服务器端设置元属性。

Answer 2

我已经使用 npm 包 @vueuse/head 在 laravel-vue 项目中实现了。

npm 安装@vueuse/head

Laravel 是一个强大的 PHP 框架，擅长后端开发，而 Vue.js 是一个流行的 JavaScript 框架，擅长创建交互式前端体验。将这些技术与 @vueuse/head 包相结合，使您能够有效地管理动态元标签。

文章中查找代码：

https://www.bitkaleido.com/blog/dynamic-meta-tags-in-laravel-vue-seo-optimized-3