Twitter（X）分享机制

当你分享数据到 twitter 网站，会有爬虫机器人一直读取并且解析你的网站数据（meta 标签），所有要怎么让你的 meta 标签被读取呢？

首先我们会想到动态改变 meta 标签，由于我们是 spa 应用，所以在通过 js 动态解析是行不通的。

曲线救国

https://twitter.com/intent/tweet?text=${text}&url=${url}

其中 text 是分享文案，url 是具体的分享链接

如果仅仅是分享一个链接的需求，以上即可满足！但是需求往往是需要图文视频结合的。

如下是 twitter 爬虫会抓取的 meta 数据，支持文字、图片和视频：

1
2
3
4
5
6
7
8
9
10
11
12
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@nytimes" />
<meta name="twitter:creator" content="@SarahMaslinNir" />
<meta name="twitter:title" content="Parade of Fans for Houston’s Funeral" />
<meta
  name="twitter:description"
  content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here."
/>
<meta
  name="twitter:image"
  content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg"
/>

其中 twitter:image twitter:card twitter:title 是常用的元数据，具体参考链接：twitter 开发者文档

动态生成页面

需要后端动态渲染页面，我这边的做法是，后端提供一个接口接收 meta 元数据，然后拼接一个 html 返回给前端，前端就可以 直接使用 twitter 的分享链接 https://twitter.com/intent/tweet?text=${text}&url=${url} 替换其中的 url 即可。

具体的生成方法如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<?php
//如果传入image参数就生成相关的meta，以下几条类似
if(isset($_GET["image"])){
	$image=$_GET["image"];
	$meta_image_fb = '<meta property="og:image" content="'.$image.'" />';
	$meta_image_tw = '<meta name="twitter:image" content="'.$image.'" />';
}
if(isset($_GET["description"])){
	$description=$_GET["description"];
}
if(isset($_GET["title"])){
	$title=$_GET["title"];
	$meta_title = '<meta property="og:title" content="'.$title.'" />';
	$meta_title = '<meta name="twitter:title" content="'.$title.'" />';
}
if(isset($_GET["type"])){
	$type=$_GET["type"];
	$meta_type_fb = '<meta property="og:type" content="'.$type.'" />';
}
if(isset($_GET["url"])){
	$url=$_GET["url"];
	$meta_url_fb = '<meta property="og:url" content="'.$url.'" />';
	$meta_url_tw = '<meta name="twitter:url" content="'.$url.'" />';
}
//如果传入video参数就生成video相关的meta
if(isset($_GET["video"])){
	$video=$_GET["video"];
	$meta_video_fb = '<meta property="og:video" content="'.$video.'" /><meta property="og:video:type" content="video/mp4" /><meta property="og:video:width" content="487" />';
	$meta_video_tw = '<meta name="twitter:player" content="'.$video.'" />';
}
if(isset($_GET["card"])){
	$card=$_GET["card"];
	$meta_card_tw = '<meta name="twitter:card" content="'.$card.'" />';
}
?>
<!DOCTYPE html>
<html>
<head>
    <!-- 这段是移动端需要的meta设置，如果是pc请按需要做相关修改 -->
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=yes" name="">

	<?php echo isset($image)?$meta_image_fb:'' ?>
	<?php echo isset($url)?$meta_url_fb:'' ?>
	<?php echo isset($video)?$meta_video_fb:'' ?>
	<?php echo isset($title)?$meta_title_fb:'' ?>
	<?php echo isset($type)?$meta_type_fb:'' ?>
    <meta property="og:description" content="<?php echo isset($description)?$description:'' ?>" />

	<?php echo isset($image)?$meta_image_tw:'' ?>
	<?php echo isset($url)?$meta_url_tw:'' ?>
	<?php echo isset($video)?$meta_video_tw:'' ?>
	<?php echo isset($title)?$meta_title_tw:'' ?>
	<?php echo isset($card)?$meta_card_tw:'<meta name="twitter:card" content="summary" />' ?>
	<meta name="twitter:site:id" content="">
	<meta name="twitter:title" content="<?php echo isset($title)?$title:'' ?>">
	<meta name="twitter:site" content="">
	<meta name="twitter:description" content="<?php echo isset($description)?$description:'' ?>" />
	<meta name="description" content="<?php echo isset($description)?$description:'' ?>">
    <title><?php echo isset($title)?$title:'' ?></title>
    <script type="text/javascript">
        //如果希望用户点击了你的分享内容后跳转到特定页面
    	window.location.href="http://www.eaxmple.com/xxx.html";
    </script>
</head>
<body></body>
</html>

最后附上分享的结果

image-20240812183457360