wearejust/kirby-meta-tags

为 Kirby 3 生成的 HTML 元标签。

维护者

详细信息

github.com/wearejust/kirby-meta-tags

主页

源代码

安装数: 8,010

依赖者: 0

建议者: 0

安全性: 0

星标: 5

关注者: 0

分支: 11

类型:kirby-plugin

3.0.1 2023-03-13 15:15 UTC

Requires

MIT 3d68875118b61442cf13db32bdf637888421428e

  • Cees van Egmond <cees.vanegmond.woop@wearejust.com>
  • Sietse Veenman <sietse.veenman.woop@wearejust.com>
  • Duncan Pronk <duncan.pronk.woop@wearejust.com>

JSON-LDopen-graphmeta-tagstwitter-cardskirby-plugin

This package is auto-updated.

Last update: 2024-09-13 18:18:19 UTC

README

为 Kirby 生成的 HTML 元标签。支持开箱即用的 Open Graph、Twitter Cards 和 JSON Linked Data。

要求

  • Kirby 3
  • PHP 8.0

安装

下载

下载并将此存储库复制到 site/plugins/meta-tags。

Composer

composer require wearejust/kirby-meta-tags

基本用法

安装 Meta Tags 插件后，您需要将一行代码添加到模板的 head 元素或 header.php 片段中

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
+   <?php echo $page->metaTags() ?>

默认情况下，metaTags 页面方法将一次性渲染所有标签组。但您也可以一次渲染一个标签

<?php echo $page->metaTags('title') ?>

或指定要渲染的标签

<?php echo $page->metaTags(['og', 'twitter', 'json-ld']) ?>

默认

插件包含一些默认元标签，方便您使用

return [
    // other options...
    'wearejust.meta-tags.default' => function ($page, $site) {
        return [
            'title' => $site->title(),
            'meta' => [
                'description' => $site->description()
            ],
            'link' => [
                'canonical' => $page->url()
            ],
            'og' => [
                'title' => $page->isHomePage()
                    ? $site->title()
                    : $page->title(),
                'type' => 'website',
                'site_name' => $site->title(),
                'url' => $page->url()
            ]
        ];
    }
]

wearejust.meta-tags.default 选项应用于您 Kirby 网站上的所有页面。当然，您可以更改默认设置。为此，只需将此示例复制到您的 site/config/config.php 文件，并根据您的网站需求进行调整。

模板

遵循 Kirby 的灵活精神，您还可以添加特定于模板的元标签

return [
    // other options...
    'wearejust.meta-tags.templates' => function ($page, $site) {
        return [
            'song' => [
                'og' => [
                    'type' => 'music.song',
                    'namespace:music' => [
                        'duration' => $page->duration(),
                        'album' => $page->parent()->url(),
                        'musician' => $page->singer()->html()
                    ]
                ]
            ]
        ];
    }
]

在上面的示例中，这些设置将仅应用于模板为 song 的页面。

有关所有可用的 meta、link、Open Graph 和 Twitter Card 标签的更多信息，请参阅这些资源

选项

Both the wearejust.meta-tags.default and wearejust.meta-tags.templates accept similar values

wearejust.meta-tags.default

它接受一个包含以下键之一的数组：title、meta、link、og 和 twitter。除了 title 外，所有其他组都必须返回一个键值对数组。请参阅标签组部分，了解每个键接受的值类型。

'wearejust.meta-tags.default' => function ($page, $site) {
    return [
        'title' => 'Site Name',
        'meta' => [ /* meta tags */ ],
        'link' => [ /* link tags */ ],
        'og' => [ /* Open Graph tags */ ],
        'twitter' => [ /* Twitter Card tags */ ],
        'json-ld' => [ /* JSON-LD schema */ ],
    ];
}

wearejust.meta-tags.templates

此选项允许您定义一组特定于模板的元标签。它必须返回一个数组，其中每个键对应于您要针对的模板名称。

'wearejust.meta-tags.templates' => function ($page, $site) {
    return [
        'article' => [ /* tags groups */ ],
        'about' => [ /* tags groups */ ],
        'products' => [ /* tags groups */ ],
    ];
}

当键与当前页面模板名称匹配时，它将合并并覆盖在 wearejust.meta-tags.default 选项上定义的任何重复属性，这样您就不必重复定义。

标签组

这些组接受字符串、闭包或数组作为它们的值。由于其灵活性，元标签的功能几乎无限。

title

对应于 HTML 的 <title> 元素，并接受一个 string 作为值。

'title' => $page->isHomePage()
    ? $site->title()
    : $page->title(),

您还可以传递一个返回 string 的闭包，如果生成 title 的逻辑更复杂。

meta

放置任何通用 HTML <meta> 元素的正确位置。它接受一个键值对数组。返回值必须是 string 或闭包。

'meta' => [
    'description' => $site->description(),
    'robots' => 'index,follow,noodp'
],
显示 HTML 👁

<meta name="description" content="Website description">
<meta name="robots" content="index,follow,noodp">

link

此标签组用于渲染HTML的<link>元素。它接受一个键值对array。返回值可以是string、array或closure。

'link' => [
    'stylesheet' => url('assets/css/main.css'),
    'icon' => [
      ['href' => url('assets/images/icons/favicon-62.png'), 'sizes' => '62x62', 'type' =>'image/png'],
      ['href' => url('assets/images/icons/favicon-192.png'), 'sizes' => '192x192', 'type' =>'image/png']
    ],
    'canonical' => $page->url(),
    'alternate' => function ($page) {
        $locales = [];

        foreach (kirby()->languages() as $language) {
            if ($language->code() == kirby()->language()) continue;

            $locales[] = [
                'hreflang' => $language->code(),
                'href' => $page->url($language->code())
            ];
        }

        return $locales;
    }
],
显示 HTML 👁

<link rel="stylesheet" href="https://pedroborg.es/assets/css/main.css">
<link rel="icon" href="https://pedroborg.es/assets/images/icons/favicon-62.png" sizes="62x62" type="image/png">
<link rel="icon" href="https://pedroborg.es/assets/images/icons/favicon-192.png" sizes="192x192" type="image/png">
<link rel="canonical" href="https://pedroborg.es">
<link rel="alternate" hreflang="pt" href="https://pt.pedroborg.es">
<link rel="alternate" hreflang="de" href="https://de.pedroborg.es">

og

在这里可以定义<meta>的Open Graph元素。

'og' => [
    'title' => $page->title(),
    'type' => 'website',
    'site_name' => $site->title(),
    'url' => $page->url()
],
显示 HTML 👁

<meta property="og:title" content="Passionate web developer">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Pedro Borges">
<meta property="og:url" content="https://pedroborg.es">

当然，您可以使用Open Graph的structured objects。让我们看看一篇文章的例子

'wearejust.meta-tags.templates' => function ($page, $site) {
    return [
        'article' => [ // template name
            'og' => [  // tags group name
                'type' => 'article', // overrides the default
                'namespace:article' => [
                    'author' => $page->author(),
                    'published_time' => $page->date('Y-m-d'),
                    'modified_time' => $page->modified('Y-m-d'),
                    'tag' => ['tech', 'web']
                ],
                'namespace:image' => function(Page $page) {
                    $image = $page->cover()->toFile();
    
                    return [
                        'image' => $image->url(),
                        'height' => $image->height(),
                        'width' => $image->width(),
                        'type' => $image->mime()
                    ];
                }
            ]
        ]
    ];
}
显示 HTML 👁

<!-- merged default definition -->
<title>Pedro Borges</title>
<meta name="description" content="Passionate web developer">
<meta property="og:title" content="How to make a Kirby plugin">
<meta property="og:site_name" content="Pedro Borges">
<meta property="og:url" content="https://pedroborg.es/blog/how-to-make-a-kirby-plugin">
<!-- template definition -->
<meta property="og:type" content="article">
<meta property="og:article:author" content="Pedro Borges">
<meta property="og:article:published_time" content="2017-02-28">
<meta property="og:article:modified_time" content="2017-03-01">
<meta property="og:article:tag" content="tech">
<meta property="og:article:tag" content="web">
<meta property="og:image" content="https://pedroborg.es/content/blog/how-to-make-a-kirby-plugin/code.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/jpeg">

使用namespace:前缀为结构化属性

  • 在namespace:article内的author变为og:article:author。
  • 在namespace:image内的image变为og:image。
  • 在namespace:image内的width变为og:image:width。

当使用Open Graph标签时，您希望像在他们的文档中建议的那样，将prefix属性添加到html元素上：<html prefix="og: http://ogp.me/ns#">

twitter

此标签组的工作方式与上一个标签组类似，但它生成用于Twitter Cards的<meta>标签。

'twitter' => [
    'card' => 'summary',
    'site' => $site->twitter(),
    'title' => $page->title(),
    'namespace:image' => function ($page) {
        $image = $page->cover()->toFile();

        return [
            'image' => $image->url(),
            'alt' => $image->alt()
        ];
    }
]
显示 HTML 👁

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@pedroborg_es">
<meta name="twitter:title" content="My blog post title">
<meta name="twitter:image" content="https://pedroborg.es/content/blog/my-article/cover.jpg">
<meta name="twitter:image:alt" content="Article cover image">

json-ld

使用此标签组将JSON Linked Data模式添加到您的网站。

'json-ld' => [
    'Organization' => [
        'name' => $site->title()->value(),
        'url' => $site->url(),
        "contactPoint" => [
            '@type' => 'ContactPoint',
            'telephone' => $site->phoneNumber()->value(),
            'contactType' => 'customer service'
        ]
    ]
]

如果您省略它们，则将添加http://schema.org作为@context，并将数组键添加为@type。

显示 HTML 👁

<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "Organization",
    "name": "Example Co",
    "url": "https://example.com",
    "contactPoint": {
        "@type": "ContactPoint",
        "telephone": "+1-401-555-1212",
        "contactType": "customer service"
    }
}
</script>

变更日志

对此项目的所有重大更改将记录在：https://github.com/wearejust/kirby-meta-tags/blob/master/CHANGELOG.md

许可证

Meta Tags插件是开源软件，许可协议为MIT许可。

版权所有 © 2019 Pedro Borges oi@pedroborg.es