The Stencil tester - SEO and web components

Welcome to the SEO checking project for web components created using StencilJS.

Why?

In this small web-site I want to check how search engines like Google and Bing index a website using web components, and how web components should be written to provide for optimal search engine optimization.

How?

Through the use of one case, an interactive addresscard web component, I will check how search engines do their indexing. The addresscard web component is written in two ways:

  1. Using attributes - all data is provided to the component in attributes, except for "children" data which is in a slot
  2. using slots - all data that is relevant for indexing is provided to the component in slots

I created 4 pages using the above described techniques:

AddressCard - attributes - with Amy Edwards and Elen May
AddressCard - slots - with Amy Edwards and Vanessa Adams
AddressCard - consumed from ReactJS - both with and without ReactJS bindings
AddressCard - consumed from Vue - direct use of web component

Storybook

No component examples are complete without Storybook.

The data

The data is a combination of the great Random User Generator service, and some hand-picking of random ocations on Google maps. I selected some random company addresses and telephone numbers to make sure the address exists, and I could select the real latitude and longitude on the map. If your company get's called too often I apologize! The query that I used to get random users was: 

https://randomuser.me/api/?nat=us&gender=female&results=4

Notes

Although StencilJS has the ability to do prerendering, it does not make sense in the case I want to test because pages with their components will be constructed dynamically.