es. For your website, I recommend not blocking text selection. The following lightweight script only discourages casual right-clicking and image dragging/saving, while normal text remains selectable and crawlable.
Add this near the bottom of your page, before </body>:
<script>
(function () {
'use strict';
// Disable right-click only
document.addEventListener('contextmenu', function (e) {
e.preventDefault();
});
// Prevent dragging images
document.addEventListener('dragstart', function (e) {
if (e.target.tagName === 'IMG') {
e.preventDefault();
}
});
// Prevent common image-related mouse actions
document.addEventListener('mousedown', function (e) {
if (e.target.tagName === 'IMG' && e.button === 1) {
e.preventDefault();
}
});
// Prevent opening images with middle mouse button
document.addEventListener('auxclick', function (e) {
if (e.target.tagName === 'IMG') {
e.preventDefault();
}
});
})();
</script>
Optional CSS for images
You can also add:
<style>
img {
-webkit-user-drag: none;
user-drag: none;
}
</style>
What this does
| Feature | Result |
|---|---|
| Normal text selection | ✅ Allowed |
| Copy text | ✅ Allowed |
| Google crawling | ✅ Unaffected |
| SEO text/content | ✅ Unaffected |
| Right-click | 🚫 Disabled |
| Drag image to desktop | 🚫 Discouraged |
| Middle-click image | 🚫 Blocked |
| JavaScript disabled | Protection disappears |
| Screenshots | ❌ Cannot be prevented |
Important
This is only casual protection, not real content security. Anyone can still use browser developer tools, disable JavaScript, take screenshots, or retrieve images from the page source/network requests.
For an SEO/content website, this is preferable to code such as:
document.onselectstart = () => false;
document.oncopy = () => false;
document.onkeydown = ...
because those approaches interfere with legitimate users and accessibility without providing meaningful protection.
