Защитите свой контент. Скрипт "Ссылка на источник" при копировании

Защитите свой контент: Скрипт, который автоматически добавляет ссылку на источник при копировании

В этой статье.

Для любого веб-мастера, стремящегося улучшить SEO своего проекта, качественный контент это золото. Однако чем он лучше, тем выше риск его воровства. Вместо того чтобы вступать в бесконечную борьбу с копипастом, можно использовать умный подход для защиты контента. С помощью простого JavaScript для сайта вы можете настроить автоматическую ссылку на источник каждый раз, когда кто-то копирует ваш текст. Такой скрипт "ссылка при копировании" является не только мощным инструментом для защиты от кражи контента, но и гениальным способом бесплатно получить обратные ссылки, которые так важны для поискового продвижения.


Вы часами работаете над уникальной и полезной статьей, вкладываете в нее знания и душу, нажимаете "Опубликовать"... а через несколько дней находите свой текст на чужом сайте. Без единого упоминания вашего авторства. Знакомая ситуация? К сожалению, кража контента и банальный копипаст - главная боль всех, кто создает что-либо в интернете.

Но что, если скажу, что можно обернуть эту ситуацию в свою пользу? Сегодня поделюсь простым, но невероятно эффективным JavaScript-кодом, который поможет вам защитить свой контент и даже получить обратные ссылки с сайтов-воров.


Для чего нужен этот скрипт и как он работает?

Представьте: посетитель находит вашу статью полезной и решает скопировать из нее фрагмент текста, чтобы сохранить себе в заметки или поделиться на каком-нибудь форуме. В этот самый момент скрипт незаметно выполняет одно простое действие: он автоматически добавляет к скопированному тексту строчку с подписью, например:

Источник: https://vash-sait.com/vasha-statya

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

Это элегантное решение, которое не мешает честным пользователям, но заставляет ленивых воришек работать на вас. Вместо того чтобы просто украсть контент, они, сами того не желая, размещают у себя на сайте ссылку на вашу статью, улучшая ваше SEO.


Главные преимущества скрипта Ссылка на источник

  1. Автоматические обратные ссылки. Каждое копирование вашего текста потенциально превращается в обратную ссылку. Это один из самых естественных способов наращивать ссылочную массу, что очень нравится поисковым системам.
  2. Защита авторского права. Ссылка на источник четко указывает, кто является автором материала. Это усложняет присвоение вашего контента.
  3. Борьба с копипастом. Вы не запрещаете копирование, а делаете его выгодным для себя. Это умный способ борьбы с воровством контента.
  4. Простота установки. Вам не нужно быть программистом. Достаточно скопировать готовый код и вставить его в шаблон вашего сайта.

Готовый скрипт для вашего сайта

Вот тот самый код, который будет работать на страже вашего контента 24/7. Он универсален и подходит для любого сайта, включая блоги на Blogspot, WordPress или самописные проекты.

<script type="text/javascript">
// Эта функция будет выполняться, когда кто-то копирует текст на странице
function addLinkToCopy() {
    // Получаем выделенный пользователем текст
    const selection = document.getSelection();

    // Создаем текст, который будем добавлять. \n\n - это два переноса строки для красоты.
    // Вы можете изменить этот текст по своему вкусу.
    const textToAdd = '\n\nИсточник: ' + document.location.href;

    // Создаем новый временный контейнер
    const newDiv = document.createElement('div');
    newDiv.style.position = 'absolute';
    newDiv.style.left = '-99999px'; // Прячем этот элемент за пределами экрана
    document.body.appendChild(newDiv);
    
    // Заменяем переносы строк на правильный для XHTML тег <br />
    newDiv.innerHTML = selection.toString().replace(/\n/g, '<br />') + textToAdd;

    // Выделяем весь текст в нашем новом контейнере
    selection.selectAllChildren(newDiv);

    // Ждем мгновение, чтобы браузер успел выполнить выделение, а затем удаляем наш временный элемент
    window.setTimeout(function() {
        document.body.removeChild(newDiv);
    }, 0);
}

// Добавляем "слушателя" события 'copy' к нашей странице.
// Теперь функция addLinkToCopy будет вызываться каждый раз, когда происходит копирование.
document.addEventListener('copy', addLinkToCopy);
</script>

Как установить скрипт на сайт?

  1. Скопируйте весь приведенный выше код.
  2. Зайдите в панель администратора вашего сайта.
  3. Найдите раздел для редактирования HTML-кода вашего шаблона (в Blogspot это "Тема" ▶ "Редактировать HTML", в WordPress это может быть "Внешний вид" ▶ "Редактор тем" ▶ footer.php).
  4. Найдите закрывающий тег </body>.
  5. Вставьте скопированный код прямо перед этим тегом.
  6. Сохраните изменения.

Готово! Теперь ваш контент под защитой.


Как отключить скрипт на определенных страницах?

Может возникнуть ситуация, когда на вашем сайте есть страницы, где копирование текста это основная функция, и добавлять ссылку на источник там не нужно. Например, это может быть онлайн-инструмент (транслит, калькулятор) или страница с примерами кода, которые посетители должны свободно копировать.

К счастью, скрипт можно легко доработать, добавив в него список исключений. Скрипт будет проверять адрес страницы и, если он находится в этом списке, просто не будет срабатывать.

Вот обновленная версия скрипта с возможностью исключать страницы:

<script type="text/javascript">
// Эта функция будет выполняться, когда кто-то копирует текст на странице
function addLinkToCopy() {
    
    // --- БЛОК ИСКЛЮЧЕНИЙ ---
    // В этом списке перечислены URL, на которых скрипт НЕ будет работать.
    // Отредактируйте его под свои нужды.
    const excludedPaths = [
        '/p/vash-servis-1.html', 
        '/p/vash-servis-2.html'
    ];

    // Получаем текущий путь страницы
    const currentPath = window.location.pathname;

    // Проверяем, находится ли текущая страница в списке исключений.
    // Если да, то ничего не делаем и разрешаем обычное копирование.
    if (excludedPaths.includes(currentPath)) {
        return; 
    }
    // --- КОНЕЦ БЛОКА ИСКЛЮЧЕНИЙ ---

    // Если страница НЕ в списке, выполняется основной код:
    const selection = document.getSelection();
    const textToAdd = '\n\nИсточник: ' + document.location.href;

    const newDiv = document.createElement('div');
    newDiv.style.position = 'absolute';
    newDiv.style.left = '-99999px';
    document.body.appendChild(newDiv);
    
    newDiv.innerHTML = selection.toString().replace(/\n/g, '<br />') + textToAdd;

    selection.selectAllChildren(newDiv);

    window.setTimeout(function() {
        document.body.removeChild(newDiv);
    }, 0);
}

// Добавляем "слушателя" события 'copy'
document.addEventListener('copy', addLinkToCopy);
</script>

Как это настроить?

  1. Найдите в коде массив excludedPaths. Именно в него будем добавлять наши страницы-исключения.
  2. Определите URL-адреса страниц, которые нужно исключить. Вам нужна только часть адреса после домена. Например, если полная ссылка https://vashblog.com/p/translit.html, то вам нужна часть /p/translit.html.
  3. Вставьте эти пути в массив. Каждая ссылка должна быть в кавычках и отделяться от следующей запятой.

    Для одной страницы:

    const excludedPaths = ['/p/translit.html'];

    Для нескольких страниц:

    const excludedPaths = [
        '/p/translit.html',
        '/p/kalkulyator.html',
        '/instrumenty/generator-teksta.html'
    ];
  4. Замените старый код скрипта на этот обновленный и сохраните изменения.

Теперь скрипт будет работать на всех страницах вашего сайта, кроме тех, что вы добавили в список исключений. Удобно и гибко!


Копирование из блоков с кодом в тегах <pre><code>

Если ваш блог посвящен программированию или вы часто делитесь примерами кода в тегах <pre><code>, вы столкнетесь с еще одним важным нюансом. Наш скрипт, защищая текст, будет мешать посетителям копировать код, добавляя к нему лишнюю строку с источником. Это неудобно и может привести к ошибкам, если читатель попытается запустить такой "измененный" код.

Поэтому доработал наш скрипт еще раз, научив его отличать обычный текст от примеров кода.


Финальная версия скрипта

Эта версия включает в себя все улучшения: добавление ссылки, исключение определенных страниц и игнорирование блоков с кодом.

<script type="text/javascript">
// Эта функция будет выполняться, когда кто-то копирует текст на странице
function addLinkToCopy() {

    // --- ПРОВЕРКА №1: КОПИРОВАНИЕ ИЗ БЛОКА С КОДОМ ---
    const selection = document.getSelection();
    if (selection.rangeCount > 0) {
        let container = selection.getRangeAt(0).commonAncestorContainer;
        if (container.nodeType !== 1) {
            container = container.parentNode;
        }
        // Если выделенный текст находится внутри тегов PRE или CODE, ничего не делаем.
        if (container.closest('pre, code')) {
            return; 
        }
    }
    
    // --- ПРОВЕРКА №2: ИСКЛЮЧЕНИЕ СТРАНИЦ ПО URL ---
    const excludedPaths = [
        '/p/vash-servis-1.html', 
        '/p/vash-servis-2.html'
    ];
    const currentPath = window.location.pathname;
    if (excludedPaths.includes(currentPath)) {
        return; 
    }

    // --- ОСНОВНОЙ КОД: ДОБАВЛЕНИЕ ССЫЛКИ ---
    // Сработает, только если не прошли проверки выше.
    const textToAdd = '\n\nИсточник: ' + document.location.href;
    const newDiv = document.createElement('div');
    newDiv.style.position = 'absolute';
    newDiv.style.left = '-99999px';
    document.body.appendChild(newDiv);
    
    newDiv.innerHTML = selection.toString().replace(/\n/g, '<br />') + textToAdd;
    selection.selectAllChildren(newDiv);

    window.setTimeout(function() {
        document.body.removeChild(newDiv);
    }, 0);
}

// Добавляем "слушателя" события 'copy'
document.addEventListener('copy', addLinkToCopy);
</script>

Как работает улучшение?

В самое начало скрипта мы добавили блок, который проверяет, где именно находится выделенный пользователем текст. С помощью container.closest('pre, code') он ищет "родителей" выделенного фрагмента. Если среди них есть тег <pre> или <code>, функция немедленно прекращает работу, позволяя скопировать код в его первозданном виде.

Теперь ваш скрипт это мощный инструмент: он защищает ваши тексты, гибко настраивается для отдельных страниц и не мешает читателям работать с примерами кода. Это идеальный баланс между защитой авторства и удобством для посетителей.

⚠️

Важное замечание: Какую версию скрипта выбрать?

В этой статье мы прошли путь от простого скрипта к более сложному и функциональному. Чтобы вы не запутались, вот краткая инструкция по выбору:

  • Скрипт №1 (Базовый): Используйте его, если у вас простой блог со статьями, и вам нужна только основная функция - защитить текст, добавив ссылку на источник.
  • Скрипт №2 (С исключениями страниц): Выбирайте его, если на вашем сайте, помимо статей, есть страницы-инструменты (калькуляторы, конвертеры), где копирование должно быть свободным.
  • Скрипт №3 (Финальный): Этот вариант для вас, если вы не только хотите исключать страницы, но и часто публикуете примеры кода в тегах <pre><code>. Он обеспечивает чистое копирование кода.

Не позволяйте вашему труду пропадать зря. Этот небольшой, но мощный скрипт для добавления ссылки при копировании - обязательный инструмент для каждого блогера и владельца сайта. Он не только помогает в борьбе с кражей контента, но и становится вашим верным помощником в продвижении сайта.

Устанавливайте скрипт, защищайте свой труд и получайте заслуженные ссылки!

Понравилась статья?

💬 Если у вас остались вопросы или есть идеи, как еще улучшить скрипт, не стесняйтесь задавать их в комментариях ниже!

🚀 Поделитесь этой инструкцией в социальных сетях, чтобы помочь другим авторам защитить свой контент. Это лучшая благодарность!

⭐ А чтобы не пропустить новые полезные материалы, добавляйте блог в закладки. Спасибо, что дочитали до конца!

LеV

Я Николай, в сети просто - LеV. Люблю создавать сайты, которые не бесят, не тупят, и выглядят настолько хорошо, что даже самому нравится. Иногда перегибаю с перфекционизмом, но это уже профессиональная привычка.

Мои Любимые проекты на блогспоте: BloggersPut | leVTemplate | HTMLiCSS

Отправить комментарий

Новые Старые