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

Mixxxa163 · 12 квітня 2021

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

Otvet · 12 квітня 2021

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

Mixxxa163 · 12 квітня 2021

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

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

не понял

pawana · 12 квітня 2021

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

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

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

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

не понял

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

Mixxxa163 · 12 квітня 2021

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

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

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

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

pawana · 13 квітня 2021

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

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

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

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

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

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

Змінено 13 квітня 2021 користувачем pawana

chukcha · 13 квітня 2021

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

Seriusis · 13 квітня 2021

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

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

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

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

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

Mixxxa163 · 13 квітня 2021

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

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

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

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

pawana · 13 квітня 2021

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

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

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

pawana · 13 квітня 2021

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

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

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

Mixxxa163 · 13 квітня 2021

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

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

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

Agatha65 · 13 квітня 2021

Для видео читайте про 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>

Вхід

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

Recommended Posts

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Надіслати

Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Створити обліковий запис

Вхід

Зараз на сторінці 0 користувачів

Покупцям

Розробникам

Корисна інформація

Останні розширення

Important Information