Hide visible email addresses from trawling robots

Elements How do I…
1

As in RW Classic with e.g. Doobox’s Obscure Stack, is there a way to hide visible email addresses and phone numbers from trawling robots?

2

Maybe @Doobox already working on a version for elements …

3

It is fairly easy to do this according to ChatGPT. I asked the question: “On a webpage (using Tailwind), how to hide visible email addresses and phone numbers from trawling robots?”

It returned examples:

  • Obfuscate using HTML entities
  • Use JavaScript to render the content dynamically
  • Use CSS and reversed text trick
  • Use images for contact info (not ideal for accessibility/SEO)

This is a reusable tailwind code:

<!-- Email and phone obfuscation component -->
<div class="space-y-2 text-sm text-gray-800">
  <div id="email" class="text-blue-600 underline cursor-pointer hover:text-blue-800"></div>
  <div id="phone" class="text-blue-600 underline cursor-pointer hover:text-blue-800"></div>
</div>

<script>
  // Obfuscation logic
  const user = "john";
  const domain = "example.com";
  const email = `${user}@${domain}`;
  const phone = "+1234567890";

  // Render into HTML
  document.getElementById("email").innerHTML =
    `<a href="mailto:${email}" aria-label="Email ${email}">${email}</a>`;

  document.getElementById("phone").innerHTML =
    `<a href="tel:${phone}" aria-label="Call ${phone}">${phone.replace(/(\+1)(\d{3})(\d{3})(\d{4})/, '$1 ($2) $3-$4')}</a>`;
</script>

This is PHP code:

<?php
  // Define contact info (don't put it in the HTML directly)
  $email_user = 'john';
  $email_domain = 'example.com';
  $phone_number = '+1234567890';
?>
<div class="space-y-2 text-sm text-gray-800">
  <div id="email" class="text-blue-600 underline cursor-pointer hover:text-blue-800"></div>
  <div id="phone" class="text-blue-600 underline cursor-pointer hover:text-blue-800"></div>
</div>

<script>
  // Email and phone data passed from PHP via JavaScript (safe in JS)
  const emailUser = <?php echo json_encode($email_user); ?>;
  const emailDomain = <?php echo json_encode($email_domain); ?>;
  const email = `${emailUser}@${emailDomain}`;

  const rawPhone = <?php echo json_encode($phone_number); ?>;
  const formattedPhone = rawPhone.replace(/^(\+1)(\d{3})(\d{3})(\d{4})$/, '$1 ($2) $3-$4');

  // Render links into the page
  document.getElementById("email").innerHTML =
    `<a href="mailto:${email}" aria-label="Email ${email}">${email}</a>`;

  document.getElementById("phone").innerHTML =
    `<a href="tel:${rawPhone}" aria-label="Call ${rawPhone}">${formattedPhone}</a>`;
</script>

All from ChatGPT.

I haven’t tested any of these. :wink:

4

See the conversation in March at bottom of this post. Dev Diary Ep66 - New Form Components

5

I tested the tailwind code and it works, but I think it can still be read by trawling robots.

I read the discussion at the bottom of the topic “Dev Diary Ep66 - New Form Components” and decided, pending further developments, to secure the form with Turnstile anyway.

My thanks for your responses: @Pegasus @logrunner @PMUK

1 Like