特定页面的React CRA - meta og标签(Spring Boot)
特定页面的React CRA - meta og标签(Spring Boot)
React CRA是指使用Create React App（CRA）工具创建的React项目。Create React App是一个官方支持的用于快速搭建React应用的脚手架工具，它提供了一套预配置的开发环境，使得开发者可以专注于编写React组件和业务逻辑。
meta og标签是一种HTML标签，用于定义网页的元数据，其中og表示Open Graph，是一种用于在社交媒体平台上分享网页内容的协议。通过在网页中添加meta og标签，可以指定网页的标题、描述、图片等信息，使得在社交媒体上分享网页时能够展示出更加丰富和准确的内容。
Spring Boot是一个用于简化Java应用程序开发的框架，它基于Spring框架，并提供了自动配置和约定大于配置的特性。Spring Boot可以帮助开发者快速搭建和部署Java应用程序，同时提供了丰富的功能和扩展性。
在特定页面的React CRA中使用meta og标签，可以通过在React组件中添加HTML的head标签来定义这些标签。具体步骤如下：
- 在React组件的render方法中，添加一个head标签，并在其中定义meta og标签，如下所示：
render() {
return (
<div>
<head>
<meta property="og:title" content="页面标题" />
<meta property="og:description" content="页面描述" />
<meta property="og:image" content="图片链接" />
</head>
{/* 其他组件内容 */}
</div>
);
}- 在Spring Boot中，可以使用Thymeleaf等模板引擎来渲染React组件，并将其嵌入到HTML模板中。在HTML模板中，可以使用Thymeleaf的语法来动态生成meta og标签，如下所示：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>页面标题</title>
<meta property="og:title" th:content="${pageTitle}" />
<meta property="og:description" th:content="${pageDescription}" />
<meta property="og:image" th:content="${pageImage}" />
</head>
<body>
<!-- React组件渲染的位置 -->
<div id="root" th:utext="${reactComponent}" />
</body>
</html>在上述代码中，${pageTitle}、${pageDescription}和${pageImage}是从后端传递给HTML模板的变量，可以根据实际情况进行设置。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云Serverless Cloud Function（SCF）：提供无服务器的云函数服务，可用于处理前端请求并生成动态的meta og标签内容。详情请参考：腾讯云Serverless Cloud Function（SCF）
- 腾讯云CDN加速：提供全球分布式的内容分发网络，可加速网页的访问速度，提高用户体验。详情请参考：腾讯云CDN加速
- 腾讯云对象存储（COS）：提供可扩展的云存储服务，可用于存储网页中的图片等资源文件。详情请参考：腾讯云对象存储（COS）
请注意，以上推荐的腾讯云产品仅供参考，具体选择和使用需根据实际需求和情况进行评估和决策。
相关·内容
我们希望在显示页面预览图像的社交媒体上共享链接。这个图像每次都可能不同。我们的应用程序是一个具有客户端渲染和Java Spring Boot后端的CRA。
这个是可能的吗？SEO对我们来说一点也不重要，因为它是一个B2B产品。我已经在有问题的页面上添加了React头盔。我读到过SSR用于此目的，但我们的应用程序不是以这种方式构建的，所以我们希望保持它的原样。我们只需要一个页面的OG meta标签，所以它更像是一个例外，而不是一个规则。下面是一个人为设计的例子：
const userData = useGetUser();
<Helmet>
<MainContaine
浏览 30提问于2021-03-12得票数 0
1回答
元标签未显示在标题中
、、、、
我正在使用umbraco，同时也在使用主页功能。我有一个母版页的几个模板，因为它的孩子。
我将以下元标签放入其中一个孩子的<head> (模板)中，以便在facebook分享中获得适当的缩略图。
<head>
<meta property="og:type" content="website">
<meta property="og:site_name" content="SITENAME">
<meta property="og:title&
浏览 17提问于2017-12-13得票数 1
回答已采纳
1回答
我使用React版本16.14.0和头盔插件来动态呈现meta标签 <meta property="og:url" content="..." data-react-helmet="true">
<meta property="og:type" content="website" data-react-helmet="true">
<meta property="twitter:card" content="summary_large_imag
浏览 211提问于2021-05-11得票数 1
如何在next js中使用NextHead并设置open graph标签。我正在传递来自详细页的道具，但它没有出现在源代码中。 <NextHead>
<title>{title}</title>
<meta property="og:type" content="website"/>
<meta name="description" content={description}/>
<meta property="og:title"
浏览 390提问于2019-04-24得票数 16
我正在开发一个简单的Facebook测试应用程序来学习React和NextJs。
我面临的问题是Facebook标签，当我分享用户的结果时，它会显示问答页面元标签，因为Facebook爬虫在添加新的元标记(基于用户提供的数据的带有答案的元标记)之前呈现html。如何将新的描述添加到元标记中。因为描述只有在用户单击“查找我的结果”按钮后才可用。
我使用react share和NextJs Head添加元标记。
因此，如果ShareResult变量有数据，则加载结果页，否则加载问题页。
{ShareResult ? (
<QuizResult response={ShareResult}
浏览 0提问于2020-12-20得票数 0
回答已采纳
<Helmet> <title>Best Hospital in India – Medical Tourism Company | Trusted hospitals</title> <meta name="title" content="Best Hospital in India – Medical Tourism Company | Trusted hospitals" /> <meta name="description" content="Listed with best
浏览 12提问于2019-06-28得票数 0
这是我在react应用程序中的meta标签，但在twitter分享中我看不到任何图片。我使用react-share库。 <meta property="og:url" content="https://test.com" />
<meta property="og:type" content="article" />
<meta property="og:description"content="Coding tales" />
<
浏览 197提问于2020-09-02得票数 0
我遇到了问题，添加一个喜欢的按钮，以iFrame为基础的页面在我的FB粉丝页标签。我正在使用FB和Open Graph来指定我希望用户“喜欢”的页面(这是我的JavaScript页面中的当前页面)。
该页面是基于iFrame的，是FB中的一个应用程序，并通过我的FB页面的FB页面选项卡访问。问题是Facebook将Like分配给我的FB页面本身(如果你愿意，我的FB页面主页)，而不是有问题的页面(我的测试页面-它被设置为一个应用程序，并以“og test”的名称出现在我的FB页面选项卡中)。
我试着通过FB linter运行iFrame的目标页面，它给出一个奇怪的错误，说我已经提供了“Othe
浏览 0提问于2011-09-05得票数 3
回答已采纳
这是我当前添加了meta标签的配置： {data? <Helmet>
<title>Site- {data.name ? data.name : ""}</title>
<meta charSet="utf-8" />
<meta name="twitter:card" content="summary_large_image" data-react-helmet="true" />
<meta name="
浏览 40提问于2021-09-01得票数 3
我的投资组合页面每个子页面都有单独的Meta标签，但我正在苦苦挣扎- facebook目前只刮掉了我的主页，任何人分享我的页面都会得到相同的meta图像和任何页面的title+description。该页面是在Gatsby中构建，并由Netlify托管
我已经使用来调试这个问题，但似乎没有什么工作。在Twitter上，所有的子页面都被正确识别。
如果我抓取，我在facebook分享调试器中得到以下重定向路径：
Redirect Path
Input URL arrow-right https://larsejaas.com/grafik
301 HTTP Redirect arr
浏览 17提问于2021-02-27得票数 0
2回答
我已经克隆了应用程序并尝试使用。通过检查浏览器，我可以看到meta标签值是存在的，但是当我在Facebook上发布URL并尝试查看这里的meta标签状态时，提示属性应该被传递。请任何人都可以建议这里哪里出了问题。
请找到我的组件代码，
import '../assets/stylesheets/base.scss';
import React, { Component } from 'react';
import Helmet from "react-helmet";
class App extends Component {
render
浏览 0提问于2016-11-29得票数 4
我正在尝试将og-image设置为CRA应用程序，并且我这样做：
<meta content="website" property="og:type" /> <meta content="%PUBLIC_URL%/og-image.png" property="og:image" /> <meta content="Tile goes here..." property="og:title" />
图像在pubic文件夹中，但该图像不显示在op上。
当我做http
浏览 0提问于2018-08-02得票数 4
2回答
渔获物在哪里：
Nginx作为角4应用程序的服务
角4元标签只从FB请求路径上的基href读取。
角路径可以是(例如)： name
Nginx是一个简单的设置：
root /home/web/dist;
index index.html index.htm;
location / {
expires -1;
try_files $uri $uri/ /index.html;
autoindex on;
}
在中，我有用于以下内容的写服务：
import { Meta } from '@angular/platform-browser';
在我更新Facebook
浏览 0提问于2018-01-24得票数 0
回答已采纳
我创建了一个组件SeoHeader来处理NextJs项目上的元标记创建
import React from 'react';
import Head from 'next/head';
import { useRouter } from 'next/dist/client/router';
const SeoHeader = ({ title, description, image }) => {
const router = useRouter();
return (
<Head>
<met
浏览 8提问于2021-10-18得票数 1
我一天中的大部分时间都在尝试自动化og:title和og:description标签。我有一个global.php文件，其中包含一些我希望在所有页面上使用的常见元标记。但是没有包含Title标签，我是按页来做的。我对meta description标签也做了同样的事情。因此，我们的计划是在全局文件中添加og:title和og:description，并使用一些PHP魔术自动填充它们，使其与<title>和<meta name="description"相同。
首先，我已经阅读了2个小时，试图实现标题之一，这里有另一篇文章的建议。我让这条线路工作了好几个月，以获
浏览 0提问于2020-05-24得票数 0
我想插入Facebook og:meta标签用于facebook分享器，在一个特定页面的头部，这个页面不是CMS页面。我正在考虑通过扩展布局文件添加这些标签。我知道一般的标题和描述都是像这样添加的->
<reference name="head">
<action method="setTitle"><title>My Module Page</title></action>
</reference>
magento是否为Facbook og:meta标签提供了
浏览 0提问于2012-08-24得票数 4
回答已采纳
3回答
我想在我的joomla网站上添加facebook打开的图形标签。我编辑了index.php并手动添加：
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content
浏览 2提问于2011-05-05得票数 4
回答已采纳
我试着在facebook上和React分享图片。我使用react-helmet npm动态添加了og:image标签，还使用react-snapshot预先渲染了构建。虽然查看源代码时，存在og:image URL，但当我尝试共享该图像时，它不会共享。
如果我在index.html中提供静态og:image URL，则facebook将按预期工作。我已经尝试了使用react-snapshot和添加meta标签的预渲染
import {Helmet} from "react-helmet";
fbshare1 = () => {
window.open(
浏览 44提问于2019-08-05得票数 5
回答已采纳
1回答
规范URL的使用
、、、、
我正在尝试设置og标签，以便在Facebook上共享我的子页面。
我的子页网址是: www.example.com/subpage.html。
Facebook的代码：
<meta property="og:title" content="some text">
<meta property="og:type" content="website">
<meta property="og:url" content="http://www.example.com/subpage.h
浏览 4提问于2015-09-06得票数 0
我的Gatsby React头盔Meta标签中的一些，但不是全部，似乎都被facebook弄丢了。代码如下： <Helmet>
<title>Code Championship | Code is Sport</title>
<meta name="description" content="Code is Sport. Competitive coding competitions for elementary, middle, and high school students." /
浏览 41提问于2019-01-01得票数 3
回答已采纳
1回答
当我在Facebook上发布链接时，页面内的图片从未加载过。我使用的是Facebook元标签：
<meta content='...' property='og:title'>
<meta content='...' property='og:description'>
<meta content='url to image' property='og:image'>
此外，我还尝试设置图像标记：
<meta property="og:image&#
浏览 4提问于2013-06-24得票数 1
1回答
我目前正在使用由express提供的react为社交共享预览实现动态元标签。我正在关注这个项目：
控制器部分：
app.get('/item/:itemId/about', function(request, response) {
const id = request.params.itemId;
const filePath = path.resolve(__dirname, './build', 'index.html')
fs.readFile(filePath, 'utf8', function (err,
浏览 20提问于2021-07-31得票数 0
1回答
是否可以在同一页面上使用多个类似facebook的按钮，但共享不同的数据。
我知道我可以用下面的代码设置og:image，og:title动态
jQuery('.item-facebook').hover(function()
{
var image_url = $(this).parent().parent().parent().find('.item-left .photo-url').attr('src');
jQuery('meta[property="og:image"]&
浏览 2提问于2013-06-24得票数 0
1回答
我正在使用facebook的og meta标签作为一个“喜欢”按钮。我在developers.facebook.com上看到，在注册了50个赞之后，og:title标签不会更新。我的问题是，如果我的站点的url (在og:url中)是...等，这些参数采用不同的值，但来到相同的页面something.do？-它仍然被视为一个页面还是将它们视为两个不同的urls？
例如1. 2.
1&2会被视为来自同一页面还是不同页面的likes？
感谢你的帮助。
浏览 3提问于2012-02-01得票数 0
回答已采纳
我正在尝试添加一些og标签，facebook将获取这些标签，从我在网上找到的信息来看，听起来angular universal现在已经被合并到angular中了，而且应该可以通过使用平台浏览器库来实现。
我在angular的支持下开始了一个全新的.net核心项目。它创建了3个角度组件，我希望我可以测试并设置og标签- counter.component.ts，fetchdata.component.ts和home.component.ts。下面是我在counter.component.ts构造函数中的一个示例。
constructor(private meta: Meta) {
thi
浏览 0提问于2018-03-29得票数 0
1回答
我有一个带有head标记的母版页，它使用一些<%=%>标记来加载一些内容，比如css、js和favicons。我希望动态地构建og元内容，如
<meta property="og:title" .../>,
<meta property="og:description" .../>
<meta property="og:image" .../> etc
这些数据内容将从每个内容页生成，并希望将其放在page head元素中。
到目前为止，我尝试的是- in母版页加载事件。
System.Web.
浏览 6提问于2021-05-18得票数 0
1回答
带react的连杆弹簧靴
、、、、
我按照教程使用react和spring boot创建了一个web应用程序。
我遵循了完全相同的步骤，但在我的react应用程序中，我介绍了webpack。react应用程序已启动并正在运行。
pom.xml文件如下所示：
<?xml version="1.0" encoding="UTF-8"?>
4.0.0
<groupId>com.example</groupId>
<artifactId>ema</artifactId>
<version>0.0.1-SNAPSHOT</ver
浏览 0提问于2017-04-27得票数 1
因此，我使用react头盔插件添加元标记到HTML的头部，当页面呈现时，每个其他标记都正常工作，除了图像标记，它继续呈现对象而不是图像本身。以下是我的SEO组件的代码：
SEO.js
import React from "react";
import { graphql, useStaticQuery } from "gatsby";
import { Helmet } from "react-helmet";
import { useLocation } from "@reach/router";
function SEO(p
浏览 7提问于2022-09-19得票数 0
回答已采纳
有没有办法在我的网站头部验证Facebook Open Graph协议元标签？下面的代码。
<meta property="og:title" content="my content" />
<meta property="og:type" content="company" />
<meta property="og:url" content="http://mycompany.com/" />
<meta property="og:image&#
浏览 0提问于2011-01-17得票数 4
回答已采纳
我有一个SPA (单页应用程序)，并使用prerender.io缓存页面的搜索机器人。我使用以下代码(例如描述和og.description)从代理api中动态生成元标记：
var decriptionmetatag = document.createElement('meta');
decriptionmetatag.setAttribute('name', 'description');
decriptionmetatag.content = description.innerText;
document.getElementsB
浏览 15提问于2022-09-15得票数 0
我使用Gatsby + Netlify部署了一个博客。我目前正在使用react-helmet在每个博客帖子上填充适当的meta标签。 由于某些原因，Facebook Open Graph没有检测到属于博客的元标签，并且默认使用主页的元标签。 这是我从Facebook Debugger得到的： The following required properties are missing: og:url, og:type, og:title, og:image, og:description, fb:app_id 这就是我点击的结果--看看我们的抓取器到底看到了你的网址是什么：The docume
浏览 55提问于2019-09-26得票数 4
当用户单击Facebook共享时，我希望共享一个链接为"og:image“按钮的图像，而不是共享该图像。
我已经为Facebook共享按钮添加了一些元标签，如下所述。
<meta property="og:url" content="https://www.mydomain.co/" />
<meta property="og:type" content="website" />
<meta property="og:title
浏览 6提问于2020-04-29得票数 0
3回答
使用lxml高效解析元标签？
、、、、
我正在用lxml解析HTML页面。页面的meta标签如下所示：
<meta property="og:locality" content="Detroit" />
<meta property="og:country-name" content="USA" />
如何使用lxml高效地查找每个页面上的og:locality元标记的值？
我目前得到了以下内容，它只是根据属性手动匹配meta标签：
for meta in doc3.cssselect('meta'):
prop = me
浏览 0提问于2011-11-16得票数 10
回答已采纳
将youtube视频放入meta标签是很容易的。但我正在尝试将facebook页面的视频放入og:video meta标签中。但是，视频没有显示出来。有什么想法吗？
<!-- https://developers.facebook.com/docs/sharing/webmasters#media -->
<meta property="og:url" content="http://homemaidapp.com/apps/rfsn/test2.php" />
<meta
浏览 3提问于2016-04-08得票数 1
我的应用程序有3页，我使用的是元标记，每个页面都有自己的元标记，我使用了头盔--当我点击菜单选项时，metatags更改正确，但是我想在Facebook和Twitter上共享我的页面，我部署在vercel上，我复制了Facebook和Twitter上的URL和粘贴，但是什么都没有发生，我看不到来自metatags的标题描述和图像，从前面可以这样做吗？如果代谢是动态的，会发生什么？谢谢你的帮助。
部署应用程序：沙箱：
import React from 'react';
import Helmet from 'react-helmet';
function Ho
浏览 15提问于2022-01-21得票数 2
我在这个地址有一个超级英雄问答游戏：mysite/index.html，，小测验有两个可能的结果，mysite/result1.html和mysite/result2.html.每个结果页都有打开的图形标记，如下所示：
<meta property="og:type" content="website" />
<meta property="og:title" content="Great you are Superman" />
<meta property="og:description&
浏览 2提问于2015-06-18得票数 1
回答已采纳
我使用Nuxt.js生成静态页面。我希望每个页面都有一个唯一的<title>标签和<meta property="og:title" ... >标签。
目前执行情况
我目前有一个丑陋的解决方案来生成这些标记。我有两页是这样的：
pages/foo.vue
export default {
head: {
title: 'Foo',
meta: [
{
property: 'og:title',
content: 'Foo',
},
浏览 5提问于2019-12-06得票数 2
回答已采纳
在我的cakephp项目的developer.ctp文件中，我实现了og:tags。我已经完成了四种类型的测试。当我添加一个新的帖子时，我想实现每个帖子都应该有如下的og标签：
<meta property="og:type" content="discussion" />
<meta property="og:url" content="URL" />
<meta property="og:title" content="any title" />
<me
浏览 0提问于2013-02-27得票数 3
1回答
我想知道是否有人能解释社交媒体丰富的预览如何定义选择哪个og:title。
我使用wordpress，对于某些页面，我插入php回显字符串将它们注入到<head>中。我选择这样做是为了将某些标题和描述转换为更多的商业文本。值得注意的是，有两个og:title元标签；我的注入一个和Wordpress后端页面标题。
有一次，我被告知，<head>顶部的第一个元标记将被选择为thémeta标记，用于丰富的预览(例如)，但这似乎不再发生了。
下面是我当前的情况和<head>中元标记的确切顺序
<html>
<head>
<me
浏览 3提问于2019-03-14得票数 5
回答已采纳
我有角4网页应用程序。在这里，我需要分享一些帖子，链接到包含缩略图预览的URL中。
我所做的是：正在使用index.html页面的静态元信息&在导航到另一个页面时，我正在更新元信息。在那一页上，我把帖子分享给linkedin。成功地能够与og:image共享url，但是缩略图预览包含来自主index.html的og:image。
下面是index.html元信息：
<meta name="title" property="og:title" content="Title Example">
<meta property=
浏览 0提问于2019-04-23得票数 1
我在reactjs方面是个新手。当我分享一个链接时，它应该会显示图像。我尝试使用react- meta -tags依赖来更新meta标签，但不起作用，但它正在更新文档标题，但对图像无效。我尝试使用react-document-meta，但不起作用。请帮帮我 ? import React from "react";
import "./styles.css";
import MetaTags from "react-meta-tags";
export default function App() {
return (
<
浏览 19提问于2020-04-14得票数 0
我想在一个没有外部库的简单javascript组件上添加元标记。我将它添加到useEffect钩子中如下所示：
useEffect(() => {
const ogTitle = document.createElement('meta');
const ogImage = document.createElement('meta');
const ogDescription = document.createElement('meta');
if(classPage?.name) {
浏览 0提问于2021-06-18得票数 0
回答已采纳
1回答
我已经把这些元标签放在一个我正在工作的网站上。然后，我有了一个“共享此页面”类型的特性，内容作者可以使用og标记覆盖出现在共享窗口中的默认内容，og标记在Facebook上运行良好，但是Twitter不起作用。
<meta property="og:image" content="test test test" />
<meta property="og:title" content="test title goes in here" />
阅读一下，我可以看到，它显示了，倒车是我已经拥有的og标签。我也读
浏览 1提问于2014-02-20得票数 2
回答已采纳
我正在用Laravel和AngularJS做一个网站。我在我的网站上写了下面的meta标签。我需要在AngularJS中获取动态值。请帮帮我。
<meta property="og:type" content="article" />
<meta property="og:title" content="TITLE OF YOUR POST OR PAGE" />
<meta property="og:description" content="DESCRIPTION OF
浏览 0提问于2017-10-03得票数 0
我使用prerender.io服务器端呈现角单页应用程序。
添加ngMeta依赖项并动态添加标题和描述元标记。
添加了带有所有URL的sitemap.xml文件
将该站点添加为控制台上的一个属性。
使用prerender.io呈现页面
标题和描述标签显示在页面视图源中，如下所示：
<meta name="description"
content="{{ngMeta.description}}">
<meta name="robots" content="noodp" />
&
浏览 1提问于2017-04-18得票数 0
回答已采纳
我创建了一个简单的php模板。
在header.php中，我有以下代码行：
<!DOCTYPE HTML>
<html lang="en"><head>
<meta charset="utf-8">
<title><?php echo $title ?></title>
<meta name="description" content="<?php echo $description ?>">
<link rel=&
浏览 2提问于2016-07-24得票数 0
回答已采纳
1回答
我需要为Pinterest富销生成以下元标签:标准价格-所以Pinterest知道产品是否在销售，货币当前价格产品的颜色。
我对Pinterest文档感到困惑:developers.pinterest.com/rich_pin_product/
有一个例子：
<meta property="og:price:amount" content="15.00" />
<meta property="og:price:standard_amount" content="20.00" />
<meta prop
浏览 1提问于2014-10-07得票数 0
回答已采纳
我使用prerender.io服务器端呈现角单页应用程序。
到目前为止完成了以下步骤。1.动态添加ngMeta依赖项，动态添加标题和描述元标记。2.添加了包含所有URL 3的sitemap.xml文件，并在Google控制台上添加了站点作为属性。4.使用prerender.io呈现页面
标题和描述标签显示在页面视图源中，如下所示：
<meta name="description"
content="{{ngMeta.description}}">
<meta name="robots" content="nood
浏览 0提问于2017-04-18得票数 0
回答已采纳
我有一个自定义的扩展，并在详细的记录页，我想要建立皮条客的配置文件网站。我也在使用tx_metaseo。
我已经通过这样的表演来改变“标题”标签：
/**
* action show
*
* @param Application $record
* @return void
*/
public function showAction(Application $record=null) {
// For the search
$GLOBALS['TSFE']->indexedDocTitle = $record->getNa
浏览 0提问于2018-07-05得票数 1
回答已采纳
我知道如何为我的帖子和类别页面设置标题标签和元描述，因为它们来自数据库，但我在KeystoneJS中找不到其他页面的更新位置--主页、博客等等。
下面是我为我的元数据使用的工具栏代码。不是“文章”的每一页都在底部使用最后的其他选项。
{{#if data.post}}
{{#if data.post.meta.title}}
<title>{{data.post.meta.title}}</title>
<meta property="og:title" content="{{data.post.me
浏览 3提问于2016-11-19得票数 1
回答已采纳
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
腾讯云开发者
