开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

无法使用开放图形元标记从我的React next.js网站共享Facebook/Twitter内容

开放图形元标记（Open Graph Meta Tags）是一种用于在社交媒体平台上分享网页内容时，提供元数据的HTML标签。这些标签可以帮助社交媒体平台正确地解析和显示网页内容，包括标题、描述、图片等。

基础概念

开放图形元标记通常包括以下几种：

og:title：页面标题
og:description：页面描述
og:image：分享时显示的图片
og:url：页面的URL
og:type：内容的类型（如文章、视频等）

相关优势

更好的用户体验：确保用户在社交媒体上看到的是预期的内容。
提高分享质量：吸引更多点击和互动。
SEO优化：有助于搜索引擎更好地理解和索引页面内容。

类型与应用场景

文章类型：适用于博客、新闻网站等。
视频类型：适用于视频分享平台或包含视频内容的网站。
产品类型：适用于电商网站或产品展示页面。

常见问题及原因

标签未正确设置：可能是因为标签缺失或格式错误。
图片过大或格式不支持：社交媒体平台可能无法加载或显示过大或不支持的图片格式。
缓存问题：旧的元标记可能仍然被缓存，导致新的更改没有生效。

解决方案

检查并修正元标记

确保在<head>部分正确设置了开放图形元标记。例如：

<head>
  <meta property="og:title" content="Your Page Title" />
  <meta property="og:description" content="A brief description of your page." />
  <meta property="og:image" content="https://yourwebsite.com/image.jpg" />
  <meta property="og:url" content="https://yourwebsite.com/page" />
  <meta property="og:type" content="article" />
</head>

使用Next.js的Head组件

如果你使用的是Next.js，可以使用next/head组件来管理页面头部信息：

import Head from 'next/head';

function HomePage() {
  return (
    <div>
      <Head>
        <meta property="og:title" content="Your Page Title" />
        <meta property="og:description" content="A brief description of your page." />
        <meta property="og:image" content="https://yourwebsite.com/image.jpg" />
        <meta property="og:url" content="https://yourwebsite.com/page" />
        <meta property="og:type" content="article" />
      </Head>
      {/* 页面内容 */}
    </div>
  );
}

export default HomePage;

清除缓存

如果更改后仍然看不到效果，尝试清除浏览器缓存或使用不同的浏览器测试。也可以使用工具如Facebook Debugger来刷新缓存并检查问题。

图片优化

确保图片大小适中（通常建议不超过1200x630像素），格式为JPEG或PNG，并且可以通过HTTPS访问。

通过以上步骤，你应该能够解决无法使用开放图形元标记从React Next.js网站共享Facebook/Twitter内容的问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Next.js 中的 SEO

Next.js 是一个用于构建服务器呈现的 React 应用程序的框架，使用像 Next.js 这样的框架的好处之一是它可以很容易地针对搜索引擎优化您的应用程序。...此外，您还可以使用 next-seo，这是一个库，可让您轻松地将与 SEO 相关的元标记添加到您的页面，例如标题和描述标记，搜索引擎使用这些标记来了解您的页面内容。...使用 Next.js 的众多原因之一是为您的 React 应用程序改进了 SEO，其中一个重要部分是众多 SEO 元标记。...搜索引擎使用这些标签（例如标题和描述标签）来了解页面内容并将其显示在搜索结果中。 next-seo 提供了一组 React 组件，可用于将元标记添加到您的页面。...我们还可以使用此库添加其他元标记，例如 meta、twitter、jsonld 等。

4.4K3 0

WordPress SEO：配置Yoast和添加内容目录

网站管理员工具注册Google Search Console 使用HTML标记验证选项 Search Console提供的复制代码粘贴到Yoast中（SEO→常规→网站管理员工具）删除引号以外的所有内容...社交元数据自定义你的内容在Facebook/Twitter上共享时的外观… ? 在Yoast中，转到SEO → Social，然后在Facebook/Twitter选项卡下启用元数据。...现在，编辑页面/帖子，向下滚动至Yoast部分，单击共享链接（如下所示），你便可以将图像上传到Facebook（1200 x 628px）和Twitter（1024 x 512px）。...是的，这意味着如果你希望每个内容看起来都不错，则需要为每个内容创建2个图形。 ? 如果你要增加Facebook广告上的帖子，则可以使用Yoast控制广告文字。...如果你的Facebook标题无法立即使用，请尝试清除网站的缓存。我发现有时候更新新的Facebook标题/图像可能需要几天的时间。 11.

1.4K1 0

JavaScript 框架太多了？相反，是太少了

从最初轻狂粗暴的情绪化“表情包”到后来糟糕的网站，再到回归开放包容本心，我会深入反省自己一路上学到的教训，特别是如何在选择技术堆栈和框架之前先就项目提出正确的问题。...虽然当时的我年轻气盛、自信满满，但访客们的反馈和建议帮我开启了一段探索之旅。随着网站内容的持续发布，我开始意识到新的 JS 框架有其价值。...Next.js 和 Gatsby 使用的是默认为 SPA 的 React，所以并不完全适合我的用例。当然，我们可以想办法用 Next.js 或 Gatsby 生成静态站点，再将站点转换成多页应用程序。...但这些都属于变通手段，而且这些框架的静态构建其实无法使用服务器端渲染功能（至少截至撰稿时还不行），所以并不符合我的要求。...第二，Twitter 会根据用户的使用方式对技术做出调整和发展。特别是从 2017 年开始，移动端开始成为优先级最高的绝对中心。

2.6K3 0

Next.js 14 初学者入门指南（下）

在这样的背景下，Next.js 作为一个前沿的React框架，提供了一系列高级功能来满足开发者的需求，今天我们来介绍 Next.js 14 的第二部分。...如果在布局中定义，则适用于该布局中的所有页面；如果在页面中定义，则仅适用于该页面。元数据按顺序读取，从根级别到最终页面级别。...在社交媒体时代，一个吸引人的页面标题和描述可以大大增加内容的分享率。而Next.js提供的元数据API，让这一切变得简单而直接。...定义模板定义模板非常简单，你只需要创建一个默认导出的React组件，这个组件可以从template.js或template.tsx文件中导出。...如果你对今天的内容感兴趣，不妨点赞、关注、转发，并在评论区留下你的看法和问题。我非常期待你的反馈和互动！此外，不要忘了关注「前端达人」，我将不定期分享更多关于前端开发的技术文章、教程和最佳实践。

3701 0

2020前端性能优化清单（四）

最终的方法是设置某种渐进式引导[10]：使用服务器端渲染来快速获得第一个有意义的图形，同时还包括一些最少的必需的 JavaScript，以使可交互时间紧挨着第一个有意义的图形的绘制。...本质上，可交互时间（TTI）告诉我们从导航开始到可以可交互之间的时间。该指标是通过查看初始内容渲染后的前5秒窗口来定义的，在这个窗口中，没有 JavaScript 任务需要超过 50ms 的时间。...使用 Next.js[20]（React）或 Nuxt.js[21]（Vue）也可以立即获得完整的服务器渲染体验。该方法有其缺点。...结果是 TTFB 和 FCP 时间变少，并且我们缩短了交互时间和 FCP 之间的间隔。如果预期内容会发生很大变化，我们将无法使用该方法。另外，必须提前知道所有 URL 才能生成所有页面。...常见的假设是，如果许多站点使用相同的公共 CDN 和相同版本的 JavaScript 库或网络字体，那么访问者将使用已经存储在浏览器中的脚本和字体登陆我们的网站，从而大大提高了他们的体验。

3.4K2 0

React 19 差点拖慢整个互联网！核心团队紧急叫停

Adam Rackis 表示，我迫切希望 Vercel（一家维护 Next.js Web 开发框架的公司），特别是 React 核心团队能够理解这个问题的严重性。...他们在 https://kidsuper.world/ 的一个分支上更新了 React 和 Next 的 Canary 测试版本，该网站中使用到大量模型和纹理。...如果数据只用于单个组件，并且也不需要在组件间共享加载状态，那么直接查询数据而不使用 Suspense 可能是更加合适的做法。...这件事也引发了部分开发者对 React 长期以来没有与公众完全开放的沟通渠道的不满。...“React 需要一个允许即时通信的平台上的永久工作组（只需使用私人 Discord）我知道他们无法与公众建立完全开放的沟通渠道，但这至少可以覆盖一个服务不足的灰色地带，并为支持生态系统的声音 / 作者

5031 0

川普被关「Facebook监狱」，他宣布与小扎断交！

---- 新智元报道来源：Facebook 编辑：yaxin, Emil 【新智元导读】Facebook今年把特朗普的账号封了。昨天，还给这个禁令加上了一个期限：至少2年。...但是过度开放带来的负作用也随之而来，此前纽约时报就批评Facebook在不断发展的同时，平台上的仇恨言论、欺凌和其他不良内容也随之增长。...所以，对特朗普禁言的不仅有Twitter和Facebook，YouTube，Snapchat，亚马逊旗下的游戏流媒体网站Twitch都采取了切断账户访问，严格审查或封号的做法。...用户可以通过他们的电邮和手机号码注册，获得博文通知，据称还可以点赞，但是该功能一直还无法使用。用户还被允许把川普的博文分享到Facebook和Twitter上，但并不允许用户回复或参与讨论。...不幸的是，上线不到一个月的自制平台就关闭了。这一页面已经从特朗普的网站上删除，而且不会重新开放。为何关闭？在此之前已有外媒分析，特朗普的个人网站传播效果不佳。

3885 0

2023 年前端十大 Web 发展趋势

如今，无论你使用哪一种 JavaScript 框架，总能看到 SSR 的影子。其中最具人气的 Next.js 元框架就以 React.js 为基础。...Angular.js、React.js 以及 Vue.js 莫不如是——但最近两、三年，人们对使用元框架的服务器端渲染（SSR）越来越青眼有加。...从本质上讲，正是为了向用户提供更快的网站和 Web 应用程序响应速度，才最终催生出边缘无服务器这一技术分支。...如果 ChatGPT 自己在训练中也继续使用这些垃圾内容，后果将不堪设想。还有一些我觉得很重要，但未被列入十大的重要趋势。...马斯克开会当场解雇Twitter首席工程师：我有1亿多粉丝，他却说公众对我失去兴趣 15年做不好的代码搜索，用Rust重写搞定：GitHub声称能从此“改变游戏规则”

3K2 0

OpenNext进一步实现Next.js的真正可移植性

现在，Vercel 的首席产品官，负责监管 Next.js 的 Tom Occhino 曾在 Facebook 担任工程经理，“帮助创建了 React”。...“Next.js 诞生于同一时期，旨在为 React 添加一些功能，使其在 Facebook 之外也能很好地工作，”他告诉 The New Stack。...“如果我们没有在周围建立一些真正的开放治理，这可能会导致 React 的衰落。”...“如果我们没有在周围建立一些真正的开放治理，这可能会导致 React 的衰落，”Biilmann 警告说。...“没有理由我们不能将我们投入到维护适配器中的大量资源投入到上游贡献中。” “我确实希望 Next.js 本身能够从它被部署到很多其他地方的想法中受益。”

941 0

15 个 JavaScript 框架的全面概述

React 通常与其他库和框架结合使用，例如用于状态管理的 Redux、用于路由的 React Router 以及用于服务器端渲染的 Next.js。...SEO 友好：借助 Next.js 等服务器端渲染库，React 可以生成 SEO 友好的 HTML 内容，易于搜索引擎抓取。...SEO 友好：通过服务器端渲染和适当的元标记管理，Nuxt.js 可以实现更好的搜索引擎优化。搜索引擎可以轻松地对服务器呈现的页面内容进行爬网和索引，从而提高搜索结果的可见性。...通过利用 React 和 GraphQL 的强大功能，开发人员可以创建动态内容、实施高级数据源并高效处理大规模内容驱动的网站。...SEO 友好：Gatsby 的预渲染静态内容对于 SEO 非常有利，因为搜索引擎可以轻松抓取页面并为其建立索引。该框架还支持元数据管理并提供用于实施 SEO 最佳实践的工具。

8.1K1 0

Next.js 14：虽无新 API，但不乏重大变更

Next.js 14 解决了在传输页面内容的数据流之前，向浏览器发送相关视口、配色方案和主题的关键元数据这一难题。...部分已弃用的元数据选项将被新选项取代，以进一步推动改造效果。教育和社区 Next.js 的全新免费课程现已发布，涵盖从样式、字体与图像优化到数据库设置、错误处理等广泛主题。...Twitter 上出现了一张断章取义的截图：https://twitter.com/peer_rich/status/1717609270475194466 这个 Twitter 在网络中引发了不少争议...他以狗狗品类展示网站为例剖析了 React 元素的概念，并解释了如何让 RSC 与 SSR 紧密协作。...演讲涵盖了一系列从勉强可以接受、到堪称“大逆不道”的策略，例如通过 Server Actions 进行分页、使用 globalThis 作为 SSR 帮助程序，甚至使用 generator 函数来实现服务器到客户端的组件更新等

5412 0

如何在2023年开启React项目

最后，你将了解到针对不同需求的3种解决方案。「免责声明」：从个人开发者的角度来看，我完全支持React团队在其新文档中推动的框架/SSR议程。...并最终被Meta/Facebook使用使用Astro Astro[6]允许开发人员创建以内容为重点的网站。...由于它的群岛架构以及选择性混合，它默认给每个网站提供高效的性能。因此，SEO相关的网站从使用Astro中获益。...使用Astro的优点以内容为重点的网站性能 SEO 框架无关（比如React）使用Astro的缺点不为动态web应用程序做广告为什么可能不是React文档中的默认值框架无关 React不是Astro...如果Next.js不符合你的需求，但你仍然在寻找一个包含所有特性的SSR框架，请使用Remix。如果你想拥有一个以内容为重点的网站，请查看使用Astro小节。

4535 0

Next.js，到底为什么这样对我？

但是在使用过的所有框架中，Next.js 一直是非常让我头疼的。而且这几个月的情况一点都没好转。...其中的所有组件默认都是 React 服务器组件，所以会一直运行在服务器端。所有内容都会在服务器端渲染，然后作为纯 HTML 发给客户端。...你无法在中间件(middleware.ts)中使用 cookies()和 headers()！请给我们一个统一的 API 来和请求对象交互。...他们的开发者关系人员甚至 CEO 都联系过我，问我有没有任何可以改进的地方，我提到了 cookie 问题，但没有任何回应。我在 Twitter 上也@过他们多次。...其次，是 React 本身，特别是服务器组件的问题。React 仍然想要像一个库一样，但它显然已经是一个框架了。Next.js API 和 React API 在服务器端职责上的重叠混乱不堪。

5062 0

Nue：一个挑战Next.js的新静态站点生成器

然后我们有了 React，它使操作文档对象模型 (DOM) 的可重用组件成为默认设置。我们被告知使用声明式方法比命令式方法更好。...然后我们有了使用 React 构建的 Next.js（和 Vue.js），它默认使用服务器端渲染，但也允许使用客户端方法进行静态站点生成和 JAMstack。诸如此类。...这确实鼓励了设计主导的方法。Nue“目前未在 Windows 下进行测试或开发”，这取决于你站在哪一边，这要么没问题，要么不严肃。我总是从我的 MacBook 开始，所以这对我来说没问题。...这个网站速度很快，设计也很漂亮。这个模板项目，一个博客，对大小变化的反应很灵敏：我很期待看到这是如何组成的。但让我们先看看项目结构。...这很适合我，但可能会让更多代码优先的开发人员感到不安。让我们深入了解更多内容细节。Nue 文档站点似乎没有搜索功能，因此您需要使用 Google 来深入了解详细信息。

1331 0

JavaScript在移动端网站运行慢？咋办？

你可能会说：我们的用户都是用高端的手机和使用快速的网络。但是我们所谓的用户呢？——在使用“快速”的咖啡店的共享wifi或移动的车厢里访问我们的网站，他们的手机实际只能获取2G或3G的速度。...我们都清楚一个请求发送至服务器后，服务器会逐步返回一些HTML内容，在逐步解析渲染DOM时发现标记不同的资源（CSS,JavaScript）以及图片资源，然后完成这些文件的下载和处理。...检查分析您的用户访问行为至关重要，如果您无法购买太多中低端手机进行测试，你可以使用这个在线网站工具WebPageTest（webpagetest.org/easy），进行在线测试。.../lazy-loading.html Angular——https://angular.io/guide/lazy-loading-ngmodules 如果你正在使用React,我很高兴向您推荐推荐...Next.js[react](https://github.com/zeit/next.js/),Preact CLI(https://github.com/developit/preact-cli)

2.3K4 0

React项目SEO优化实战：掌握这些技巧，提升网站排名！

正文内容一、理解SEO的基本概念在深入讨论React项目的SEO之前，我们需要了解SEO的基本概念。SEO是通过优化网站结构和内容，提高网站在搜索引擎中的排名，从而吸引更多潜在客户的过程。...虽然这种方式为用户提供了丰富的交互体验，但可能导致搜索引擎爬虫无法正确解析页面内容，从而影响SEO效果。...实现SSR的方法有很多，其中最常用的是使用Next.js框架。Next.js是一个轻量级的React服务器渲染应用框架，它提供了丰富的API和配置选项，使得实现SSR变得简单而高效。...以下是使用Next.js实现SSR的基本步骤：1.安装next和react依赖：npm install next react react-dom2.在项目根目录下创建一个名为pages的文件夹，用于存放页面组件...确保每个页面都有独特且相关的标题、描述和关键词元数据，有助于提高搜索排名。在React项目中，可以使用react-helmet库动态设置页面的元数据。

6452 2

为什么用 React 一定要配合框架（Next，Remix）使用？

下面，我就来和大家分享一下 Leerob 的一些看法：分析互联网上前 10,000 个公开可访问的网站时，我们看到了一个有趣的趋势：现在约有 6% 的网站采用 React 框架 ¹。...使用基于最新 React UI 原语构建的开源 React 框架，是模拟 Facebook 开发人员用于构建世界上最大的 Web 应用程序的工具的最接近的方法。...尽管这是某些类型应用程序（特别是需要登录的应用程序）的有效模式，但 React 的广泛使用下，很多开发人员希望从服务器预渲染内容。预渲染是指提前生成 HTML，而不是在用户设备上运行生成。...还有其他的 React 框架，但这些是在前 10000 个网站中检测到的（通过检查 Next.js 的__next元素和 Gatsby 的___gatsby）。...顺便说一下，Next.js现在已经超过了 CRA。 ²：或者你可以使用 ChatGPT（它这网站使用 Next.js 构建，讽刺吧）完全使用 AI生成一个 React 网站。

9404 0

博客生成静态站点工具 Top 20

Next.js 是一个基于 React 框架的服务端渲染应用框架，它提供了许多功能，包括静态网站生成、服务器端渲染和动态网站生成等。...对于博客网站，可以使用 Next.js 静态生成功能来构建博客页面。...它还是 Facebook 开源计划的一个项目。 Docusaurus 是用 React 构建的。你可以使用所有的基本功能，像文档版本管理、文档搜索和翻译大多是预先配置的。...多种格式支持：Pelican 支持多种标记语言，包括 Markdown、reStructuredText 等。支持多语言：Pelican 支持多语言网站生成，您可以使用不同的语言编写网站内容。...React Static 是一个用于构建静态网站和应用程序的 React 框架，它允许开发者使用 React 组件来创建静态网站，并提供了一些工具和功能，帮助开发者更容易地构建和部署静态站点。

3.9K2 1

它改变了 JavaScript 的体系结构——Webpack 5 Module Federation

Externals 并不能有效或灵活地完成工作；Import maps 无法解决规模问题。我并不是要单独下载代码并共享依赖项，而是需要一个业务编配层，该层能够在运行时动态地共享模块，并有后备功能。...我们对开源社区的贡献：Module Federation 模块联合（Module Federation）允许 JavaScript 应用动态地从另一个应用中加载代码，然后在过程中共享依赖项。...假设网站的每个页面都是独立部署和编译的。我需要这种 micro-frontend 样式的体系结构，但是我们不希望在修改路由时重新加载页面。...App 1 配置：我将使用 App 1 中的应用容器 App。其他应用程序将会使用它。为此我将其 App 公开为 AppContainer。 App 1 还将使用来自另外两个联合应用的组件。...通过 Twitter 与我联系: https://twitter.com/ScriptedAlchemy 你也可以成为我的共同创作者。

2.1K2 0

Remix挑战Next.js成为React框架新宠

在这两款新兴框架中，Remix 是 Next.js 的更直接竞争对手，因为它们都基于 React 库(Astro 是框架无关的，用户不仅可以与 React 一起使用，还可以与 Vue、Svelte 等一起使用...React Router 创建于 2014 年，由当时 Twitter 的工程师 Jackson 和一家名为 Instructure 的公司的工程师 Ryan Florence 创建。...“2020 年，我们决定接管其余的技术栈，看看我们是否可以搭建一些从端到端更完整的东西，在 React Router 之上构建一个功能齐全的框架，”Jackson 说，“所以这就是 Remix。...我对 React 社区的恳求是，要意识到这里有很多好的想法。目前许多这些前沿的 React 想法的实现 [...] 是 Next.js。这些想法首次在 Next.js 中发布和讨论。”...“Ryan 和我构建 Remix 的全部意义——当我第一次看 Next 时，我甚至无法让它返回适当的状态码。对我来说，非常早期，[...] 就很明显，我们非常非常重视不同的事物。”

1521 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭