Проблема с дублирующимися [H1] в кастомной теме

Всем доброго дня!

Пару лет назад делался сайт, сейчас идут работы по оптимизации для поисковиков.
Всплыла проблема наличия дублирующегося заголовка <h1>, в шаблоне это выглядит так:

	<h1 class="hide">Museums,<br/> Galleries, Exhibition Halls</h1>
	<h1 class="show">Museums,<br/> Galleries, Exhibition Halls</h1>
	<div class="h1Area"></div>

При этом в браузере заголовок показывается нормально, только один раз.
Но для поисковой системы это ошибка.
Начал разбираться почему так сделано и понял что так программист завязался на адаптивный дизайн.
В версии с большим экраном заголовок выводится ВЕРТИКАЛЬНО слева от текста — http://prntscr.com/excjm9
На меленьких разрешениях заголовок принимает обычный вид и пишется горизонтально — http://prntscr.com/exck1a

Программист реализовал это так (CSS):

.content .mosaic h1.show,
.content .mosaic h1.hide {
	margin:0;
	font-family:"MullerBold", Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
	font-size:30pt;
	line-height:30pt;
	color:#fff;
	letter-spacing:4px;
	text-transform:uppercase;
}
.content .mosaic h1.show {
	position:absolute;
	right:100%;
	top:0;
	padding:25px 35px 16px 0;
	white-space:nowrap;
	word-wrap:normal;

	-webkit-transform-origin:100% 0;
	-moz-transform-origin:100% 0;
	-o-transform-origin:100% 0;
	transform-origin:100% 0;
	-ms-transform-origin:100% 53%;

	/* Переворачиваем текст */
/*	writing-mode:tb-rl;*/
	-webkit-transform:rotate(-90deg);
	-moz-transform:rotate(-90deg);
	-o-transform:rotate(-90deg);
	transform:rotate(-90deg);
	-ms-transform:rotate(180deg);
}
.content .mosaic h1.hide {
	display:none;
	padding:0 0 16px 0;
	font-size:20pt;
	line-height:20pt;
}
@media screen and (max-width: 970px) {
	.content .mosaic h1.show {
		display:none;
	}
	.content .mosaic h1.hide {
		display:block;
	}
}

.content .mosaic .h1Area {
	float:left;
	height:100%;
}
@media screen and (max-width: 970px) {
	.content .mosaic .h1Area {
		display:none;
	}
}

И на jQuery:

if ($.browser.msie)
		{
			$('.content .mosaic.subcats h1.show').css({
				'writing-mode': 'tb-rl'
			});
			$('.content .mosaic.subcats .h1Area').css({
				'width': $('.content .mosaic.subcats h1.show').outerWidth() + 'px',
				'min-height': $('.content .mosaic.subcats h1.show').height() + 'px'
			});
		}
		else
		{
			$('.content .mosaic.subcats .h1Area').css({
				'width': $('.content .mosaic.subcats h1.show').outerHeight() + 'px',
				'min-height': $('.content .mosaic.subcats h1.show').width() + 'px'
			});
		}

Т.е. он разруливает работу с отображением заголовков полностью на клиенте.
Для больших разрешений выводится
<h1 class="show">Museums,<br/> Galleries, Exhibition Halls</h1>
для маленьких
<h1 class="hide">Museums,<br/> Galleries, Exhibition Halls</h1>

Смотрю я на это всё и не могу сообразить каким образом избавиться от лишнего заголовка не ломая адаптивной верстки и чтобы не нажить новых проблем…

Собственно вопрос — как решить эту задачу?

Заранее благодарен за ответы!