其他
如何为社交平台预览和 SEO 配置 Dapp
以下是我为社交媒体网站和 SEO 准备我的 Web 应用程序所做的事情列表，我正在分享这些内容，以便您也可以这样做。
请注意，我不是 SEO 专家，以下提示与搜索排名无关，而是与提取信息以进行展示的方式有关。
介绍
要为项目配置最低限度的元数据，我们需要以下信息才能开始：
标题：应用程序名称、产品名称。 描述：它的标语，它朗朗上口的销售短语。 图标：用于生成网站图标的方形图像（注意复数）。 社交图像：在 Twitter、Facebook、Discord、LinkedIn 等平台上用于生成卡片的另一张图片（比例 1.9:1）。
元标签
搜索引擎将它们抓取的内容用于索引、排名和呈现的目的，但我知道他们仍然考虑在 HTML 搜索索引中可用的元标记。
同样，社交平台的爬虫会寻找元标记来生成为任何共享链接显示的社交媒体内容，这就是为什么我们必须为我们的 dapps 提供各种元标签和图像。
HTML 标签
我们可以定义的最明显的一组信息可能是 <head /> 我们 HTML 页面容器中的 HTML 元素。
我们可以 - 或者应该 - 设置一个 <title /> 但也设置一个 <description />，有时我也提供一个 <author />。
另外两件事真的不应该忘记：
为文档设置与其内容相匹配的语言很重要，尽管与本教程不完全相关，但如果您提供西班牙语的元标记，例如，也可以将文档设置为这样。 如果你的内容在网络上是多余的 - 例如，在多个平台上写博客 - 或者如果你想表明多个页面实际上是相关的，那么提供 canonical 链接的相同的内容，否则，可能会导致排名笔记降级（这是我的理解）。
资源：
https://www.w3schools.com/html/html_head.asp https://developers.google.com/search/docs/crawling-indexing/consolidate-duplicate-urls
og：标签
Open Graph 元标记 - 或 og: - 是控制我们的应用程序在社交平台上共享时如何显示的代码片段，它们控制当我们的 URL 在 Facebook、LinkedIn、Discord 等平台上共享时将显示的内容。
有很多这些不同的标签，但我通常在我的网站和应用程序中只使用以下五个：
og:title：应用程序的标题，或者在多个页面的情况下，与页面内容相关的标题 - 例如，在博客的情况下，帖子的特定标题。 og:description：与标题相同，但用于描述。 og:url：内容的 URL，为了整合连接的数据，我在这里也应用了与规范 URL 相同的方法。 og:type：如果是博客文章，通常是页面或文章的网站。 og:image：社交图片的绝对 URL（有关其格式的更多信息，请参阅下面的“社交图像”部分）。
资源：
https://ogp.me/
推特：标签
虽然 Open Graph 标签也会被解释（我认为），但 Twitter 有自己的一组元标签，这就是为什么最好也提供这些来控制我们的应用程序在这个特定平台上共享时的显示方式。
有多种显示可能性，我通常设置以下属性来呈现“摘要卡”：
twitter:card：卡片的类型 - 推文，我喜欢使用 summary_large_image，因为它最适合我提供的社交图像的大小。 twitter:title：产品或页面的标题。 twitter:description：朗朗上口的短语。 twitter:image：社交图片的绝对 URL。 twitter:creator：产品或其创建者的 Twitter 句柄。
值得记住的是，一条推文限制为 280 个字符，这适用于我们提供的信息。
资源：
https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image
社交图像
提供社交图像受一个单一规则的约束：它应该提供一个绝对 URL - 即，它不应该提供一个绝对路径，爬虫不会正确解释这一点。
将格式和内容作为最佳实践，我建议创建 1200x628 像素图像以在所有设备上实现最佳尺寸，并使用老式的图像格式，例如 png 或 jpg。
说起来，它会在小屏幕和大屏幕上显示 - 所有屏幕只有一个图像，因此，在设计它时，值得牢记如何组合其内容，以使其在任何一种情况下都能达到最佳状态。
网站图标
网站图标不仅仅是 favicon.ico 我们过去在网站根部设置的美好旧时光，当然，我们仍然应该为浏览器提供一个最喜欢的图标，但我们还必须考虑各种设备。
供应商添加了各种定义图标的方法，这些图标将在我们的应用程序和网站添加到设备的主屏幕时使用。
此外，我们还可以设置一些新的元标记来指定其他功能 - 例如，定义将在移动设备上的浏览器 URL 栏周围应用的主题颜色。
为了生成这些数据，我进行如下操作：
我设计了一个图标，我可以方形格式导出到 png 或 jpg - 例如，1080x1080 像素。 我前往 https://realfavicongenerator.net/ 并使用此工具为网站图标和主题信息生成一组数据。 虽然我可以在这里停下来，因为上述工具已经生成了所有必要的数据，我喜欢否决它生成的那些图标以提供更多风格 - 我自己的图标，这就是为什么我导出图标的各种尺寸（48x48、72x72、96x96、144x144、192x192、256x256、384x384 和 512x512 像素）。 我将我的图标和生成的数据复制到我的应用程序的静态资产中。 最后，我将相关的元标记设置到我的 HTML 页面。
资源：
https://realfavicongenerator.net/
可屏蔽图标
虽然上面适用于大多数设备，但对于 Android 设备，最好也使用自适应图标（也称为“可屏蔽图标”），它们在不同的设备型号上以各种形状显示应用程序图标。
我通常会创建另一个图标，我在 https://maskable.app/editor 的帮助下塑造它以最适合任何设备，并且我还以我在上一章中列出的所有各个维度导出它。
资源：
https://web.dev/maskable-icon/ https://maskable.app/editor
网络应用清单
Web 应用程序清单是一个 JSON 文件，它告诉浏览器我们的 Web 应用程序以及它在安装在用户的桌面或移动设备上时的行为方式。
它应该由我们的智能合约以适当的 JSON mime 类型（application/json）提供。
通常命名 manifest.webmanifest 或 manifest.json 并从我们网站的根目录提供，这些文件包含与我们之前指定的相同的元信息，但还可以提供更多信息 - 例如，快捷方式和屏幕截图。
即使在顶级目录中提供，也应该在 HTML 页面中引用。
我之前列出的工具 - Favicon Generator - 提供了一个简单的最小 Web 应用程序清单，我用我的自定义图标进行了增强。
资源：
https://web.dev/add-manifest/ https://developer.mozilla.org/en-US/docs/Web/Manifest
Sitemap.xml
站点地图有助于帮助搜索引擎了解应该抓取和索引哪些页面，虽然我认为这在单页应用程序的情况下不是那么有用，但我还是想提供这些信息。
该 sitemap.xml 是一个 XML 文件，因此它应该由我们的容器以适当的 mime 类型（application/xml），它也应该在我们的 HTML 页面中被引用。
资源：
https://developers.google.com/search/docs/crawling-indexing/sitemaps/build-sitemap
Robots.txt
此时我们设置了搜索引擎和社交平台所需的一切，但爬虫可能还无法读取这些信息，这就是为什么我们需要 robots.txt 在我们网站的根目录添加一个文件来控制他们应该如何访问我们的内容。
假设我们希望任何爬虫索引我们所有的应用程序，我们可以通过定位所有 User-agent: * 并允许一切事情 Allow: / 来提供此类信息。
我们还可以提供指向我们站点地图和主机信息的 URL。
资源：
https://developers.google.com/search/docs/crawling-indexing/robots/create-robots-txt
总结
要为社交媒体网站和 SEO 准备我们的 dapp，我们需要：
标题 描述或吸引人的销售目的 图标 社交图像
这些静态资产需要由我们的容器智能合约提供服务，我们必须在以下位置设置元数据：
我们应用程序的所有 HTML 页面 Web 应用清单 sitemap.xml
并且我们不应该忘记通过定义 robots.txt 允许爬虫查看我们的内容。
更多冒险，请在推特上关注我：@daviddalbusco。
作者：David Dal Busco翻译：Catherine
- 往 期 推 荐 -
长按关注 IC 微信公众号
随时答疑解惑
＊添加小助手微信 comiocn 进交流社群