Скрыть часть текста на странице от поисковиков

[StartGames]

Здравствуйте.

Если коротко, то есть страница на которой может быть разное описание товара в зависимости от выбранных параметров. И чтобы не нагружать сервер запросами, хочу прятать куски описания в виде html https://prnt.sc/PuvHHzw6DpWB

Можно просто запихнуть в блок <div class="des">кусок html кода</div>
и потомвставлять в нужное место с помощью $('.des').html();

Но боюсь поисковикам это не понравиться.

Хотел хранить в <div data-description="кусок html кода"></div> но так как в описании есть двойные кавычки " я думаю оно все сломается. Да и текст может быть немного длинным.

Вопрос:
Есть ли какой то безопасный способ хранить куски кода в js или <noindex> или еще какой то трюк? Заранее спасибо

[ruslan_mart]

StartGames, способов много, но кажется, что не очень хорошая идея хранить html в БД (если я правильно понял). Если у вас потом поменяется дизайн/логика, то будет больно и обратного пути не будет. Храните данные в БД в формате JSON, чтобы не привязываться к разметке и на клиенте было проще с этим работать.

Если отвечать конкретно на Ваш вопрос, то можно это сделать несколькими способами:

1. Хранить разметку в глобальном свойстве:

<script>
window._entityData = '<div>123</div>';
</script>

...

<script>
console.log(window._entityData);
</script>

2. Хранить разметку в тэге:

<script id="entityData" type="text/template">
  <div>123</div>
</script>

<script>
console.log(document.getElementById('entityData').innerHTML);
</script>

3. Хранить в data-атрибуте, но в "закодированном" формате

<div data-entity="%3Cdiv%20class%3D%22foo%22%3E123%3C%2Fdiv%3E">..</div>

<script>
console.log(
  decodeURIComponent(
    document.querySelector('[data-entity]').dataset.entity
  )
);
</script>

P.S.: учтите, что в первом варианте нужно будет экранировать кавычки, перенос строки и желательно слэш.

[voraa]

Я думаю можно и в <template> загнать все, что со временем может понадобится.
И ничего экранировать не нужно и достать просто и быстро.

[StartGames]

ruslan_mart,
Спасибо, просто топ)) Есть еще вопросы если можно:

1. Сколько символов можно держать в <div data-entity="12345..."></div>
2. Поисковики не будут видеть текст в <div data-entity="12345..."></div>
3. Как в php закодировать нужные данные, а уже на сайте с помощью js раскодировать?

например:

В php:

$data['description'] = 'нужный текст';

в .twig (html)

<div id="entityData" data-entity="{{ description }}"></div>

в js:

alert($('#entityData').attr('data-entity'));

[StartGames]

Я думаю можно и в <template> загнать все, что со временем может понадобится.
И ничего экранировать не нужно и достать просто и быстро.

а это как?) можно пример

[ruslan_mart]

Сколько символов можно держать в <div data-entity="12345..."></div>

Да сколько угодно, ограничений нет

Поисковики не будут видеть текст в <div data-entity="12345..."></div>

Не будут

Поисковики не будут видеть текст в <div data-entity="12345..."></div>

На PHP давно не писал, но возможно как-то так:

$data['description'] = urlencode('text');

Потом в JS:

alert(decodeURIComponent($('#entityData').data('entry')));

а это как?) можно пример

Примерно то же самое, что я привел во втором пункте

<template id="entity">{{ description }}</template>

const entityElement = document.getElementById('entity');

alert(entityElement.content);

Так конечно будет гораздо проще, ничего не нужно будет кодировать и раскодировать.

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

Почему боитесь поисковиков? Ну пусть смотрят, если хочется

[StartGames]

Да сколько угодно, ограничений нет

Просто огонь!))) Пасиб))

Почему боитесь поисковиков? Ну пусть смотрят, если хочется

Да я хз. Паранойя) Но суть в общем такая. Есть магазин, в нем в основном один товар может иметь несколько цветов в виде страниц отдельных товаров. Ну и чтобы не гонять покупателя по сайту и не нагружать сервак запросами, я вывожу список доступных для этой модели цветов. Теперь в дату записываю все важные данные связанных товаров из бд (название, ид, фото, цена, описание и т.д.). И просто подставляю ява скриптом при клике на нужный цвет. В итоге молниеносная смена данных в зависимости от цвета без переходов на другие страницы. И я не хотел, чтобы гугл увидел описание на странице конкретного товара от другого. Ну и остальные данные. А то получается что смотрим такую то красную модель, а в теле страницы еще описание и данные от 10 связанных товаров разных цветов.

В любом случае очень благодарен за помощь. Для новичков это топ. Никогда бы не подумал, что data это такая полезная вещь))