我从 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 页面源代码中显示静态标题和描述,但在检查元素中它随动态标题和描述而变化。 而且当共享页面时它显示静态标题和描述
正如@brombeer 在评论中已经指出的那样,大多数社交媒体和机器人并不关心客户端的更改(Javascript 在客户端计算机上执行)。
您需要使用 PHP 在服务器端设置元属性。
我已经使用 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