我通过惯性尝试使用头标签。
<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 运行后动态生成的
谢谢你。
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。
InertiaJS 现在提供该组件。这对于 SEO 相关的东西很有用。 https://inertiajs.com/title-and-meta