Search Engine Optimization for Career and Program Explorer

The Career and Program Explorer (CPE) uses the Vue Router which is a way for the CPE to function as a single page application (SPA). The CPE SPA has two different ways of being used which are Non-SEO and SEO history. Non-SEO history works with no server configurations, if you wish to use Non-SEO history then these instructions do not apply to you. SEO history requires a small amount of server configuration to make the CPE fully usable. We recommend doing the following in test in a server location or folder that not actively being accessed by the public. Once you get it all configured we recommend then you can make it in a location or folder that publicly accessible.

When SEO mode is enabled the following will occur:

• A canonical <link> will added to all the pages of the CPE.
• A different browser URL, without a hash, will be used to make it SEO friendly.

Setting up the Embed CodeLink to this section

The first step is generate a CPE embed code that has SEO History enabled.

1. On the CPE embed code page, make sure the SEO History is turned on.
2. Provide a SEO Base Path field as a root relative path on the web server of where you desire to place the test CPE on your website.
   • Example: /testing-dev/career-and-program-explorer/
3.  Once that is filled out along with all other settings, copy the embed code that is shown on the form.
4. Create a page on your website at that the exact location that you specified in the SEO Base Path.
   • If you stated, /testing-dev/career-and-program-explorer/, then you would make an index, default, or whatever the server default index page is called in the folder of /testing-dev/career-and-program-explorer/
   • This page should only contain your header and footer and a empty area between them for the CPE embed code.
5. On this page, add the CPE embed code that was copied from the CPE embed code page.
6. Make your webpage visible on the website.
7. You will notice that the CPE will be usable as expected but not if you go directly to a given page of the CPE, you will see a not found and/or server error. This is where the server configurations will need to be made to handle this.

Setting up the ServerLink to this section

The second step to make SEO history work is to do server configurations. This task is very technical.

A summary of what the server configuration does is at the server level there is one file and we rewriting all the sub folder paths to the that one given file. This is a very common practice for SPAs to achieve an SEO and user friendly URL.

1. Review the Example Server Configurations from the Vue Router website.
2. Choose a configuration based upon what your server type is.
3. Add the configuration to your web server in the desired location.
   • These configurations may need to be changed to work with your web server as no web server is setup exactly the same.
   • Make sure you modify the configuration to contain similar information that you had specified on the SEO Base Path of /testing-dev/career-and-program-explorer/ from Setting up the Embed Code
4. Once the server configuration is applied, test the CPE by navigating to a page of it and refreshing the page to make sure that you no longer receive a not found or server error.
5. Final Step 
   • If you still receive an error, please review the SEO Base Path of the CPE and the server configurations to make sure they are matching.
   • If everything works, move the configurations, making the path adjustments of the CPE embed and server configuration into its final folder location.

Example Server ConfigurationLink to this section

The code example contains .htaccess configuration modified from the Example Server Configurations page. The example folder is /testing-dev/career-and-program-explorer/ and the CPE SEO Base Path is /testing-dev/career-and-program-explorer/ and the Default Index page is index.html

.htaccess
---------------
<IfModule mod_rewrite.c>
		  RewriteEngine On
		  # remove index.html if go directly to the index.html file.
		  RewriteCond %{REQUEST_FILENAME} index.html
		  RewriteRule (.*) /testing-dev/career-and-program-explorer/ [R=301,L]
		  # otherwise serve everything through given directory.
		  RewriteBase /testing-dev/career-and-program-explorer/
		  RewriteRule ^index\.html$ - [L]
		  RewriteCond %{REQUEST_FILENAME} !-f
		  RewriteCond %{REQUEST_FILENAME} !-d
		  RewriteRule . /testing-dev/career-and-program-explorer/ [L]
</IfModule>

CPE embed code
---------------
...
"seoHistory": true,
"seoBasePath": "/testing-dev/career-and-program-explorer/"
...