Inertiajs 添加开放图元标签{{ 产品名称 }}

问题描述 投票:0回答:2

我通过惯性尝试使用头标签。

<Head>
    <!-- HTML Meta Tags -->
    <title>{{ product.name }}</title>
    <meta name="description" :content="product.summary"/>

    <!-- Open Graph Meta Tags -->
    <meta property="og:url" :content="http://localhost/${product.slug}/${product.id}/`"/>
    <meta property="og:type" content="product"/>
    <meta property="og:title" :content="product.name"/>
    <meta property="og:description" :content="product.summary"/>

    <!-- Thumbnail Meta Tags -->
    <meta head-key="og:image" property="og:image"
          :content="`http://localhost/${product.thumbnail.path}-size-300.${product.thumbnail.mime}`"/>
    <meta property="og:image:width" content="300"/>
    <meta property="og:image:height" content="300"/>

    <!-- Locale Meta Tags -->
    <meta property="og:locale" content="en_MY"/>
    <meta property="og:locale:alternate" content="zh_CN"/>
</Head>

但是,Facebook 不会检测到此代码,因为它是在 javascript 运行后动态生成的

谢谢你。

vuejs3 facebook-opengraph inertiajs
2个回答
0
投票

2024 年 3 月: 我不想启用或切换到 SSR,所以就我而言,使用 PHP 作为后端(Laravel),我决定使用 session vars。

服务器端路由无需 SSR 的动态标签:

 <!-- Meta Tags -->
<meta name="description" content="{{ session('meta_description', 'Default Description') }}">
<meta property="og:title" content="{{ session('meta_title', 'Default Title') }}">
<meta property="og:description" content="{{ session('meta_description', 'Default Description') }}">
<meta property="og:image" content="{{ session('meta_image', 'Default Image URL') }}">
<meta property="og:url" content="{{ session('meta_url', 'Default URL') }}">
<!-- Add more OG tags as needed -->
@routes
@vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
@inertiaHead

Inertia 无法像 Next.js 那样只为单个页面启用 SSR。

https://inertiajs.com/server-side-rendering


-1
投票

InertiaJS 现在提供该组件。这对于 SEO 相关的东西很有用。 https://inertiajs.com/title-and-meta

© www.soinside.com 2019 - 2024. All rights reserved.