人们喜欢通过几种方式检查其网站上的元标记。我以前使用过Metatags.io ，但也有Hey Meta ，可能还有更多我不知道的东西。但是，正如老开发人员所说，他们都没有完全按照我的要求去做，所以我建立了自己的。
长话短说
我很久以前就使用 Netlify 函数启动了这个项目，但我不想被 Netlify 束缚，所以我回到了我一直做的事情：PHP。
后端非常简单：给定 URL，获取页面，然后使用DOMDocument提取元标记。这个例子是简化的，没有所有的错误处理，但你明白了。
$site = [
'charset' => null ,
'found' => [ ]
] ;
$contents = @ file_get_contents ( $url ) ;
$document = new \ DOMDocument ( ) ;
@ $document -> loadHTML ( $contents ) ;
$metaElements = $document -> getElementsByTagName ( 'meta' ) ;
foreach ( iterator_to_array ( $metaElements ) as $mel ) {
if ( $mel -> getAttribute ( 'charset' ) ) {
$site [ 'charset' ] = $mel -> getAttribute ( 'charset' ) ;
$site [ 'found' ] [ ] = 'charset' ;
}
}
header ( 'Content-Type: application/json; charset=utf-8' ) ;
echo json_encode ( $site ) ;
对于前端，在阅读了Blake 的文章后，我想尝试一下 Alpine——对于像这样的项目，我主要想根据现有数据切换一些东西，它是完美的。我初始化我需要的数据，大部分为空，然后当获取数据时，我可以将内容设置为勾选或填写。例如，这是预览卡代码：
< div class = " preview " >
< div
class = " preview-image "
:style = " `background-image: url(${site.image})` "
> </ div >
< div class = " preview-details " >
< div
class = " preview-details-title "
x-html = " site.title "
>
A Title
</ div >
< div
class = " preview-details-desc "
x-html = " site.description "
>
a description
</ div >
< div
class = " preview-details-site "
x-html = " site.host "
>
example.com
</ div >
</ div >
< div
class = " preview-details-fediverse disabled "
:class = " site.fediverse ? 'enabled' : 'disabled' "
>
< svg class = " icon " > < use xlink: href = " #mastodon " > </ use > </ svg >
< div > More from this person </ div >
</ div >
</ div >
x-html设置元素的内容， x-show仅显示已设置的元素， :style将规则作为 JS 运行，以便可以从数据（在本例中为站点图像）填充数据。
它准确地检查我关心的事情，仅此而已。我不检查 Twitter 的元内容，因为我从未使用过它，而且我怀疑它的相关性比以往任何时候都低。它会检查fediverse:creator标签，但不会验证您是否在 Mastodon 后端中正确设置了它。它使用Grandsans作为标题，因为它是一种可爱的字体。
请参阅此处的 Lens ，您可以在 GitHub 上查看源代码。
原文： https://rknight.me/blog/lens-meta-tag-checker-robbs-version/