JavaScript
pjax
head
barba.js

Barba.jsを使って、metaタグを動的に更新する方法

More than 1 year has passed since last update.

newPageReadyのイベントで使用するようになります。例:

Barba.Dispatcher.on( 'newPageReady', function( currentStatus, oldStatus, container, newPageRawHTML ) {

if ( Barba.HistoryManager.history.length === 1 ) { // ファーストビュー
return; // この時に更新は必要ありません
}
// jquery-pjaxから借りた
var $newPageHead = $( '<head />' ).html(
$.parseHTML(
newPageRawHTML.match( /<head[^>]*>([\s\S.]*)<\/head>/i )[ 0 ],
document,
true
)
);
var headTags = [ // 更新になってほうしいタグ
"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']",
"link[rel='alternate']"
].join( ',' );
$( 'head' ).find( headTags ).remove(); // タグを削除する
$newPageHead.find( headTags ).appendTo( 'head' ); // タグを追加する
});
Barba.Pjax.start();

@min30327 がコメントで書いた通り

jQueryを使用ずにネイティーブJSも変更可能です:

Barba.Dispatcher.on( 'newPageReady', function( currentStatus, oldStatus, container, newPageRawHTML ) {

if ( Barba.HistoryManager.history.length === 1 ) {
return;
}
var head = document.head,
newPageRawHead = newPageRawHTML.match( /<head[^>]*>([\s\S.]*)<\/head>/i )[ 0 ],
newPageHead = document.createElement( 'head' );
newPageHead.innerHTML = newPageRawHead;
var headTags = [
"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']",
"link[rel='alternate']"
].join( ',' );
var oldHeadTags = head.querySelectorAll( headTags );
for ( var i = 0; i < oldHeadTags.length; i++ ) {
head.removeChild( oldHeadTags[ i ] );
}
var newHeadTags = newPageHead.querySelectorAll( headTags );
for ( var i = 0; i < newHeadTags.length; i++ ) {
head.appendChild( newHeadTags[ i ] );
}
});
Barba.Pjax.start();