JohnFraney.ca

# Django, Vue, and other things, too

Lessons learned from a small side project

Building, and SEOptimizing Table to Markdown

Homepage of tabletomarkdown.com
Homepage of tabletomarkdown.com

Technical challenges

Trojan horse CSS

(I almost wrote "Trojan horCSS" but thought better of it.)

When an HTML element says it's contenteditable="true", it really means it. That element is so editable that it can change an entire page:

Table to Markdown CSS changing when pasting into a content editable div
Table to Markdown CSS changing when pasting into a content editable div

Hey! You stole my font!

What's going on there? On pasting a table from LibreOffice Calc, a secret stylesheet sneaks onto the scene and supersedes some site-wide styling.

// The rest of this Vue.js 2.x class-based component is omitted for brevity
@Component
export default class Editor extends Vue {
  public observer?: MutationObserver = undefined

  mounted() {
   // Prevent adding script and style tags on paste
   this.observer = new MutationObserver(filterForbiddenElements)
   this.observer.observe(this.$refs.pasteBox, { childList: true })
  }

  destroy() {
    if (!this.observer) {
      return
    }
    this.observer.disconnect()
  }
}

To stop this style stick-up, I added a MutationObserver to watch for HTML being added to the paste box and remove any offending elements, like <style> and <script>.

Partial tables

Take a look at this table:

A fully selected table? Maybe.
A fully selected table? Maybe.

Sure, the table content is selected—but is the table selected? It's hard to say. When I first coded Table to Markdown, selecting from just to the left of "Measurement" and just to the right of "25%" would result in HTML like this being added to the clipboard:

<th>Measurement</th>  
<th>Value</th>  
<th>Reduction</th>  
<tr>  
  <td>Max width</td>  
  <td>428px</td>  
  <td>32%</td>  
</tr>  
...

If you selected from above the table to below the table? You'd get a full <table> element, complete with a <thead> and <tbody>.


Traffic & SEO

For me, most of the fun of publishing side projects is having numbers to look at. It's even more fun if the numbers go up, so let's take a look at some numbers that go up and a couple ways to steer them in that direction.

Web traffic

First, let's take a look at web traffic since launch. I say "launch", but that's not quite true. The first real mention of Table to Markdown was in this blog post from December 9, 2019. That post got a decent amount of traffic, and 41 users decided to check out a "pre-launch version" of Table to Markdown, resulting in the first little spike near the y-axis:

Visitors November 28, 2019 - March 31, 2021
Visitors November 28, 2019 - March 31, 2021

The next big spike is in March 2021, and although I got excited when I first saw that traffic, I'm pretty sure that was bot traffic. Let's pretend that last spike doesn't exist.

Take another look at that chart, and look at the numbers going up! It's a slow and steady climb, but in a bit over a year, the site went from almost no traffic in a day to what looks to be peaks of around 150 users.

Speaking of peaks: what's up with all those ups and downs? It looks like a chart of yo-yo distance from the ground. It turns out that there is a good reason for those peaks and valleys: weekends.

If we zoom into the four weeks ending April 14, 2021, we can see that Saturday (March 20th & 27th, April 3rd & 10th) is consistently the slowest day of the week, with Sunday right behind:

Website traffic March 18 - April 14, 2021
Website traffic March 18 - April 14, 2021

What can we learn from this? In all likelihood, people are using Table to Markdown at work. Wednesday is often slower than Monday, Tuesday, and Thursday, too. Hump day? More like slump day.

Now that we've seen some numbers that go up, let's check out some more: organic search traffic.

Google traffic

Remember that graph "Users November 28, 2019 — March 31, 2021"? If we ignore that bot spike in March, the user traffic correlates well with the number of clicks per day from Google searches:

Google Search Console clicks November 28, 2019 — March 31, 2021
Google Search Console clicks November 28, 2019 — March 31, 2021

It correlates almost too well, doesn't it? A person might think that virtually all my traffic comes from Google. Well, a person thinking that would be wrong! Well, wrong. Okay: just a little wrong.

Here are the top 8 sources user traffic as of April 14th, 2021:

  1. Google (77.4%)
  2. Direct (9.5%)
  3. Bing (5.5%)
  4. DuckDuckGo (3.4%)
  5. Bing (China) (0.93%)
  6. My blog (0.57%)
  7. Ecosia (0.49%)
  8. GitHub (0.32%)

More than three out of every four users finds Table to Markdown via Google, and almost one in ten come to the site directly (presumably by copying a link from a search engine or social media instead of clicking it).

At first glance, non-Google, non-direct traffic is coming from all over. Apart from my blog and GitHub, though, there's sort of one source that accounts for 10% of my traffic: Bing.

Bing? Oh, right. Bing

Microsoft Bing logo
Microsoft Bing logo

If website users were money and Bing were a banana stand:

Arrested Development: "There's always money in the banana stand"
Arrested Development: "There's always money in the banana stand"

10% of users may not seem like a ton, but Google wasn't always my top source of traffic. Something I didn't expect when the site was young is that I got more traffic from Bing than I did from Google. (Good thing I submitted a sitemap to Bing Webmaster Tools!)

In the first three months after launch, I had 21 users from Google, and 34 users from Bing:

Web traffic by referral source, December 1, 2019 to March 31, 2020
Web traffic by referral source, December 1, 2019 to March 31, 2020

What about that other organic search traffic? Well, DuckDuckGo also uses Bing for most of its regular search results, as does Ecosia. Knowing that, Table to Markdown had 3x the traffic from Bing-powered search engines than from Google in the early days, and around 10% overall.

Don't forget about Bing!

To "convert" or not convert

My web copy focused on "converting" from a number of sources to Markdown, but as we can see from the following impression count, most users search how to generate Markdown tables:

Selected Google Search Console performance, March 19–25, 2021
Selected Google Search Console performance, March 19–25, 2021

Because of this, my click-through rate (CTR) for queries containing "convert" is pretty solid! I was a bit penny-wise, pound-foolish in this case because I optimized for less-common search terms instead of the most common search term for my content.


Take-aways

  1. Clipboard HTML can be a mangled mess, and pasting it into a content editable div can bork your site
  2. Submit a sitemap to Bing Webmaster Tools
  3. Use language that searchers use to describe your site and content