SEO Customization (e.g. decoupling HTML title, Space title, Page title and the og:title meta tag)

[zenodeapp]

Hi!

I love to use Gitbook! Really enjoy the creation process :)! I have a question and a potential feature request!

The question

Is there currently a way to adapt the values of the HTML title and the og:title-tag? To customize the SEO a bit more to my own preferences/needs? It would be great if we were able to change these. Pre-filled with default values, but customizable for those who want to have a bit more freedom.

---

Before you continue, I have to state that I used the word "title" A LOT in a bunch of different contexts:

1. HTML title (the title visible in a browser tab, <title></title>)
2. Space title (the title next to the icon, top left of the page)
3. Page title (speaks for itself)
4. OG title (og:title for social media SEO)
5. SEO title (new title I introduce in Observation 1 and the code snippets)

---

Observation 1

The Space title gets used in the HTML title. Someone wouldn't be able to have a HTML title different from the Space title.

I'll give an example of a specific use case to why someone would want to do this:

User S wants to call his Space "Apple", same as his company name. Now, user S opens his own official site and the documentation. Both tabs only show "Apple" in the browser bar confusing him to which tab is which. To introduce clarity User S is forced to rename the Space to e.g. "Apple Docs" or "Apple Documentation".

This is a small pet-peeve of mine at the moment. Wanting to only use the Project name as the title of the Space but have 'Docs' appended in the HTML title.

Possible Solution

A way to solve this would be to allow users to toggle a second SEO title-field (an advanced option) to optionally fill out if they want to use a different title than the default for SEO. For instance, a toggle button that opens a second title field under Space Customization > General Basic > Title & Icon.

let seoTitle = useCustomSeoTitle ? customSeoTitle : spaceTitle;
// OPTIONAL: you could add the check `&& customSeoTitle !== ""` in first part of the ternary.

// A check whether pageTitle or seoTitle is empty should be done to know if the separator has to be included or not.
let separator = pageTitle == "" || seoTitle == "" ? "" : " - ";

// Create the resulting HTML title.
let htmlTitle = `${pageTitle}${separator}${seoTitle}`;

<title>{htmlTitle}</title>

I made everything variables to improve readability

The twitter:site tag should probably not be included in this logic and should continue to use spaceTitle (?).

---

Observation 2

On page level we're not able to indicate what should be used as the title in the HTML. It's probably best that this is not possible to simplify SEO, but the omitting of the Page title in HTML, which is common to do for the first page, is not possible to do.

The first page, which I use as a "home page" for the documentation was called "Apple Docs" to make sure that the OG title would properly show "Apple Docs" when I link my docs. Only problem with this is that the HTML title on that page now becomes: "Apple Docs - Apple Docs" since I also chose to call the Space title "Apple Docs".

Possible Solution

To keep it simple and prevent too much 'freedom', just allowing the omittance of the page title in the HTML title should suffice (perhaps limiting this functionality only to the first page).

let seoTitle = useCustomSeoTitle ? customSeoTitle : spaceTitle;
// OPTIONAL: you could add the check `&& customSeoTitle !== ""` in first part of the ternary.

let _pageTitle = omitPageTitle ? "" : pageTitle;
 // OPTIONAL: you could add the check `&& isFirstPage` in the first part of the ternary.

// A check whether _pageTitle or seoTitle is empty should be done to know if the separator has to be included or not.
let separator = _pageTitle == "" || seoTitle == "" ? "" : " - ";

// Create the resulting HTML title.
let htmlTitle = `${_pageTitle}${separator}${seoTitle}`;

<title>{htmlTitle}</title>

---

Observation 3

The order of the htmlTitle can't be flipped.

Possible Solution

...
let htmlTitle = isFlipped ? `${seoTitle}${separator}${_pageTitle}` : `${_pageTitle}${separator}${seoTitle}`;
...

This should of course be a global Space Customization.

---

Observation 4

We can't change the value for og:title.

This might be the actual culprit to why I'm having issues at the moment. Because if I was able to change this per page then I wouldn't be fiddling that much with all these titles.

Possible Solution

It would be nice if we had control over this value. Perhaps also introducing a toggle to include the seoTitle (or just a toggle to let it be the same as the HTML title). Or even allowing users to show it in a hierarchical format where it shows the names of the parent page or group, like breadcrumbs. Though this might be against SEO friendliness, I am by no means an expert in SEO hehe.

// Creating a custom og per page
let ogTitle = useCustomOgTitle ? customOgTitle : pageTitle;

// Or, just append or prepend seoTitle to pageTitle
if(prependSeoTitle) {
    ogTitle = `${seoTitle} - ${pageTitle}`;
} else if(appendSeoTitle) {
    ogTitle = `${pageTitle} - ${seoTitle}`;
}

// Or, just let it it mirror the htmlTitle
if(sameAsHtmlTitle) ogTitle = htmlTitle;

/* Or, showing hierarchy or a truncated one (like just the group or first parent).
    I can't write this without having knowledge on the data structure used,
    If it's structured with pointers or in a dictionary then getting the first parent wouldn't be too hard. */

---

This became a long train of thought for such a silly small nit-picky deal. Well, that could only mean one thing...to me, the platform is solid :)!

Thank you for reading and keep doing great things!

[zenodeapp]

I saw that in the past we were able to write plugins and use them. Will there be somewhat a possibility to change JS, CSS or HTML in the future with 'Integrations'?

Then I'd be more than happy to work on such a feature :)!