stevevance / ttp-2016-transit-investments

Map of the transit investments in 2016
11 stars 5 forks source link

Improve site searchability #43

Closed yfreemark closed 8 years ago

yfreemark commented 8 years ago

Improve search engines' ability to search site and be able to, for example, identify the site as a place where information about specific projects can be found.

stevevance commented 8 years ago

I'm not sure of the best way to do this.

Google can't read the map marker popups. It can read HTML that's hidden (which we could hide under the guise of having it for screen readers).

Each map marker popup can get a permalink, but I don't think these will actually have any SEO.

stevevance commented 8 years ago

I asked The Spatial Community's leafletjs channel. stuporglue said:

"Part of the URL you push into their history needs to contain the map info — map center, zoom level, selected layers, which feature has a popup. You could do this in a query string, for example.

[11:46] Then when the page loads, you would parse that query string, either server side, or with JavaScript, and set up the same scenario with the map.

[11:47](obviously, the map setup would be in JS, but you could do the parsing server side and dynamically generate the appropriate JS)

Nope, that’s the next step, and where I’m slightly less sure on best practices, but here’s what I think would work:

[11:50] On your page, you would have a section of hidden content, which has the popup contents and any other human and search-engine friendly metadata. You might even stick it in your

where Leaflet gets initialized, maybe?

You’d set the contents of this page on the server so that each query string mentioned above has unique content.

This unique content is what people would find when searching.

[11:50] Finally, you’d need to have a list of links somewhere on each page that would lead to other pages, so that Google could follow the links and find each of those pages.

Actually since the popup contents is maybe the only important part (and not the zoom level or layers), I might make my URLs something like:

http://www.thetransportpolitic.com/transitexplorer//#12/39.2900/-76.6100

do you know how Facebok and Twitter make AJAX interactivity and permalinks but without # urls?

[11:53] For example, when you click on a photo in Facebook, the URL changes, but your browser didn't reload the page.

stuporglue [11:53 PM] with the history.pushState() you can change the actual URL, you’re not limited to the #hash part

stevevance commented 8 years ago

This isn't a priority, and I don't know how to do it.