Project

General

Profile

Actions

Link- und Meta-Tags dynamisch einfügen

Als das Open Graph Protokoll in das Artikel-Modul eingebunden wurde, wurde gleichzeitig eine Möglichkeit geschaffen dynamisch Meta-Tags in den Header einzubinden.
Auch für Link- und Script-Tags ist es wünschenswert, dass diese dynamisch eingebunden werden können. Das dynamische Einbinden von Script-Tags ist aktuell noch nicht möglich.
Das dynamische Einfügen von Link- und Meta-Tags ist aktuell nur im Frontend möglich.

Link-Tags (seit 2.1.22)

Die Definition von '<link>' in der HTML5 Spezifikation:
https://www.w3.org/TR/html50/document-metadata.html#the-link-element

Hinzufügen von Link-Tags

use Ilch\Layout\Helper\LinkTag\Model as LinkTagModel;

$linkTagModel = new LinkTagModel();
$linkTagModel->setRel('stylesheet')
             ->setHref('default.css');
$this->getLayout()->add('linkTags', 'defaultStyleSheet', $linkTagModel);

Beim abschließenden Hinzufügen des Link-Tags durch den Aufruf von add() muss für den Parameter "key" zwingend "linkTags" übergeben werden, da der Link-Tag sonst nicht eingebunden wird.
Der Parameter "objectKey" kann frei gewählt werden, sollte aber eindeutig sein und es wird empfohlen, dass dieser den Link-Tag beschreibt.
Als Parameter "value" wird das entsprechende Model übergeben.

/**
 * Adds value with specific key ($objectKey) to an array in view data.
 *
 * @param string $key
 * @param string $objectKey
 * @param mixed $value
 *
 * @return bool
 * @throws \Exception
 * @since 2.1.0
 */
public function add($key, $objectKey, $value)
{
    // [...]
}

Beispiele gültiger Link-Tags

<link rel="stylesheet" href="default.css">

<link rel="stylesheet" href="green.css" title="Green styles">

<link rel="alternate stylesheet" href="contrast.css" title="High contrast">
<link rel="alternate stylesheet" href="big.css" title="Big fonts">
<link rel="alternate stylesheet" href="wide.css" title="Wide screen">

<link rel=alternate href="/en/html" hreflang=en type=text/html title="English HTML">
<link rel=alternate href="/fr/html" hreflang=fr type=text/html title="French HTML">
<link rel=alternate href="/en/html/print" hreflang=en type=text/html media=print title="English HTML (for printing)">
<link rel=alternate href="/fr/html/print" hreflang=fr type=text/html media=print title="French HTML (for printing)">
<link rel=alternate href="/en/pdf" hreflang=en type=application/pdf title="English PDF">
<link rel=alternate href="/fr/pdf" hreflang=fr type=application/pdf title="French PDF">

Übersicht der Eigenschaften der Models
application/libraries/Ilch/Layout/Helper/LinkTag/Model.php
  • href
  • crossorigin
  • rel
  • media
  • hreflang
  • type
  • sizes
  • title

Meta-Tags (seit 2.1.0)

Die Definition von '<meta>' in der HTML5 Spezifikation:
https://www.w3.org/TR/html5/document-metadata.html#the-meta-element

Hinzufügen von Meta-Tags
Auszug aus dem Artikel-Modul.

use Ilch\Layout\Helper\MetaTag\Model as MetaTagModel;

$metaTagModel = new MetaTagModel();
$metaTagModel->setName('og:title')
             ->setContent($article->getTitle());
$this->getLayout()->add('metaTags', 'og:title', $metaTagModel);

$metaTagModel = new MetaTagModel();
$metaTagModel->setName('og:description')
             ->setContent($article->getDescription());
$this->getLayout()->add('metaTags', 'og:description', $metaTagModel);

$metaTagModel = new MetaTagModel();
$metaTagModel->setName('og:type')
             ->setContent('article');
$this->getLayout()->add('metaTags', 'og:type', $metaTagModel);

if (!empty($article->getImage())) {
    $metaTagModel = new MetaTagModel();
    $metaTagModel->setName('og:image')
                 ->setContent(BASE_URL.'/'.$article->getImage());
    $this->getLayout()->add('metaTags', 'og:image', $metaTagModel);
}

if (!empty($article->getLocale())) {
    $metaTagModel = new MetaTagModel();
    $metaTagModel->setName('og:locale')
                 ->setContent($article->getLocale());
    $this->getLayout()->add('metaTags', 'og:locale', $metaTagModel);
}

Beim abschließenden Hinzufügen des Meta-Tags durch den Aufruf von add() muss für den Parameter "key" zwingend "metaTags" übergeben werden, da der Meta-Tag sonst nicht eingebunden wird.
Im Falle eines Link-Tags war dies "linkTags".
Der Parameter "objectKey" kann frei gewählt werden, sollte aber eindeutig sein und es wird empfohlen, dass dieser den Meta-Tag beschreibt.
Als Parameter "value" wird das entsprechende Model übergeben.

/**
 * Adds value with specific key ($objectKey) to an array in view data.
 *
 * @param string $key
 * @param string $objectKey
 * @param mixed $value
 *
 * @return bool
 * @throws \Exception
 * @since 2.1.0
 */
public function add($key, $objectKey, $value)
{
    // [...]
}

Beispiele gültiger Meta-Tags
<meta name=generator content="Frontweaver 8.2">

<meta name="keywords" content="british,type face,font,fonts,highway,highways">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<meta http-equiv="Refresh" content="300">
<meta http-equiv="Refresh" content="20; URL=page4.html">

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'">

<meta charset="utf-8">

<meta name="og:title" content="Willkommen">
<meta name="og:type" content="article">
Übersicht der Eigenschaften der Models
application/libraries/Ilch/Layout/Helper/MetaTag/Model.php
  • httpEquiv
  • name
  • content
  • charset

Updated by -, blackcoder 4 months ago · 3 revisions