Suggestion for product titles

Reflow
1

May be a good idea to add a function that changes a part of the webbrowsers title (page title) based on the product someone is looking at. Currently I use the dynamic products function which means all pages just have a general title tag that I set. However for Search Engine Optimalization it would be better (and better in general) if you can change the title of the page based on the product someone is looking at.

2

You could try some JS:

 // Get the element with class ref-name
  const refNameElement = document.querySelector('.ref-name');

  // Get the content of the element
  const refNameContent = refNameElement.innerText;

  // Get the meta title element
  const metaTitleElement = document.querySelector('title');

  // Set the meta title element content to the ref-name element content
  metaTitleElement.innerText = refNameContent;

You would need to have it so that it only runs once the page is loaded.

1 Like
3

I tried a short code for that (view below) but it didn’t work…

<script>
var refName = document.querySelector('.ref-name');

document.title = refName.textContent;
</script>
4

This will change the document title

window.addEventListener('load', () => {
  document.title = document.querySelector('.ref-name').textContent;
});
1 Like
5

Didn’t work either, I think it doesn’t work due the fact that the code you’re refering to (.ref-name) isn’t hosted within the file itself but it’s more kinda ‘inserted’ by Reflow. As I do know how to change titles and how to work with JavaScript but the whole point is that it doesn’t work with those methods.

6

Try this:

function waitForElement(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                resolve(document.querySelector(selector));
                observer.disconnect();
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}


waitForElement('.ref-name').then((elm) => {
  document.title = document.querySelector('.ref-name').textContent+ " | YourDomain.com";

});

It will wait until the element with class of ref-name exists and then do its stuff**

You will have to set the visibility to be on the product page only, as it will pickup in the product list pages too.

** technical term :slight_smile:

Edited to include @kuligaposten shorter version

2 Likes
7

Thanks a lot for the support so far, I have edited the code which still doesn’t seem to work. Checked the dev console and I’m seeing the following error:

image
image978×111 6.27 KB

Edit: I have fixed it. The code that worked for me is below for if anyone else needs it.

function waitForElement(selector) {
  return new Promise(resolve => {
    if (document.querySelector(selector)) {
      return resolve(document.querySelector(selector));
    }

    const observer = new MutationObserver(mutations => {
      if (document.querySelector(selector)) {
        resolve(document.querySelector(selector));
        observer.disconnect();
      }
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
  });
}

document.addEventListener('DOMContentLoaded', function() {
  const refNameElm = document.querySelector('.ref-name');

  waitForElement('.ref-name').then((elm) => {
    document.title = elm.textContent + " | T-Unlimited";
  });
});
8

The reflow library triggers a custom reflow-ready event which you can listen for. So for example if the product id is available in the page URL as ?product=12345, you can set the title with the following JS snippet:

document.addEventListener('reflow-ready', function() {
    let prodID = new URL(location.href).searchParams.get('product');
    Reflow.api('/products/' + Number(prodID)).then(function (product) {
        document.title = product.name;
    });
});

The Reflow variable here is global and defined by the reflow toolkit when it loads. API calls are cached, so this won’t result in a second request to our servers - it will reuse the result of the original api call which the Product component does anyway.

1 Like
9

Thanks for the reply Martin, one question will this also be crawled by search engines this way or will the crawlers still use the default title tag of a webpage? I’m asking this for SEO-/ Ranking in Google as my products are not findable by name, only by the default page titles…

10

I know that the Google bot executes JavaScript when scanning pages, but I am not sure which title they will present in search results.