Barba: Update meta and html in barba V2

Created on 27 Apr 2020 · 2Comments · Source: barbajs/barba

Hi, i found how to update meta tags in older barba version #82 but can't find how to do this same in barba V2.
This my sample:

$(function () {
  barba.hooks.enter(() => {
    window.scrollTo(0, 0);

   // this not work
    var $newPageHead = $('<head />').html(
      $.parseHTML(
        newPageRawHTML.match(/<head[^>]*>([\s\S.]*)<\/head>/i)[0],
        document,
        true
      )
    );
    var headTags = [
      "script[src*='uutils.fcg']",
      "meta[name='keywords']",
      "meta[name='description']",
      "meta[property^='og']",
      "meta[name^='twitter']",
      'meta[itemprop]',
      'link[itemprop]',
      "link[rel='prev']",
      "link[rel='next']",
      "link[rel='canonical']",
    ].join(',');
    $('head').find(headTags).remove();
    $newPageHead.find(headTags).appendTo('head');
  });

  barba.init({
    sync: true,

    transitions: [
      {
        async leave(data) {
          const done = this.async();

          pageTransition();
          await delay(1000);
          done();
        },

        async enter(data) {
          contentAnimation();
        },

        async once(data) {
          contentAnimation();
        },
      },
    ],
  });
});

Any help?

@barbcore question

Source

mpodciwinski

👍1

All 2 comments

Hi @mpodciwinski,

You probably haven't found anything related to meta tags update for the v2 because, as underlined by @luruke in the v1, it doesn't affect how the web page is crawled by search engines.

Anyway, the newPageRawHTML doesn't exist in Barba v2, you need to use data.next.html instead:

$(function () {
  barba.hooks.enter((data) => { // <- add data argument here
    window.scrollTo(0, 0);

    var $newPageHead = $('<head />').html(
      $.parseHTML(
        data.next.html.match(/<head[^>]*>([\s\S.]*)<\/head>/i)[0], // <- use data argument
        document,
        true
      )
    );
...

It should work as expected.
Feel free to close the issue :wink: