Help us understand the problem. What is going on with this article?

metaタグ出力のヘルパー関数

More than 5 years have passed since last update.

HTMLのmetaタグ、最近はviewportやらogpやらtwittercardsやらでいっぱい出力しないといけなくなった。
構文的に冗長で書くのが面倒なので、PHPで整理して、もう少し短く書けるようにしてみる。

<?php
function meta($meta, $isXhtml=false, $charset=null)
{
    if (!is_array($meta) && !is_object($meta)) {
        throw new InvalidArgumentException('$meta should be Traversable or array. ' . gettype($meta). ' passed.');
    }
    $html = [];

    $TAGEND = $isXhtml ? ' />' : '>';
    $charset = (string)$charset ?: ini_get('default_charset') ?: 'UTF-8';

    foreach ($meta as $attr => $defs) {
        $attr = htmlspecialchars($attr, \ENT_COMPAT, $charset);

        if (is_array($defs) || is_object($defs)) {
            foreach ($defs as $label => $val) {
                $label = htmlspecialchars($label, \ENT_COMPAT, $charset);
                if (is_array($val) || is_object($val)) {
                    foreach ($val as $v) {
                        $v = htmlspecialchars($v, \ENT_COMPAT, $charset);
                        $html[] = '<meta ' . $attr . '="' . $label . '" content="' . $v . '"' . $TAGEND;
                    }
                } else {
                    $val = htmlspecialchars($val, \ENT_COMPAT, $charset);
                    $html[] = '<meta ' . $attr . '="' . $label . '" content="' . $val . '"' . $TAGEND;
                }
            }
        } else {
            $defs = htmlspecialchars($defs, \ENT_COMPAT, $charset);
            $html[] = '<meta ' . $attr . '="' . $defs . '"' . $TAGEND;
        }
    }

    return implode(PHP_EOL, $html);
}

使い方

連想配列かTraversableの定義を読み込ませると、metaタグの羅列になって返ってくる。
HTMLのエスケープは勝手に行うようにしてある。

$meta = [
    'charset' => 'utf8',
    'http-equiv' => [
        'X-UA-Compatible' => 'IE=edge',
        'Content-Type' => 'text/html; charset=UTF-8',
    ],
    'name' => [
        'keyword' => 'hoge,fuga,muga',
        'description' => 'hogehoge',
        'twitter:card' => 'photo',
        'twitter:title' => 'Mountain sunset',
        'twitter:image' => 'http://example.com/hoge.jpg',
    ],
    'property' => [
        'og:site_name' => 'FOOOOO!',
        'og:title' => 'foooooo',
        'og:description' => 'hogehoge',
        'og:image' => [
            'http://hoge.com/hoge1.jpg',
            'http://hoge.com/hoge2.jpg',
        ],
    ],
];
echo meta($meta);
出力イメージ
<meta charset="utf8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keyword" content="hoge,fuga,muga">
<meta name="description" content="hogehoge">
<meta name="twitter:card" content="photo">
<meta name="twitter:title" content="Mountain sunset">
<meta name="twitter:image" content="http://example.com/hoge.jpg">
<meta property="og:site_name" content="FOOOOO!">
<meta property="og:title" content="foooooo">
<meta property="og:description" content="hogehoge">
<meta property="og:image" content="http://hoge.com/hoge1.jpg">
<meta property="og:image" content="http://hoge.com/hoge2.jpg">

og:imageを複数指定するような場合は、配列化しておくとその分だけ出力する。
なお、第二引数をtrueに指定すると、タグの末尾が />になる。

Hiraku
PHP, Go界隈をうろうろしています。最近はgRPCと戦ってる。 特に明示していなければ、記事中のソースコード片は `CC-0 1.0` とします。出典表示無しで自由にコピペして頂いて構いません。 ただ、記事自体をコピペされるのは嫌なので、ソースコード部分以外の文章は通常通り全ての著作権を私が保持するものとします。 引用を超える範囲のコピペは止めて下さい。
http://blog.tojiru.net/
mercari
フリマアプリ「メルカリ」を、グローバルで開発しています。
https://tech.mercari.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした