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>
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.
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.
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:
Modify tags directly in Ghost tag editor
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.