Custom meta titles for Authors 🙌

Developer help
1

Hi, all! I’d love some help, please :raised_hands:

I want the author pages to have custom meta titles and descriptions, like:

AUTHOR NAME | Expert Magician & Writer | One Ahead

Read articles for magicians packed with magic trick insights, methods and secrets written by AUTHOR NAME. Learn from AUTHOR NAME.

I’d appreciate any advice on how to implement this! Thanks

1 Like
2

There are multiple tags related to title and description, to fully customize meta info for authors, you can put the following code into Ghost settings => code injection => site footer:

<!-- Custom author meta title and description -->
<script>
  if (document.body.classList.contains('author-template')) {
    const titleElement = document.querySelector('title');
    const fullTitle = titleElement.textContent;
    const authorName = fullTitle.split(' - ')[0];

    const newTitle = `${authorName} | Expert Magician & Writer | One Ahead`;

    titleElement.textContent = newTitle;

    const metaOgTitle = document.querySelector('meta[property="og:title"]');
    if (metaOgTitle) {
      metaOgTitle.setAttribute('content', newTitle);
    }

    const metaTwitterTitle = document.querySelector('meta[name="twitter:title"]');
    if (metaTwitterTitle) {
      metaTwitterTitle.setAttribute('content', newTitle);
    }

    const newDescription = `Read articles for magicians packed with magic trick insights, methods, and secrets written by ${authorName}. Learn from ${authorName}.`;

    let metaDescription = document.querySelector('meta[name="description"]');
    if (!metaDescription) {
      metaDescription = document.createElement('meta');
      metaDescription.setAttribute('name', 'description');
      document.head.appendChild(metaDescription);
    }
    metaDescription.setAttribute('content', newDescription);

    let metaOgDescription = document.querySelector('meta[property="og:description"]');
    if (!metaOgDescription) {
      metaOgDescription = document.createElement('meta');
      metaOgDescription.setAttribute('property', 'og:description');
      document.head.appendChild(metaOgDescription);
    }
    metaOgDescription.setAttribute('content', newDescription);

    let metaTwitterDescription = document.querySelector('meta[name="twitter:description"]');
    if (!metaTwitterDescription) {
      metaTwitterDescription = document.createElement('meta');
      metaTwitterDescription.setAttribute('name', 'twitter:description');
      document.head.appendChild(metaTwitterDescription);
    }
    metaTwitterDescription.setAttribute('content', newDescription);
  }
</script>
1 Like
3

Thank you so much, Raki! It worked.

Is there something similar I can inject to update the tag page Twitter Titles and Meta Titles?

“[TAG NAME] - Magic Trick Articles for Magicians”

I really appreciate your help! :raised_hands:

4

You can use the following code to change tag page’s titles:

<!-- Custom tag page meta title -->
<script>
  if (document.body.classList.contains('tag-template')) {
    const titleElement = document.querySelector('title');
    const fullTitle = titleElement.textContent;
    const tagName = fullTitle.split(' - ')[0];

    const newTitle = `${tagName} - Magic Trick Articles for Magicians`;

    titleElement.textContent = newTitle;

    const metaOgTitle = document.querySelector('meta[property="og:title"]');
    if (metaOgTitle) {
      metaOgTitle.setAttribute('content', newTitle);
    }

    const metaTwitterTitle = document.querySelector('meta[name="twitter:title"]');
    if (metaTwitterTitle) {
      metaTwitterTitle.setAttribute('content', newTitle);
    }
  }
</script>
1 Like
5

Thanks, Raki!

This seems to change the tag title for Google, etc.

Ideally, it would only change the title for Meta and Twitter!

I appreciate the free help. After this, if similar items come up, I’ll compile a list and contact you via your website to complete it as a paid project.

6

Delete titleElement.textContent = newTitle; would avoid this.

7

Tried implementing this but it doesn’t seem to have worked, I’m afraid.

8

The code Raki provided uses javascript to make changes to the page. I’m guessing that the social share preview tool linked above doesn’t parse javascript.

9

I missed the fact that Facebook or Twitter don’t run JS script when generating cards, whereas Google execute JS before fetching meta info. So the above code work for Google but not social media.

Two ways to change Twitter title of the tag page:

  1. Modify tags directly in Ghost tag editor
  2. If you have too many tags to change, you can use Ghost Admin API to batch modify

Change author page’s meta title and description:
Ghost doesn’t provide a direct way or API call to modify author meta info.

If you use the js code I provided above, the changes will reflect on Google but not on social media platforms.
So meta title of author pages is difficult to change. Although you can discard Ghost built-in head and rewrite all of it, but this is an expensive solution.