概述
PiNet 支持代表您的应用程序公开元数据标签。此功能最实用的用途是代理负责 Facebook Open Graph 和 Twitter Cards 缩略图的 HTML 元标签，这可以进一步提升您的应用程序的知名度和增长。
目前有两种方法可以使用该功能，在本文档的后续部分，我们将分别称之为frontend流程backend。
前端元数据支持
所有在 PiNet 注册的应用默认启用元数据支持选项。该frontend选项会像机器人一样从您的应用前端抓取数据，然后代表您发布这些数据。作为开发者，您只需确保在 HTML 文件中正确添加 meta 标签，无需担心 PiNet 如何抓取它们。metatags.io 是一个用于验证 HTML 文件的实用工具。如果您想要发布的meta标签已存在于该工具中，并且您选择了相应的流程，PiNet 也应该会自动抓取它们frontend。
元frontend数据支持对于以下类型的开发者来说是一个相关的选项：
a. 对公开整个应用程序的单一元数据集感兴趣，b. 对在开发 SSR 应用程序时公开每个页面的动态元数据感兴趣。
后端元数据支持
尽管该frontend流程非常简单，且对使用 Web 和 SSR 框架的开发人员所需的自定义配置极少，但对于单页应用程序 (SPA) 开发人员来说可能不太方便。因此，PiNet 还提供了一个自定义解决方案，该方案涉及backendPiNet 与您的应用程序之间的通信，以便如果您正在开发单页应用程序，则可以使您的页面动态生成元数据标签。
先决条件
使用backend元数据支持选项之前，必须先在 Pi 开发者门户应用中启用它。打开 Pi 开发者门户应用，选择要为其启用backendPiNet 元数据支持的应用，然后进入“PiNet 设置”。在“元数据支持类型backend”字段中选择该选项，并提供有效的后端 URL。
注意：在配置 PiNet 设置之前，该应用程序必须在 Pi 开发者门户中注册一个已验证的域名。
后端设置
选择元数据支持类型后backend，PiNet 会向您的后端端点发送 GET 请求，并将/pinet/meta?pathname=<encoded-pathname>URL 的路径名作为搜索参数传递。例如，对于使用 PiNet 子域名example（可通过`<URL>` 访问https://example.pinet.com）的 PiNet 应用程序，当https://example.pinet.com/faq/1使用 `<URL>` 时，PiNet 会向 `<URL>` 发送 GET 请求https://examplebackendurl.com/pinet/meta?pathname=%2Ffaq%2F1'，并期望收到PiNetMetadataDTO形状为 `<DTO>` 的响应。如果响应的 HTTP 状态码为 200 且形状正确，PiNet 将会对外公开元数据。
类型
PiNetMetadataDTO
PiNet 要求您提供PiNetMetadataDTO类型信息。DTO 顶层的所有字段都是可选的，因此如果您不想提供所有元数据详细信息，可以省略。但是，如果提供了某些嵌套类型，则需要您提供相应的必填字段。
在以下类型别名定义中，所有?键名后紧跟 `\` 的字段都表示可选字段。例如，`\`title?:表示可选字段，而 ` title:\` 则表示必填字段。
type PiNetMetadataDTO = {
title?: string;
description?: string;
authors?: null | Author | Array<Author>;
keywords?: null | string | Array<string>;
creator?: null | string;
publisher?: null | string;
formatDetection?: null | FormatDetection;
abstract?: null | string;
archives?: null | string | Array<string>;
category?: null | string;
classification?: null | string;
openGraph?: null | OGMetadata;
twitter?: null | TwitterMetadata;
icons?: null | string | Array<Icon> | Icons;
};下面列出了上述代码中使用的默认 HTML 元标记的特定类型别名PiNetMetadataDTO：
type Author = {
url?: string;
name?: string;
};
type FormatDetection = {
telephone?: boolean;
date?: boolean;
address?: boolean;
email?: boolean;
url?: boolean;
};
type IconDescriptor = {
url: string;
type?: string;
sizes?: string;
color?: string;
rel?: string;
media?: string;
fetchPriority?: "high" | "low" | "auto";
};
type Icon = string | IconDescriptor;
type Icons = {
icon?: Icon | Array<Icon>;
shortcut?: Icon | Array<Icon>;
apple?: Icon | Array<Icon>;
other?: IconDescriptor | Array<IconDescriptor>;
};OpenGraph
PiNet 允许您定义 OpenGraph 特有的元数据，这些元数据将代表您公开。其主要OGMetadata类型别名是可区分联合，其中type字段是判别因子。因此，如果定义了特定元数据，则某些OGMetadata联合成员允许您指定其他属性type。
type OGMetadata =
| OGMetadataWebsite
| OGMetadataArticle
| OGMetadataBook
| OGMetadataProfile
| OGMetadataMusicSong
| OGMetadataMusicAlbum
| OGMetadataMusicPlaylist
| OGMetadataMusicRadioStation
| OGMetadataVideoMovie
| OGMetadataVideoEpisode
| OGMetadataVideoTVShow
| OGMetadataVideoOther;
type OGMetadataBase = {
title?: string;
description?: string;
emails?: Array<string>;
phoneNumbers?: Array<string>;
faxNumbers?: Array<string>;
locale?: string;
alternateLocale?: Array<string>;
images?: OGImage | Array<OGImage>;
audio?: Array<OGAudio>;
videos?: Array<OGVideo>;
countryName?: string;
};
type OGMetadataWebsite = OGMetadataBase & {
type: "website";
};
type OGMetadataArticle = OGMetadataBase & {
type: "article";
publishedTime?: string;
modifiedTime?: string;
expirationTime?: string;
authors?: null | string | Array<string>;
section?: null | string;
tags?: null | string | Array<string>;
};
type OGMetadataBook = OGMetadataBase & {
type: "book";
isbn?: null | string;
releaseDate?: null | string;
authors?: null | string | Array<string>;
};
type OGMetadataProfile = OGMetadataBase & {
type: "profile";
firstName?: null | string;
lastName?: null | string;
username?: null | string;
gender?: null | string;
};
type OGMetadataMusicSong = OGMetadataBase & {
type: "music.song";
duration?: null | number;
albums?: null | string | OGAlbum | Array<OGAlbum>;
musicians?: null | string | Array<string>;
};
type OGMetadataMusicAlbum = OGMetadataBase & {
type: "music.album";
songs?: null | string | OGSong | Array<string | OGSong>;
musicians?: null | string | Array<string>;
releaseDate?: null | string;
};
type OGMetadataMusicPlaylist = OGMetadataBase & {
type: "music.playlist";
songs?: null | string | OGSong | Array<string | OGSong>;
creators?: null | string | Array<string>;
};
type OGMetadataMusicRadioStation = OGMetadataBase & {
type: "music.radio_station";
creators?: null | string | Array<string>;
};
type OGMetadataVideoMovie = OGMetadataBase & {
type: "video.movie";
actors?: null | string | OGActor | Array<OGActor>;
directors?: null | string | Array<string>;
writers?: null | string | Array<string>;
duration?: null | number;
releaseDate?: null | string;
tags?: null | string | Array<string>;
};
type OGMetadataVideoEpisode = OGMetadataBase & {
type: "video.episode";
actors?: null | string | OGActor | Array<OGActor>;
directors?: null | string | Array<string>;
writers?: null | string | Array<string>;
duration?: null | number;
releaseDate?: null | string;
tags?: null | string | Array<string>;
series?: null | string;
};
type OGMetadataVideoTVShow = OGMetadataBase & {
type: "video.tv_show";
};
type OGMetadataVideoOther = OGMetadataBase & {
type: "video.other";
};OGMetadata下面列出了上述不同联盟成员重复使用的类型别名：
type OGImageDescriptor = {
url: string;
secureUrl?: string;
alt?: string;
type?: string;
width?: string | number;
height?: string | number;
};
type OGImage = string | OGImageDescriptor;
type OGVideoDescriptor = {
url: string;
secureUrl?: string;
alt?: string;
type?: string;
width?: string | number;
height?: string | number;
};
type OGVideo = string | OGVideoDescriptor;
type OGAudioDescriptor = {
url: string;
secureUrl?: string;
alt?: string;
};
type OGAudio = string | OGAudioDescriptor;
type OGActor = {
url: string;
role?: string;
};
type OGSong = {
url: string;
disc?: number;
track?: number;
};
type OGAlbum = {
url: string;
disc?: number;
track?: number;
};Twitter 卡片
与支持 OpenGraph 协议类似，PiNet 允许您定义 Twitter 特有的元数据。其主要OGTwitterMetadata类型别名是可区分联合，其中字段是判别项。因此，如果定义了特定属性card，则某些OGTwitterMetadata联合成员允许您指定其他属性。card
type TwitterMetadata =
| TwitterMetadataBase
| TwitterMetadataCardSummary
| TwitterMetadataCardSummaryLargeImage
| TwitterMetadataCardPlayer
| TwitterMetadataCardApp;
type TwitterMetadataBase = {
title?: string;
description?: string;
creator?: string;
creatorId?: string;
images?: TwitterImage | Array<TwitterImage>;
};
type TwitterMetadataCardSummary = TwitterMetadataBase & {
card: "summary";
};
type TwitterMetadataCardSummaryLargeImage = TwitterMetadataBase & {
card: "summary_large_image";
};
type TwitterMetadataCardPlayer = TwitterMetadataBase & {
card: "player";
players: TwitterPlayerDescriptor | Array<TwitterPlayerDescriptor>;
};
type TwitterMetadataCardApp = TwitterMetadataBase & {
card: "app";
};
OGTwitterMetadata下面列出了上述不同联盟成员重复使用的类型别名：
type TwitterImageDescriptor = {
url: string;
secureUrl?: string;
alt?: string;
type?: string;
width?: string | number;
height?: string | number;
};
type TwitterImage = string | TwitterImageDescriptor;
type TwitterPlayerDescriptor = {
url: string;
width: number;
height: number;
};PiNetMetadataDTO验证工具
这PiNetMetadataDTO可能会变得相当复杂，您可能难以验证您提供的 DTO 是否能通过 PiNet 的内部验证。您可以使用PiNet上提供的表单来验证您的 DTO 是否有效。
Pi 打赏
微信打赏