Вкладки...надо ли?

[Mixxxa163]

Ддень. Подскажите как лучше с технической стороны(SEO, поисковой выдачи, UX дизайна, юзабилити, дальнейшего редактирования, восприятия кода поисковыми роботами, удобства парсинга и тд..) в карточке товара помещать ссылки на документацию и видео во вкладку описание или делать дополнительные вкладки, документация, видео раздельно? При первом варианте вкладка получается большой, нужно скролить, и рекомендация pagespeed Сократите размер структуры DOM, я так понимаю в этой связи возникает?

[Otvet]

Во вкладке, с подгрузкой данных по ajax при событии клика по ней

[Mixxxa163]

38 минут назад, Otvet сказал:

Во вкладке, с подгрузкой данных по ajax при событии клика по ней

не понял

[pawana]

3 часа назад, Mixxxa163 сказал:

Сократите размер структуры DOM, я так понимаю в этой связи возникает?

Уменьшить DOMы можно почистив описание от лишних тегов, которые наворачивает редактор, но глобально это вряд-ли сильно изменит картину. Ну и делать это ручками - не реально. Если вычистить от них еще и шаблон, то получится что-то похожее на гугл-сайт - гугл доволен, покупатели - в шоке. Для гугла идеален простой шаблон с минимумом стилей и без рюшечек, но боюсь сделать такой шаблон и чтобы он не пугал посетителей будет сложно
 

2 часа назад, Mixxxa163 сказал:

не понял

Имеется в виду, что видео лучше ставить в отдельную вкладку и подгружать его только по клику иначе гугл пистон вставит

[Mixxxa163]

4 минуты назад, pawana сказал:

Уменьшить DOMы можно почистив описание от лишних тегов, которые наворачивает редактор, но глобально это вряд-ли сильно изменит картину. Ну и делать это ручками - не реально. Если вычистить от них еще и шаблон, то получится что-то похожее на гугл-сайт - гугл доволен, покупатели - в шоке. Для гугла идеален простой шаблон с минимумом стилей и без рюшечек, но боюсь сделать такой шаблон и чтобы он не пугал посетителей будет сложно
 

Имеется в виду, что видео лучше ставить в отдельную вкладку и подгружать его только по клику иначе гугл пистон вставит

а если сделать в отдельной вкладке и через редактор вставить ссылки текстовые на ютуб? заметил, что если в редакторе вставлять видео, показатели в pagespeed значительно ниже становятся..

[pawana]

14 часов назад, Mixxxa163 сказал:

заметил, что если в редакторе вставлять видео, показатели в pagespeed значительно ниже становятся..

Именно это и будет пистоном от гугла.
 

14 часов назад, Mixxxa163 сказал:

вставить ссылки текстовые на ютуб?

Ютуб закажет вам молитву за здравие (а если ссылки еще анкором оформите, то и не одну) и это будет для вас единственным профитом  Если уж хотите видосы в карточке - то только как написал @Otvet-аякс по клику на вкладке. Заказжите такой допил - думаю, дорого не возьмут.

Изменено 13 апреля 2021 пользователем pawana

[chukcha]

@pawana не обязательно по клику на таб
можно сделать заглушку показывая превью ютуб-видео, а по клику загружать

[Seriusis]

8 минут назад, chukcha сказал:

можно сделать заглушку показывая превью ютуб-видео, а по клику загружать

 

14 часов назад, Mixxxa163 сказал:

заметил, что если в редакторе вставлять видео, показатели в pagespeed значительно ниже становятся..

 

есть модуль для решения этой проблемы

 

 

[Mixxxa163]

49 минут назад, pawana сказал:

Именно это и будет пистоном от гугла.
 

Ютуб закажет вам молитву за здравие (а если ссылки еще анкором оформите, то и не одну) и это будет для вас единственным профитом  Если уж хотите видосы в карточке - то только как написал @Otvet-аякс по клику на вкладке. Заказжите такой допил - думаю, дорого не возьмут.

А почему так, из-за того что много ссылок на внешний ресурс на сайте?

[pawana]

45 минут назад, Mixxxa163 сказал:

А почему так, из-за того что много ссылок на внешний ресурс на сайте?

Гугл - потому что бот будет ждать пока загрузится превью видео - это размер и скорость загрузки страницы (у @Seriusis это написано в описании модуля), с мая это будет один из главных факторов ранжирования. Ютуб - за ссылки на них. Хотя ютубу для ранжирования они не нужны (всё есть гугл  ), но чем больше ссылок на сайт - тем больше посетителей и денег с рекламы - классика.
 

[pawana]

1 час назад, chukcha сказал:

можно сделать заглушку показывая превью ютуб-видео, а по клику загружать

Бесспорно, так, конечно, элегантнее и правильнее, но с точки зрения написания кода - обошлось бы ТС в значительно большую сумму. Это как раз делает модуль @Seriusis, так что тут уже решение за ТС

[Mixxxa163]

23 минуты назад, pawana сказал:

Гугл - потому что бот будет ждать пока загрузится превью видео - это размер и скорость загрузки страницы (у @Seriusis это написано в описании модуля), с мая это будет один из главных факторов ранжирования. Ютуб - за ссылки на них. Хотя ютубу для ранжирования они не нужны (всё есть гугл  ), но чем больше ссылок на сайт - тем больше посетителей и денег с рекламы - классика.
 

Спасибо за пояснительный ответ. Короче без видео пока обойдусь)..

[Agatha65]

Для видео читайте про facade

https://web.dev/third-party-facades/

сам код

https://github.com/paulirish/lite-youtube-embed

как я делаю

в админ для товар в location добавляем только video ID а модификатор деобавляет осталное на страница товара.

Spoiler

<?xml version="1.0" encoding="UTF-8"?>
    <modification>
        <name>Use location for product video - Lite YouTube</name>
        <code>upctovideo</code>
        <author>agatha65.com</author>
		<link>https://agatha65.com</link>
		<!-- https://github.com/paulirish/lite-youtube-embed -->
		
		<file path="catalog/controller/product/product.php">
		    <operation>
                <search><![CDATA[
				if ($product_info['minimum']) {
                ]]></search>
                <add position="before"><![CDATA[
				if ($product_info['location']) {
				  $data['video'] = $product_info['location'];
			    } else {
				  $data['video'] = '';
			    }
                ]]></add>
            </operation>
        </file>
		<file path="catalog/view/theme/*/template/common/header.tpl">
		    <operation>
                <search><![CDATA[
				</head>
                ]]></search>
                <add position="before"><![CDATA[
<style>
lite-youtube{background-color:#000;position:relative;display:block;contain:content;background-position:center center;background-size:cover;cursor:pointer;max-width:720px}
lite-youtube::before{content:'';display:block;position:absolute;top:0;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);background-position:top;background-repeat:repeat-x;height:60px;padding-bottom:50px;width:100%;transition:all .2s cubic-bezier(0,0,0.2,1)}
lite-youtube::after{content:"";display:block;padding-bottom:calc(100% / (16 / 9))}
lite-youtube > iframe{width:100%;height:100%;position:absolute;top:0;left:0;border:0}
lite-youtube > .lty-playbtn{width:68px;height:48px;position:absolute;cursor:pointer;transform:translate3d(-50%,-50%,0);top:50%;left:50%;z-index:1;background-color:transparent;
background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 68 48"><path fill="red" fill-opacity="0.8" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34" fill="white"></path></svg>');
filter:grayscale(100%);transition:filter .1s cubic-bezier(0,0,0.2,1);border:none}
lite-youtube:hover > .lty-playbtn,lite-youtube .lty-playbtn:focus{filter:none}
lite-youtube.lyt-activated{cursor:unset}
lite-youtube.lyt-activated::before,lite-youtube.lyt-activated > .lty-playbtn{opacity:0;pointer-events:none}
.lyt-visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}
</style>
                ]]></add>
            </operation>
		</file>
		<file path="catalog/view/theme/*/template/product/product.tpl">
		    <operation>
                <search><![CDATA[<?php echo $description; ?>]]></search>
                <add position="replace"><![CDATA[
				<?php if ($video) { 
				$videos = (explode(",",$video));
				if ( count($videos) == 1 ) { ?>
					<div class="row">
						<div class="col-sm-6"><?php echo $description; ?></div>
						<div class="col-sm-6">
							<lite-youtube videoid="<?php echo $videos[0]; ?>"></lite-youtube>
							<script>class LiteYTEmbed extends HTMLElement{connectedCallback(){this.videoId=this.getAttribute("videoid");let e=this.querySelector(".lty-playbtn");if(this.playLabel=e&&e.textContent.trim()||this.getAttribute("playlabel")||"Play",this.posterUrl=`https://i.ytimg.com/vi/${this.videoId}/hqdefault.jpg`,LiteYTEmbed.addPrefetch("preload",this.posterUrl,"image"),this.style.backgroundImage=`url("${this.posterUrl}")`,e||((e=document.createElement("button")).type="button",e.classList.add("lty-playbtn"),this.append(e)),!e.textContent){const t=document.createElement("span");t.className="lyt-visually-hidden",t.textContent=this.playLabel,e.append(t)}this.addEventListener("pointerover",LiteYTEmbed.warmConnections,{once:!0}),this.addEventListener("click",e=>this.addIframe())}static addPrefetch(e,t,i){const n=document.createElement("link");n.rel=e,n.href=t,i&&(n.as=i),document.head.append(n)}static warmConnections(){LiteYTEmbed.preconnected||(LiteYTEmbed.addPrefetch("preconnect","https://www.youtube-nocookie.com"),LiteYTEmbed.addPrefetch("preconnect","https://www.google.com"),LiteYTEmbed.addPrefetch("preconnect","https://googleads.g.doubleclick.net"),LiteYTEmbed.addPrefetch("preconnect","https://static.doubleclick.net"),LiteYTEmbed.preconnected=!0)}addIframe(){const e=new URLSearchParams(this.getAttribute("params")||[]);e.append("autoplay","1");const t=document.createElement("iframe");t.width=560,t.height=315,t.title=this.playLabel,t.allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",t.allowFullscreen=!0,t.src=`https://www.youtube-nocookie.com/embed/${encodeURIComponent(this.videoId)}?${e.toString()}`,this.append(t),this.classList.add("lyt-activated"),this.querySelector("iframe").focus()}}customElements.define("lite-youtube",LiteYTEmbed);</script>
						</div>
					</div>
				<?php } else { ?>
					<div class="row">
						<div><?php echo $description; ?></div>
						<?php foreach ($videos as $video=> $video_id) { ?>
						<div class="col-sm-6">
							<lite-youtube videoid="<?php echo $video_id; ?>"></lite-youtube>
						</div>
						<?php } ?>
						<script>class LiteYTEmbed extends HTMLElement{connectedCallback(){this.videoId=this.getAttribute("videoid");let e=this.querySelector(".lty-playbtn");if(this.playLabel=e&&e.textContent.trim()||this.getAttribute("playlabel")||"Play",this.posterUrl=`https://i.ytimg.com/vi/${this.videoId}/hqdefault.jpg`,LiteYTEmbed.addPrefetch("preload",this.posterUrl,"image"),this.style.backgroundImage=`url("${this.posterUrl}")`,e||((e=document.createElement("button")).type="button",e.classList.add("lty-playbtn"),this.append(e)),!e.textContent){const t=document.createElement("span");t.className="lyt-visually-hidden",t.textContent=this.playLabel,e.append(t)}this.addEventListener("pointerover",LiteYTEmbed.warmConnections,{once:!0}),this.addEventListener("click",e=>this.addIframe())}static addPrefetch(e,t,i){const n=document.createElement("link");n.rel=e,n.href=t,i&&(n.as=i),document.head.append(n)}static warmConnections(){LiteYTEmbed.preconnected||(LiteYTEmbed.addPrefetch("preconnect","https://www.youtube-nocookie.com"),LiteYTEmbed.addPrefetch("preconnect","https://www.google.com"),LiteYTEmbed.addPrefetch("preconnect","https://googleads.g.doubleclick.net"),LiteYTEmbed.addPrefetch("preconnect","https://static.doubleclick.net"),LiteYTEmbed.preconnected=!0)}addIframe(){const e=new URLSearchParams(this.getAttribute("params")||[]);e.append("autoplay","1");const t=document.createElement("iframe");t.width=560,t.height=315,t.title=this.playLabel,t.allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",t.allowFullscreen=!0,t.src=`https://www.youtube-nocookie.com/embed/${encodeURIComponent(this.videoId)}?${e.toString()}`,this.append(t),this.classList.add("lyt-activated"),this.querySelector("iframe").focus()}}customElements.define("lite-youtube",LiteYTEmbed);</script>
					</div>
				<?php } ?>
				<?php } else { ?>
				<?php echo $description; ?>
				<?php } ?>
                ]]></add>
            </operation>
        </file>
    </modification>