社交分享预览

看看你的页面分享到Google、Facebook、X、LinkedIn、WhatsApp、Slack、Discord或Pinterest时是什么样子,修正被截断的内容,并复制可直接粘贴的Open Graph标签。

1. 页面信息

填写表单,或从页面代码中导入。

0 / 60
0 / 155
页面类型
分享图片

JPG、PNG、WebP或GIF。所选图片仅用于预览:生成代码还需要填写它的在线地址。

2. 预览

模拟各平台的显示效果:实际结果可能略有不同,但截断和裁剪的位置与实际相差无几。

Google

Eexample.comhttps://example.com › …
页面标题页面描述会显示在这里。

Facebook

example.com页面标题页面描述会显示在这里。

X

页面标题
来自example.com

LinkedIn

页面标题example.com

WhatsApp

页面标题页面描述会显示在这里。example.com
https://example.com10:24

Slack

example.com页面标题页面描述会显示在这里。

Discord

example.com页面标题页面描述会显示在这里。

Pinterest

页面标题Eexample.com

Pinterest会完整显示图片,不做裁剪。竖版图片(2:3,例如1000 × 1500 px)在那里占的位置更大,但在其他平台会被裁剪。

3. 检查与代码

需要修正的问题,以及要粘贴到页面中的标签。

  • 问题缺少标题没有标题时,各平台会自行从页面中拼凑一个。
  • 问题缺少描述各平台会从页面中截取一段文字,往往选得不好。
  • 问题暂无图片没有图片的链接点击量会少很多。建议准备一张1200 × 630 px的图片。
  • 待改进缺少页面地址og:url指定页面的正式地址,这样所有分享都会归到一起。

将它粘贴到页面的head部分。

填写表单即可生成代码。

关于社交分享预览

每当有人分享你的页面,社交平台就会显示一张卡片,上面有标题、描述和图片。这个工具让你在发布前先看到这些卡片,并生成为它们提供内容的标签。

让你的链接更好看

页面被分享时,每个平台都会显示一张包含标题、描述和图片的卡片。这些信息来自页面代码中的Open Graph标签。如果没有这些标签,卡片就会是空的,或者内容选得不好。

合适的长度

Google会在60个字符左右截断标题,在155个字符左右截断描述。1200 × 630像素(1.91:1)的图片在各处都显示良好:重要内容请放在中间,因为有些平台会裁剪图片。Pinterest更适合竖版图片。

可直接粘贴的代码

复制要放在页面head中的HTML标签,或Next.js网站用的元数据对象。上线后,各平台有时会把旧的预览缓存几天。

不会上传任何内容

预览是在你的浏览器中模拟的。你的图片和文字不会发送到任何地方。唯一的请求是加载你输入的图片地址,由你的浏览器发出。

开发

JWT解码器

查看JWT的头部、载荷和日期,并验证签名。

开发

SVG转HTML

将SVG转换为HTML、JSX和React。