, , ,

Single Page Applications (SPAs): How to Get Around the Tricky SEO Impact

Single Page Application

You’ve probably interacted with AngularJS numerous times, without even realising it. AngularJS and other react-style frameworks are slowly taking over the internet. To name a few popular sites currently using the technology – Upwork.com, Udemy.com and Youtube.com.

You definitely recognized the last one, nowadays a lot of people spend numerous hours each week scrolling through the latest YouTube video clips. And you would agree that using the YouTube website is a pleasant experience. 

Angular JS SEO

 

React-style frameworks create a more streamlined web experience for both the site users and web developers.

What Is A Single Page Application?

Firstly, Single Page Applications (SPAs) and Single Page Websites are not the same thing. SPAs are web apps using dynamic updates to load a single HTML page and update information as the user interacts with the website or app.

With the use of HTML5 and AJAX, Single Page Applications create a fluid and responsive experience, without constantly reloading the page. Also, the JavaScript updates happen on the client side.

How Single Page Application Work

Traditional websites load each individual page while the user navigates through the site. This includes calls to the server and cache, loading of resources, and page rendering. SPAs cut out a lot of the back-end activity by loading the whole website when a user lands on any of the website pages. This means that a single HTML page is updated dynamically while the user interacts with the website.

How Does Single Page Applications Impact Web Crawlers?

The biggest benefit of Single Page Applications, is that the user has a streamlined speedy interaction with a website. Web developers also enjoy using it, with an effective universal template that allows for easy customization, testing and page optimization.

But the downside of an Angular or React site, is the SEO challenge. With all the data hidden in the background, it’s not only hidden from the site visitors, the Googlebots can also not access the information.

The Google crawlers rely extensively on HTML/CSS data to interpret and render site content. If the HTML content is hidden behind the site scripts, the crawlers have no content to use for indexing to list a website in the search results.

According to Google it is possible to crawl JavaScript and with a few SEO tests their claims are true. But the Googlebots still seem to struggle with most sites built on a Single Page Application framework. Oftentimes the only search engine results page (SERP) that appears after a crawl of the website, is the homepage.

The other issue that arises, is capturing Google Analytics data. The data is tracked by collecting pageviews when a user navigates from page to page. Without the usual HTML response trigger, the pageviews can’t be collected effectively.

A Five Step SEO Solution for Websites Using Single Page Applications

These steps will assist you to index pages for search engines, as well as rank on the first page of search engine results for specific keywords. Firstly, you need to create a list of all the site pages. Next you must install Prerender and activate the “Fetch as Google” feature. Thereafter the Google Analytics must be configured. Lastly, the site needs to be “recrawled”.

Step 1: Create A List of All Your Site Pages

If you’re thinking “this will take me ages to do”, grin and bear it, in the end it will be worth it. You might be lucky and all you need to do is export an XML sitemap for your site. Even if you have hundreds of pages, this task will help you to create a reference guide to consult while indexing your site. The list will also help to pinpoint any issues that might pop up during SEO optimization.

Tip: divide the content into sub directories, instead of listing individual pages.

Step 2: Install Prerender

This is a crucial element for effective SEO on a website operating on a Single Page Application framework. The Prerender service renders your site in a virtual browser. Next it provides web crawlers with the static HTML content.

With this solution you are getting the best of both world. Your users can still enjoy the speedy SPA experience and the search engine crawlers are happy with the indexable content for effective search results.

View Prerender’s pricing

Step 3: “Fetch as Google”

This is a very handy feature in the Google Search Console. You can enter a URL from your website and fetch the data in the same way a Googlebot would while crawling your site. Selecting “Fetch” will provide you with the HTTP page response, including a download of the source code, the way that a Googlebot interprets it. The “Fetch and Render” option offers you a page screenshot, showing you how Googlebot and site visitors view the page.

Even though Prerender can improve your site indexing, sometimes Google still displays some pages only partially. Or key features might not be featured. By using the “Fetch” or “Fetch and Render”, you can also assess the keyword rankings. Furthermore, you can use the “Request Indexing” option to improve the search results.

Step 4: Configure Your Google Analytics

Because Google has trouble fetching Google Analytics data from a Single Page Application framework, you need to use an alternative method in addition to the traditional tracking code.

Use the Angulartics plugin to replace the standard pageview tracking with virtual pageview tracking. The plugin tracks the user navigation across the entire site. It compensates for the SPAs loading HTML content dynamically, by creating a virtual version of the traditional Analytics tracking.

Another option is to use the Google Tag Manager “History Change” triggers. The biggest challenge is to make sure your Google Analytics record the user interactions with your pages, replacing the pageviews method.

Step 5: Recrawl Your Site

Once you have completed steps 1 to 4, you need to manually check that all the possible crawling errors have been removed. Prerender is a handy application to use, but sometimes a few technical hiccups can still pop up.

Storyteller Design Can Assist You with SEO Ranking for Single Page Applications

We’re not going to lie to you, the SEO process for a Single Page Application site is very tedious and troublesome. But luckily you can make use of our professional SEO services to take care of it for you.

We have the tools and knowhow to tackle this process on your behalf and make sure that you can offer site visitors the dynamic SPA interaction experience on your website, while keeping the GoogleBots happy.

Take our free SEO audit now.

 

/0 Comments/by
, , , , , , , , ,

How to redirect Contact Form 7 to a thank you page.

How To Redirect Contact Form 7 To Thank You Page

UPDATED 14-02-2019

We love using the WordPress plugin Contact Form 7 for the websites we build for our clients. It is extremely easy to use but very powerful and has reasonable documentation. A big plus for us is that it is a much loved plugin in the WordPress community and so answers and solutions can be found for almost all issues on sites like Stack Overflow and WordPress support.

At Storyteller Design we help out clients drive traffic to their sites through SEO and Google AdWords as well as the other search engine marketing like Bing Ads. One of the most important metrics for us is the conversion of these visitors to our client’s sites. A conversion is whenever someone completes a contact form, downloads a pdf or information sheet or calls the client.

Contact Form 7 How To Redirect To Thank You Page

We use Contact Form 7 for most of our contact forms and download forms. Once the form has been completed and the submit/download button clicked we want to redirect the visitor to a page where we can log that conversion in Google Analytics and pass that information back to our Google AdWords campaign.

Contact Form 7 used to suggest using an easy copy and paste technique to redirect to your thank you page. However this method has been depreciated by Contact Form 7 and will no longer work after the end of 2017. This leaves two options.

Go to the “Contact” menu item in your WordPress back end side bar, click on the form you want to redirect and then click on the “Additional Settings” tab.

Add this code into the field provided:

[javascript]
on_sent_ok: "location = ‘http://www.example.com/thank-you/’;"
[/javascript]

You need to replace the http://www.example.com/thank-you/ with the url of your thank you page.

 

  1. If you are not familiar with coding you can use a plugin called Contact Form 7 Redirection. They have both a free option available through WordPress but their Pro version adds some fantastic functionality that we often use for our clients.

Contact FOrm 7 Redirection

This plugin uses the “wpcf7_mail_sent” action hook to redirect to the thank you page, and this hook shouldn’t be depreciated soon. This plugin has been tested to WordPress version 5.0.3 so it will continue to work well for you. It requires Contact Form 7 version 4.8 or later.

We suggest you try this plugin first and if it doesn’t work then move onto the second option.

  1. Use some php in your child-themes functions.php file.

The method now recommended in the Contact Form 7 documentation is to use javascript to redirect when the wpcf7mailsent event occurs. The code to use is:

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'http://yourdomain.com/thank-you';
}, false );
</script>

If you only use one contact page, or only use on thank you page then all you need to do copy and paste the code below into your child theme’s function.php file.

//This function prints the JavaScript to the footer
function cf7_footer_script(){ ?>
 
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'http://yourdomain.com/thank-you';
}, false );
</script>
 
<?php } 
 
add_action('wp_footer', 'cf7_footer_script');

Again remember to replace the http://example.com/thank-you with your thank you page.

However we often use multiple contact form 7 forms on a website with multiple thank you pages. This is because we want to know exactly which pages, forms and calls to actions are converting our website visitors into leads so we send more traffic there, and optimise our conversion funnels.

In order to redirect different contact form 7 forms to different thank you pages you need to use the code below:

<?php
//This function prints the JavaScript to the footer
function cf7_footer_script(){ 

//if page name is contact.
if ( is_page('contact')) {?>
 
	<script>
	document.addEventListener( 'wpcf7mailsent', function( event ) {
			location = 'http://example.com/thank-you';
		}, false );
	</script>
 
<?php } 
	
}
add_action('wp_footer', 'cf7_footer_script');

Here is an example of the code for two different pages.

<?php

//This function prints the JavaScript to the footer
function cf7_footer_script(){ 

//if page name is contact.
if ( is_page('contact')) {?>
 
	<script>
	document.addEventListener( 'wpcf7mailsent', function( event ) {
			location = 'http://example.com/thank-you';
		}, false );
	</script>

<?php } else if ( is_page('download')) /* if page name is download */ {?>
 
	<script>
	document.addEventListener( 'wpcf7mailsent', function( event ) {
			location = 'http://example.com/thank-you';
		}, false );
	</script>
 
<?php } 
	
}
add_action('wp_footer', 'cf7_footer_script');

We hope this helps. It is important to note that this code will redirect all contact forms one a page to the same thank you page.

Please let us know if you have any questions in the comments below.

How to redirect contact form 7 to thank you page

/1 Comment/by