What is your challenge?

Talk directly to a digital expert at  +49 (0)30 611016610

I want news!

    Contact
    Optimierter Code
    SEOTECH

    SEO optimize your ReCAPTCHA form!

    Home Blog
    Nora Plato 10/08/22

    How to SEO optimize your ReCAPTCHA form

    Fast loading Websites – they are loved by users and by search engines. But they are not so easy to create.We will tell you how we seo optimized the ReCAPTCHA form and how we improved our page speed!

    1. Quick introduction to Core Web Vitals
    2. Basic web understanding
    3. Seo-optimized ReCAPTCHA Form
    4. Impact and Conclusion

    1. Quick introduction to Core Web Vitals

    Core Web Vitals are key figures defined by Google. They can be used to analyze and optimize the user-friendliness of a website. According to Google, three metrics are measured for this purpose: Largest Contentful Paint (LCP), First Input Delay (FID) and Cumulative Layout Shift (CLS). For a deeper understanding check out our Core Web Vitals article.

    2. Basic web understanding

    But first we need a little excursion into programming. Don’t worry, we will cover the absolute basics you need to understand for this article. Let’s go!

    Most websites can be divided into three main parts:

    1. HTML: This is a markup language. This basically helps machines to understand the outlining of a website. It shows the words, paragraphes, headlines, tables and more.
    2. CSS: The CSS is used to define the style of a website. This is used to adjust the colors or change the text to different fonts. It would be pretty lame if all the websites looked the same, wouldn’t it?
    3. Javascript: Javascript is a programming language that is responsible for making the page interactive. For example it is used for animated pictures, search functions on a website or forms.

    Page Speed optimization or editing Javascript is part of the technical SEO segment. Editing and changing code is mostly done by web developers. We are happy to share the improvement that our web Developer Klodian Pepkolaj implemented on our website.

    3. SEO optimized ReCAPTCHA form

    What is ReCAPTCHA anyways?

    “Please prove that you are not a robot!”

    Ever encountered that situation? Then you have already met the ReCAPTCHA form. 

    It is a useful tool to avoid Spam since the ReCAPTCHA form prevents bots from putting in information. On a contact form or when signing up for a newsletter, for example. We will explain to you what happened and show you the results the best way we can.

    Before:

    Before implementing the change the site was loading the Javascript of the ReCAPTCHA every time.

    This took up a lot of resources and time because the javascript is loaded client-sided. And time is crucial when it comes to a good website. Remember: everyone loves a good quickly loading page.

    Rote Straße mit weißem Streifen

    The point is: we didn’t need the javascript for the recaptcha form to load until a person inputs data, for example by filling out our contact form.

    In order to save this time our developer implemented a code that would prevent the javascript file of the ReCAPTCHA to load on front, but rather the second when a user clicked on an input field.

    We will dip our toe a little into the coding field, but don’t worry! 

    We will provide the code to help you if you want to do the same improvements with your ReCAPTCHA form. If you are more interested in the process just skip the actual code and read the explanation around it.

    Disable the current code used for the ReCAPTCHA Form

    In the first step we needed to tell the website that it should not load the code of the ReCAPTCHA like it usually does. So that when someone visits our website the ReCAPTCHA code does not load. Therefore our developer implemented a function that would disable that code.

    add_action('wp_print_scripts', function () {
          wp_dequeue_script( 'google-recaptcha' );
           wp_dequeue_script( 'wpcf7-recaptcha' );    
           wp_dequeue_style( 'wpcf7-recaptcha' );
    });
    

    Now the part is done where the ReCAPTCHA script is no longer loading. You can examine the site with the Network tool. Just go on a page, click right in your mouse, click on “examine” and then click on “network”. We have the example of the WEVENTURE Contact page. You can see everything that is loading on the right side, like Javascript, the font etc. There is no need to fully understand this right now. Just pay attention to the very last line saying “js.js.”

    Javascript ReCAPTCHA Code vor der SEP-optimierung

    Implementing the new code

    So, we still want it to be in use when someone fills out a contact request or is subscribing to our awesome WEVENTURE Newsletter. Therefore a new Javascript file is created. The code is activated when someone clicks into the field. It looks like this and is calling the ReCAPTCHA.js function:

    function cf7_defer_recaptcha() {
       wp_enqueue_script('cf7recap', get_template_directory_uri() . '/recaptcha.js', array('jquery'), '1.0');
    }
    add_action('get_footer', 'cf7_defer_recaptcha');
    

    Great! Almost done! Almost…

    This code is implemented to load the ReCAPTACHA Form, so it will work properly. For safety reasons we did not show our ReCAPTCHA key. But we marked it with “Put your own key here”, which is exactly where you will put your key when using this code for your site.

    var captchaLoaded = false;
    
    $( document ).ready(function() {
    
    //Load reCAPTCHA script when CF7 form field is focused
    $('.wpcf7-form input').on('focus', function() {
    // If we have loaded script once already, exit.
    if (captchaLoaded)
    {
    return;
    }
    
    // Variable Intialization
    console.log('reCAPTCHA script loading.');
    var head = document.getElementsByTagName('head')[0];
    var recaptchaScript = document.createElement('script');
    var cf7script = document.createElement('script');
    
    // Add the recaptcha site key here.
    var recaptchaKey = 'PUT YOUR OWN KEY HERE';
    
    // Dynamically add Recaptcha Script
    recaptchaScript.type = 'text/javascript';
    recaptchaScript.src = 'https://www.google.com/recaptcha/api.js?render=' + recaptchaKey + '&ver=3.0';
    
    // Dynamically add CF7 script
    cf7script.type = 'text/javascript';
    
    cf7script.text = "!function(t,e){var n={execute:function(e){t.execute(\"" + recaptchaKey +"\",{action:e}).then(function(e){for(var t=document.getElementsByTagName(\"form\"),n=0;n<t.length;n++)for(var c=t[n].getElementsByTagName(\"input\"),a=0;a<c.length;a++){var o=c[a];if(\"_wpcf7_recaptcha_response\"===o.getAttribute(\"name\")){o.setAttribute(\"value\",e);break}}})},executeOnHomepage:function(){n.execute(e.homepage)},executeOnContactform:function(){n.execute(e.contactform)}};t.ready(n.executeOnHomepage),document.addEventListener(\"change\",n.executeOnContactform,!1),document.addEventListener(\"wpcf7submit\",n.executeOnHomepage,!1)}(grecaptcha,{homepage:\"homepage\",contactform:\"contactform\"});";
    
    // Add Recaptcha Script
    head.appendChild(recaptchaScript);
    
    // Add CF7 Script AFTER Recaptcha. Timeout ensures the loading sequence.
    setTimeout(function() {
    head.appendChild(cf7script);
    }, 200);
    
    //Set flag to only load once
    captchaLoaded = true;
    });
    });
    

    Checkmate!

    We examined the page with the Network tool. And you can see the results by clicking into a field in the contact form. I clicked on the “name” field. You can see the little bar. And that is when the code works. On the right side the “js.js.” line is no longer the last line. Plus, the ReCAPTCHA logo appeared on the page! Now it is loading the ReCAPTCHA part. And our ReCAPTCHA form is seo-optimized!

    Javascript Code nach der SEO-optimierung

    4. Impact and conclusion

    In SEO it is not always easy to pin one change made to a direct improvement of the site. It is consistent work and optimization that has a positive impact on page speed. However, by regularly checking our Page Speed Score, we could see that our page speed insights scores for WEVENTURE page have improved

    Page Speed Insight Score für WEVENTURE Seite

    Especially on the Desktop we got an overall score of 95. The mobile improvement went from 38 up to 42. We will keep working on optimizing our site and keep you updated about useful changes that could help you with your website as well. If you do not want to miss anything don’t forget to sign up for our Newsletter. Feel free to contact us if any questions arise!

    Nora Plato
    Nora Plato Working Student Digital Marketing

    Do you have questions about the blog entry or are you looking for professional support in this or any other area?
    Then feel free to send us an e-mail via our contact form.

    Contact

    More Blog Posts

    SEO importance during crisis
    Why marketers should invest in SEO during the crisis
    Funnel Darstellung
    Full funnel strategy: A marketing guide