I had the idea for Cs Conversions while bored in an intro level hardware class. The professor had us doing binary and base conversions, and it wasn’t long before converting these values in my head or by hand got really tedious.

My friends and I were using these converters we found online to do a lot of these simple base conversion and calculations for us.

As a fun challenge, I wrote scripts to do just about every conversion or operation we had been taught in class.

A lot of the consulting I do involves helping clients get their Amazon listings to rank for certain keywords, and I have been interested for some time in learning how SEO for the web works.

I did some basic research using Neil Patel’s Uber Suggest tool. From these results, I decided that the keywords we were using to find these online converters were not considered to be competitive, and it might not be impossible to build something that ranked organically for the same keywords.

Around the same time I had just heard about Vuejs, and wanted to build something small to learn the basics of the framework.

The plan at this point was to create something where I could learn Vuejs and the basics of web SEO.

So I grabbed some boilerplate from the vue-cli and was off to the races turning my simple scripts into a client side app.

A lot of these online converters, my classmates and I were using, simply perform the operation and give you no explanation as to what is going on or the steps involved.

I was inspired to be a bit more ambitious and create something that would not only give answers to problems, but be educational and helpful to anyone taking a class like the one I was in.

I even made a trello board to keep track of it all.

In addition, I made a sad attempt at sketching some wire frames.

Through building the app I learned the basics of SEO, but more specifically, I learned about SEO in the context of single page javascript applications, or SPA for short.

There were a few hurdles I had to overcome with building a SPA that was optimized for SEO.

In a SPA, only a single index.html is served to the browser. The page content is then dynamically generated by javascript as the user navigates the app.

The first challenge is that when pages in the app change the meta tags that relate to SEO will not.

The meta tags will always be set to whatever we made them in that initial index.html file that got served to the browser.

We can get around this limitation by using something called the vue-meta package.

Using vue-meta we can manipulate the meta tags that relate to SEO in our vue app. With this package we’re no longer limited to the meta tag values initially set in our index.html.

The second challenge I faced with a SPA relates to how search engines crawl and index content.

Because the page content in a SPA is being dynamically created by javascript, when a search engine is trying to crawl a specific page, the SPA might not have generated all the necessary information in time for the search engine crawler. Or worse, to the search engine crawler, it may appear as if the content of the page is empty.

Search engines have gotten more sophisticated at crawling the content of single page apps by navigating through all the routes of the index.html bundle that initially gets served.

However, it is still considered best practice to ensure that when a search engine is crawling a page there is content being served.

The way that I solved this problem was using something called prerendering.

Prerendering in this context is very much what it sounds like. In anticipation, of a page being crawled by a search engine bot, all of the pages content is preloaded and generated. This is then cached.

When a request to a page in the app is made it looks at the request header.

If it is coming from a normal user then the page is loaded normally.

If it is coming from a search engine bot then the prerendered cached version of the page is served so the content can be crawled properly.

I made a tutorial on how to do prerendering in the vue-cli here.

After implementing the use of vue-meta, prerendering, along with a few other minor tweaks my app scored 100 in the SEO section of google lighthouse.

Google lighthouse is an open source tool you can find in the chrome dev tools under ‘audit’.

Scoring 100 in the SEO category is in no way a guarantee that your page will magically rank for your target keywords, but it serves as a benchmark that at least from a technical standpoint you’re covering a lot of your bases.

The next phase of this project will mostly entail writing more content in my app that targets the keywords I’m trying to rank for, as well as trying to get backlinks for the project.

Subscribe