Meta-tags kirby-extended

[fleshgordo]

I am currently configuring custom meta-tags for each note entry by using the starterkit. So far, I have added the metadata methods to my header.php like:

<?php $meta = $page->meta() ?>
// Canonical link (always) and robots (if configured)
<?= $meta->robots() ?>
...

While navigating between my blogposts I can see that the site title is being updated but not the other meta-tags (twitter-image, description etc..)

I have also extended my page model for template-specific meta data (models/note.php) to no avail (i.e. the image isn't updating when switching to other posts.

public function metadata(): array
    {
        $description = $this->summary()->or($this->text()->excerpt(140))->value();
        return [
            'description' => $description,
            'opengraph' => [
                'type' => 'article',
                'image' => $this->images()->first()->url(),
                // Open Graph object types can be defined in an array
                // with `namespace:` as prefix
                'namespace:article' => [
                    'author' => $this->author()->toUser()->name()->value(),
                    'published_time' => $this->date()->toDate('d F Y')
                ]
            ],
            'twitter' => [
              'image' => $this->images()->first()->url()
            ],
            'jsonld' => [
                'BlogPosting' => [
                    'headline' => $this->title()->value(),
                    'description' => $description
                ]
            ]
        ];
    }

Do I need to modify and rewrite all the meta-tags manually on the vue frontend inside hooks/usePage.js ? I've noticed that the site title is being changed there:

if (!path) {
      // Set document title
      document.title = page.metaTitle;
...

Thanks in advance!

[johannschopplich]

Hi Gordan,

fortunately, we don't have to pay attention to the metatags while changing routes in the frontend. The metatags are solely responsible for providing information to messengers and social media sites when creating a preview for a specific link.

When you navigate in the app, changing metatags are not needed. If you were to copy the URL, the target application will load the website and extract necessary data (without parsing and executing JS, hence the need for this starter kit).