当你第一次发布一个新的网站或博客时，你可能想马上和你的朋友和家人分享。但如果你没有设置好，他们只会看到一个无聊的链接。

即使预览加载了图像，也可能不是您想要看到的图像。但你可以解决这个问题。

一切都从元标记开始

元标记是不在网页上显示任何内容的HTML标记。它们位于HTML中的&lt；head&gt；&lt；/head&gt；标记中。当搜索引擎和其他服务，比如Facebook，阅读你的页面时，他们会从meta标签中获取目标信息。

社交媒体如何使用元标签？

元标签是你所需要的，让社会媒体和短信处理你的链接正确。例如，当你通过Facebook共享一个链接时，Facebook会跟随该页面的链接。然后，它阅读网页，试图找出什么是一切。

最重要的是，它试图找到标题、描述和图像。如果找不到这些，它只会显示一个简单的链接，没有任何装饰。为了让Facebook显示特定的标题、描述和图像，您需要添加特定的meta标记来告诉它要查找什么。

如果像Facebook和Twitter这样的社交媒体网站从你的网站上获得他们需要的信息，他们会创建一张卡片。如果一切都按计划进行，它应该像你所期望的那样。

相关：如何使用Python构建Twitter、Instagram和Reddit机器人程序

以纯html更改元标记

如果你用纯HTML或者前端框架构建网站，添加meta标签应该很简单。它们与标题、样式和脚本标记位于同一区域，如下例所示：

您可以看到已经有一些元标记。这些并不是让你的网站在链接中正确显示所需要的——它们只是一些低级的默认设置。

在wordpress中更改元标记

在WordPress中更改元标记更为重要。完整的说明将采取一个完整的指导。因此，下面有几个提示可以帮助您开始：

1. 如果你愿意编辑你的主题，meta标签应该位于标题.php当前主题的文件。
2. 如果你不能访问你的主题或者不想处理它，你可以用一个插件来改变你的元标签，比如高级元标签管理。

如果你有兴趣在这个平台上发布一个站点，那么看看最好的WordPress主机提供商吧。

如何创建facebook卡

现在你已经知道如何访问你的元标签，你可以开始编辑它们。以下是Facebook希望看到的最小标签：

title和description属性告诉Facebook要显示什么文本。URL属性可以链接到子页以进行特殊促销或a/B测试。

image属性应该是一个完整的地址，而不是相对于索引页/文件段. 使用的最佳图像大小是1200x628，因为这种大小在社交媒体网站和设备中是最兼容的。

如何创建twitter卡

Twitter卡与Facebook卡几乎相同，但有不同的meta标签。这就是Twitter元标记的样子：

title和description属性与Facebook的相同；image属性也遵循相同的规则。1200x628是一个很好的尺寸开始。

主要区别在于卡片的属性。本例使用“summary\u large\u image”创建一张看起来与Facebook的卡片大致相同的卡片。不过，Twitter还有其他选择。

如何确保预览看起来正确

你可以发布一条微博，并迅速删除它六次，直到你的卡正确。你也可以给自己发一条Facebook信息。但是这些方法有点笨拙。幸运的是，这两个服务都提供了一个方便的工具，使检查卡更容易。

Facebook有一个共享调试器。Twitter有一个卡片验证器。这两个工具的任务是让您看到链接是如何工作的；它们只是使用不同的名称。

你应该测试的其他方面

现在你的网站链接在两大社交网络上看起来很棒。很可能它在任何地方都很好看，但你应该仔细检查它是否好看。例如，如果您在图像的底部或顶部有信息，它可能会在移动设备上被剪辑。

可移动的

在你进一步研究之前，最好确保你的链接在**上看起来还不错。如前所述，您的图像可能会被剪辑在较小的屏幕上。前面显示的示例的图像太低，因此只能看到头部的上半部分。

短信和信使

这是一个简单的问题，就是用链接向自己发送一个文本（或者通过WhatsApp这样的服务发送消息）。您不必担心验证工具。很可能，如果在社交媒体应用程序中看起来不错，它在这里会很好看。

领英

如果你在个人网站上工作，你肯定希望它在LinkedIn上看起来不错。幸运的是，LinkedIn还提供了一个名为post inspector的验证工具。此外，你不必担心更多的元标签，因为LinkedIn使用Facebook的标签。

下一步要做什么

我们介绍的信息应该足以让你开始。但如果你想了解更多，请查看Facebook的标签指南或Twitter的标签页面。