如何为社交平台预览和 SEO 配置 Dapp

如何为社交平台预览和 SEO 配置 Dapp

设置元数据、图标和社交图像以在社交媒体网站和搜索引擎上显示 dapp 的指南。

塞巴斯蒂安·斯文森

ñ 哦，那 网络电脑 终于支持爬虫，100%链上运行的dapp可以被搜索引擎索引，并且可以读取它们的元数据在社交平台上生成卡片。

以下是我为社交媒体网站和 SEO 准备我的 Web 应用程序所做的事情列表，我正在分享这些内容，以便您也可以这样做。

请注意，我不是 SEO 专家。以下提示与搜索排名无关，而是与提取信息以进行展示的方式有关。

介绍

​要为项目配置最低限度的元数据，我们需要以下信息才能开始：

  • ​​​ 标题： 应用程序的名称，产品。
  • 描述： 它的标语，它朗朗上口的销售短语。
  • 图标： 用于生成网站图标的方形图像（注意复数）。
  • 社会形象： 另一张图片（比例 1.9:1）用于在 Twitter、Facebook、Discord、LinkedIn 等平台上生成卡片。

元标签

搜索引擎将他们抓取的内容用于索引、排名和渲染，但我知道他们仍然认为元标记在 HTML 也用于搜索索引。​​​

同样，社交平台的爬虫会寻找元标记来生成为任何共享链接显示的社交媒体内容。

这就是为什么我们必须为我们的 dapps 提供各种元标签和图像。

HTML 标签

​我们可以定义的最明显的一组信息可能是 <head /> ​​我们的 HTML 页面的容器。

我们可以——或者应该——设置一个​ <title /> ​同时也是一个​ <description /> ​​​.有时我也提供一个 <author /> ​​​.

另外两件事真的不应该忘记：

  1. 为文档设置与其内容相匹配的语言很重要。尽管与本教程不完全相关，但如果您提供西班牙语的元标记，例如，也可以将文档设置为这样。

  2. 如果你的内容在网络上是多余的——例如，在多个平台上写博客——或者如果你想表明多个页面实际上是相关的，那么提供​​​​ 典范 ​​链接通知搜索引擎他们不应该多次索引相同的内容。否则，可能会导致排名笔记降级（这是我的理解）。

    <title>纸莎草纸</title> <meta content="web3 上的博客" name="description" />

资源：

和：标签

​打开 Graph 元标记 - 或​ 和： ​ — 是控制我们的应用程序在社交平台上共享时如何显示的代码片段。它们控制当我们的 URL 在 Facebook、LinkedIn、Discord 等平台上共享时将显示的内容。

​有很多这些不同的标签，但我通常在我的网站和应用程序中只使用以下五个：

  1. ​​​​ 和：标题 ​：应用程序的标题，或者在多个页面的情况下，与页面内容相关的标题 - 例如，在博客的情况下，帖子的特定标题。

  2. ​​​ 和：描述 ​：与标题相同，但用于描述。

  3. 和：网址 : 内容的 URL。为了整合连接的数据，我在这里也应用了与规范 URL 相同的方法。

  4. 和：类型 ​：如果是博客文章，通常是页面或文章的​网站​。

  5. 和：图像 ​：社交图片的绝对 URL。 （请参阅“ 社会形象 ”下面的部分以获取有关其格式的更多信息。）

资源：

Sharing https://papy.rs on LinkedIn

推特：标签

虽然 Open Graph 标签也会被解释（我认为），但 Twitter 有自己的一组元标签。这就是为什么最好也提供这些来控制我们的应用程序在这个特定平台上共享时的显示方式。

有多种显示可能性。我通常设置以下属性来呈现“摘要卡”：

  1. 推特：卡片 ​：卡片的类型——推文。我喜欢使用​summary_large_image​，因为它最适合我提供的社交图像的大小。
  2. 推特：标题 ​：产品或页面的标题。
  3. 推特：描述 : 朗朗上口的短语。
  4. 推特：图片 ​：社交图片的绝对 URL。
  5. 推特：创作者 ：产品或其创建者的 Twitter 句柄。

值得记住的是，一条推文限制为 280 个字符，这适用于我们提供的信息。

 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
 <!-- Here same HTML tags as previous chapter -->  
 <!-- Here same og: tags as previous chapter -->  
  
 <meta content="summary_large_image" name="twitter:card" />  
 <meta content="Papyrs" name="twitter:title" />  
 <meta content="Blog on web3" name="twitter:description" />  
 <meta content="https://papy.rs/images/social-image.jpg" name="twitter:image" />  
 <meta content="@PapyrsApp" name="twitter:creator" />  
 </head>  
 </html>

资源：

  • ​https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image

​社会形象

提供社交图像受一个单一规则的约束：它应该提供一个绝对 URL - 即，它不应该提供一个绝对路径。爬虫不会正确解释这一点。

 <!-- This works -->  
 <meta content="https://papy.rs/images/social-image.jpg" name="twitter:image" />  
  
 <!-- This does NOT work -->  
 <meta content="/images/social-image.jpg" name="twitter:image" />

​关于格式和内容作为最佳实践，我建议创建一个 1200x628 像素以在所有设备上实现最佳尺寸并使用老式图像格式，例如​ PNG ​或​ jpg ​.

​说起来，它会在小屏幕和大屏幕上显示——所有屏幕只有一个图像。因此，在设计它时，值得牢记如何组合其内容，以使其在任何一种情况下都能达到最佳状态。

网站图标

网站图标不仅仅是旧的 favicon.ico 在过去的美好时光中，我们曾经设置在我们网站的根目录（）。当然，我们仍然应该为浏览器提供一个最喜欢的图标，但我们还必须考虑各种设备。供应商添加了各种定义图标的方法，这些图标将在我们的应用程序和网站添加到设备的主屏幕时使用。

此外，我们还可以设置一些新的元标记来指定其他功能——例如，定义将在移动设备上的浏览器 URL 栏周围应用的主题颜色。

为了生成这些数据，我进行如下操作：

  1. ​我设计了一个我导出到的图标​ PNG ​或​ jpg 采用方形格式——例如， 1080x1080 像素。

  2. 我前往 https://realfavicongenerator.net/ 并使用此工具为网站图标和主题信息生成一组数据。

  3. 虽然我可以在这里停下来，因为上述工具已经生成了所有必要的数据，我喜欢否决它生成的那些图标以提供更多风格——我自己的图标。这就是为什么我导出各种尺寸的图标（​ 48x48 ​, ​ 72x72 ​, ​ 96x96 ​, ​ 144x144 ​, ​ 192x192 ​, ​ 256x256 ​, ​ 384x384 ​和​ 512x512 ​像素）。

  4. 我将我的图标和生成的数据复制到我的应用程序的静态资产中。

  5. 最后，我将相关的元标记设置到我的 HTML 页面。

资源：​

A favicon displayed in the tab by Firefox

可屏蔽图标

虽然上面适用于大多数设备，但对于 Android 设备，最好也使用自适应图标（也称为“可屏蔽图标”）。它们在不同的设备型号上以各种形状显示应用程序图标。

我通常创建另一个我在帮助下塑造的图标 https://maskable.app/editor 最适合任何设备，并且我还导出了我在上一章中列出的所有各个维度。

资源：

网络应用清单

Web 应用程序清单是一个 JSON 文件，它告诉浏览器我们的 Web 应用程序以及它在安装在用户的桌面或移动设备上时的行为方式。

它应该由我们的智能合约以适当的 JSON mime 类型提供（ 应用程序/json ）。

​通称​ manifest.webmanifest 或 清单.json 并且从我们网站的根目录提供，这些文件包含与我们之前指定的相同的元信息，但还可以提供更多信息——例如，快捷方式和屏幕截图。

​即使在顶级目录中提供，也应该在 HTML 页面中引用。

 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
 <!-- Here same HTML tags as previous chapter -->  
 <!-- Here same og: tags as previous chapter -->  
 <!-- Here same twitter: tags as previous chapter -->  
 <!-- Here same favicons and other info as previous chapter -->  
  
 <link crossorigin="anonymous" href="/manifest.webmanifest" rel="manifest" />  
 </head>  
 </html>

​我之前列出的工具 - Favicon Generator - 提供了一个简单的最小 Web 应用程序清单，我用我的自定义图标进行了增强。

 {  
 “名称”：“纸莎草纸”，  
 "short_name": "纸莎草纸",  
 "start_url": "/",  
 "background_color": "#000000",  
 "theme_color": "#000000",  
 “显示”：“独立”，  
 “图标”：[  
 {"src": "icons/icon-48x48.png", "sizes": "48x48", "type": "image/png", " purpose": "any"},  
 {“src”：“图标/icon-72x72.png”，“尺寸”：“72x72”，“类型”：“图像/png”，“目的”：“任何”}，  
 {"src": "icons/icon-96x96.png", "sizes": "96x96", "type": "image/png", " purpose": "any"},  
 {"src": "icons/icon-144x144.png", "sizes": "144x144", "type": "image/png", " purpose": "any"},  
 {“src”：“icons/icon-192x192.png”，“尺寸”：“192x192”，“类型”：“图像/png”，“目的”：“任何”}，  
 {"src": "icons/icon-256x256.png", "sizes": "256x256", "type": "image/png", " purpose": "any"},  
 {"src": "icons/icon-384x384.png", "sizes": "384x384", "type": "image/png", " purpose": "any"},  
 {"src": "icons/icon-512x512.png", "sizes": "512x512", "type": "image/png", " purpose": "any"},  
 {  
 "src": "icons/maskable-48x48.png",  
 “尺寸”：“48x48”，  
 “类型”：“图像/png”，  
 “目的”：“可屏蔽”  
 },  
 {  
 "src": "icons/maskable-72x72.png",  
 “尺寸”：“72x72”，  
 “类型”：“图像/png”，  
 “目的”：“可屏蔽”  
 },  
 {  
 "src": "icons/maskable-96x96.png",  
 “尺寸”：“96x96”，  
 “类型”：“图像/png”，  
 “目的”：“可屏蔽”  
 },  
 {  
 "src": "icons/maskable-144x144.png",  
 “尺寸”：“144x144”，  
 “类型”：“图像/png”，  
 “目的”：“可屏蔽”  
 },  
 {  
 "src": "icons/maskable-192x192.png",  
 “尺寸”：“192x192”，  
 “类型”：“图像/png”，  
 “目的”：“可屏蔽”  
 },  
 {  
 "src": "icons/maskable-256x256.png",  
 “尺寸”：“256x256”，  
 “类型”：“图像/png”，  
 “目的”：“可屏蔽”  
 },  
 {  
 "src": "icons/maskable-384x384.png",  
 “尺寸”：“384x384”，  
 “类型”：“图像/png”，  
 “目的”：“可屏蔽”  
 },  
 {  
 "src": "icons/maskable-512x512.png",  
 “尺寸”：“512x512”，  
 “类型”：“图像/png”，  
 “目的”：“可屏蔽”  
 }  
 ]  
 }

资源：

站点地图.xml

站点地图有助于帮助搜索引擎了解应该抓取和索引哪些页面。虽然我认为这在单页应用程序的情况下不是那么有用，但我还是想提供这些信息。

 <?xml version="1.0" encoding="UTF-8" ?>  
 <urlset  
 xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"  
 xmlns:news="http://www.google.com/schemas/sitemap-news/0.9"  
 xmlns:xhtml="http://www.w3.org/1999/xhtml"  
 xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"  
 xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"  
 >  
 <url>  
 <loc>https://papy.rs/</loc>  
 <changefreq>每月</changefreq>  
 <priority>0.7</priority>  
 </url>  
      
 </urlset>

​​​​ 站点地图.xml ​ 是一个 XML 文件，因此它应该由我们的容器以适当的 mime 类型提供服务（​ 应用程序/xml ​)。它也应该在我们的 HTML 页面中被引用。

 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
 <!-- Here same HTML tags as previous chapter -->  
 <!-- Here same og: tags as previous chapter -->  
 <!-- Here same twitter: tags as previous chapter -->  
 <!-- Here same favicons and other info as previous chapter -->  
 <!-- Here link to web app manifest -->  
  
 <link href="/sitemap.xml" rel="sitemap" type="application/xml" />  
 </head>  
 </html>

资源：

机器人.txt

​此时我们设置了搜索引擎和社交平台所需的一切，但爬虫可能还无法读取这些信息。这就是为什么我们需要添加一个 机器人.txt 我们网站根目录下的文件来控制他们应该如何访问我们的内容。

​假设我们希望任何爬虫为我们所有的应用程序编制索引，我们可以通过定位所有应用程序来提供此类信息​ 用户代理： * 并允许一切 允许： / .

我们还可以提供指向我们站点地图和主机信息的 URL。

 用户代理： *  
 允许： /  
 站点地图：https://papy.rs/sitemap.xml  
 主持人：https://papy.rs

资源：

​总结

​要为社交媒体网站和 SEO 准备我们的 dapp，我们需要：

  1. 标题
  2. 描述或吸引人的销售目的
  3. 图标
  4. 社会形象

这些静态资产需要由我们的罐式智能合约提供服务，我们必须在以下位置设置元数据：

  • ​我们应用程序的所有 HTML 页面
  • Web 应用清单
  • 站点地图.xml

​并且我们不应该忘记通过定义 robots.txt 允许爬虫查看我们的内容。

​到无限和超越，
大卫​

​​更多精彩，关注我 推特

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/40162/39390109

posted @   哈哈哈来了啊啊啊  阅读(115)  评论(0)  编辑  收藏  举报
相关博文：
· 网页共享的工作原理
· 网页共享的工作原理
· 安卓-Web-应用开发入门指南-全-
· 社交媒体挖掘-一-
· HTML5-WebSocket-PHP-和-jQuery-实时-Web-应用-全-
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」
点击右上角即可分享
微信分享提示