Different titles for navigation and title tag?

Kirby 2 Solved ✅
1

how is it possible to work with different titles for navigation and the „official“ title tag (and google serps)?
For example a short title for the navigation and a more meaningful for the title tag / serps.
i’ve found this post Simple Title in Nav Menu but i hope, that there is an easier solution now?

2

Your best bet is two fields unless there is a way to extract one title from the other.

3

thank you for the fast answer! sorry, i’m a beginner – what do you mean with „two fields“?
is there another tag/syntax like „Title:“?

4

You can create as many fields in your content files as you like. You usually have a title field but you could have a second field called menu_title, for example.

In your blueprint, define a new field:

title: My awesome blueprint
pages: true
files: true
fields:
  title:
    label: Title
    type:  text
  menu_title:
    label: Menu title
    type:  text

In your template or menu snippet, you would then use the menu_title field instead of the title field.

2 Likes
5

I do this with a set of global fields in a blueprint (this lets you reuse common fields in different blueprints without having to repeat yourself):

type: group
fields:
  seocontent:
    label: SEO Meta
    type: tabs
  seotitlemeta:
    label: Page Titles
    type: headline
  title:
    label: Title
    type: text
    help: The title that will show on the webpage
    icon: font
    width: 1/2
  seotitle:
    label: SEO Title
    type: text
    help: This will be used in the page code for SEO purposes
    icon: font
    width: 1/2
  metadata:
    label: Meta Data
    type: headline
  seometa:
    label: SEO Page Descrition
    type: simplemde
    buttons:
      - bold
      - italic
    help: Describes the page for SEO purposes

This way i can set a page title that actually appears on the page and feed different one to the meta tags in the head using the metatags plugin

c::set('meta-tags.default', function (Page $page, Site $site) {
    return [
        'title' => $page->isHomePage()
          ? $site->seotitle()
          : $page->seotitle().' | '.$site->seotitle(),
          'meta' => [
              'description' => $page->isHomePage()
                ? $site->seometa()
                : $page->seometa(),
              'keywords' => $page->isHomePage()
                ? $site->seokeywords()
                : $page->seokeywords(),
              'robots' => 'index,follow,noodp',
          ],
        'link' => [
            'canonical' => $page->url()
        ],
        ...

If you don’t to use the meta tags plugin, you can of course do it yourself by hand in a snippet:

<?php if ($page->isHomePage()): ?>

  <title><?= $site->seotitle()->html() ?></title>
  <meta name="description" content="<?= $site->seometa() ?>">
  <meta name="keywords" content="<?= $site->seokeywords() ?>">
  <meta property='og:site_name' content='<?= $site->title()->html() ?>' />
  <meta property='og:title' content="<?= html($site->title()) ?>" />
  <meta property='og:url' content="<?= $site->url() ?>" />
  <meta property='og:description' content="<?= $site->seometa() ?>" />
  <link rel='canonical' href='<?= $site->url() ?>' />
  <meta name='twitter:card' content='summary' />
  <meta name='twitter:title' content="<?= html($site->title()) ?>" />
  <meta name='twitter:description' content="<?= $site->seometa() ?>" />
  <meta name='twitter:url' content="<?= $site->url() ?>" />

<?php else: ?>

  <title><?= html($site->seotitle().' | '.$page->seotitle()) ?></title>
  <meta name="description" content="<?= $page->seometa() ?>">
  <meta name="keywords" content="<?= $page->seokeywords() ?>">
  <link rel='canonical' href='<?= $page->url() ?>' />
  <meta property='og:site_name' content='<?= $site->title()->html() ?>' />
  <meta property='og:title' content="<?= html($site->seotitle().' | '.$page->seotitle()) ?>" />
  <meta property='og:description' content="<?= $page->seometa() ?>" />
  <meta name="description" content="<?= $page->seometa() ?>">
  <meta name='twitter:card' content='summary' />
  <meta name='twitter:title' content="<?= html($site->title().' | '.$page->seotitle()) ?>" />
  <meta name='twitter:description' content="<?= $page->seometa() ?>" />
  <meta name='twitter:url' content="<?= $page->url() ?>" />

<?php endif ?>

EDIT: forgot to mention that those blue prints depend on the Tabs plugin and the SimpleMDE plugin. I highly recommend both.

1 Like
6

… wow, thanks a lot! this is much more than i have exspected :slight_smile:
a perfect tutorial and your plugin recommendations are precious, too.
thank you for your time, i’m going to test it now!