标签需要在服务器端呈现。
这里的其他答案似乎专注于纯 JS 解决方案。
对于那些在 .Net MVC 应用程序上工作的人，我的解决方案描述如下：
网站的主要入口点是通过Index()默认的 Home Controller的方法，如下所示：
//Home Controller
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
}
无论您输入什么 URL，它都会首先出现在此处。
关键是使用来自 HttpRequest 参数的 URL，通过将其馈送到 View 中，如下所示：
// Home Controller
public class HomeController : Controller
{
public IActionResult Index()
{
return View(Request);
}
}
首先，如果您的网站使用共享布局页面，请不要忘记在<head>标签内创建一个 RenderSection ，如下所示：
//Layout.cshtml
<head>
@RenderSection("meta", required: false)
</head>
现在在 中Index.cshtml，设置HttpRequest为视图模型，从请求路径中取出 URL 并<meta>根据需要将其放置在标签中（meta如果您制作了一个，请将其全部放在RenderSection 中）。
完整路径值的格式为"/pathName/"。
//Index.cshtml
@model Microsoft.AspNetCore.Http.HttpRequest
@section meta {
@if (Model.Path.Value.Contains("pathName"))
{
<meta property="og:url" content="https://mywebsite.com/@Model.Path.Value.Substring(1)" />
}
}
也可以做很多其他的事情。例如，我的网站有基于数据库 ID 的请求路径，即/pathName/45，所以我的工作看起来有点像这样：
//Index.cshtml
@model Microsoft.AspNetCore.Http.HttpRequest
@section meta {
@if (Model.Path.Value.Contains("pathName"))
{
MyWebsite.Models.DatabseContext db = new MyWebsite.Models.DatabseContext();
int itemID = int.Parse(Model.Path.Value.Substring(10, Model.Path.Value.Length - 10));
Item item = db.Items.Find(itemID);
<meta property="og:title" content="@item.Name" />
<meta property="og:description" content="@item.Description" />
<meta property="og:url" content="https://mywebsite.com/@Model.Path.Value.Substring(1)" />
<meta property="og:image" content="@item.ImageURL" />
}
}
有了这个，我可以为我的 React 网站的任何页面呈现非常详细和特定的元标记。到目前为止工作完美！