Changes needed for How's my Waterway.

dblodgett-usgs commented 4 years ago

Need to work up an example json-ld for How's My Waterway and list of changes that should be made to the web page (rel: canonical).

ksonda commented 4 years ago

Working this up here.

https://github.com/ksonda/geoconnex_prep/blob/master/epa/hmw/jsonld-hmw-template.md

dblodgett-usgs commented 4 years ago

I think we should drop the for the time being.

"gsp:intersects": ["https://geoconnex.us/ref/places/5102112","https://geoconnex.us/ref/counties/51179","https://geoconnex.us/ref/states/51]
 "geo": [
  {
   "@type": "schema:GeoCoordinates",
   "schema:latitude": 38.3509973927964,
   "schema:longitude": -77.3048611435762
  },
  {
   "@type": "schema:GeoShape",
   "schema:url": "https://labs.waterdata.usgs.gov/api/nldi/linked-data/huc12pp/020700110204/basin",
  }
 ]

There's more to work out on that front and I wouldn't want to get the wrong content into the HMW pages given that the are in production.

ksonda commented 4 years ago

So for now just this?

{
 "@context": [   
  "https://schema.org"
 ],
 "@id": "https://geoconnex.us/epa/hmw/020700110204",
 "@type": "WebPage",
 "name": "Accokeek Creek (020700110204)",
 "description": "EPA How's My Waterway Community as Twelve-Digit Hydrologic Unit",
 "about": "https://geoconnex.us/nhdplusv2/huc12/020700110204"
}

ksonda commented 4 years ago

ok. I walked through it in baby steps. If you think good I'll send to Dwane and Shelly.

This document shows what needs to happen for HMW pages. HMW pages now have persistent identifiers corresponding to every NHDPlusV2 HUC12, of pattern https://geoconnex.us/epa/hmw/{HUC12}

The actual HMW pages currently generate this HTML <\head> block:

<!doctype html>
<html class="js" lang="en" dir="ltr">
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="ImageToolbar" content="false"/>
        <meta http-equiv="cleartype" content="on"/>
        <meta name="HandheldFriendly" content="true"/>
        <link rel="shortcut icon" href="https://www.epa.gov/sites/all/themes/epa/favicon.ico" type="image/vnd.microsoft.icon"/>
        <meta name="MobileOptimized" content="width"/>
        <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/>
        <meta name="DC.description" content="An application for learning the condition of local streams, lakes and other waters anywhere in the US... quickly and in plain language."/>
        <meta name="description" content="An application for learning the condition of local streams, lakes and other waters anywhere in the US... quickly and in plain language."/>
        <meta name="DC.title" content="How's My Waterway?"/>
        <meta name="keywords" content="Clean Water Act (CWA), Safe Drinking Water Act (SDWA), pollution, impaired waterbodies"/>
        <link rel="canonical" href=""/>
        <link rel="shortlink" href=""/>
        <meta name="DC.language" content="en"/>
        <meta name="DC.Subject.epachannel" content="Learn the Issues"/>
        <meta name="DC.type" content="Data and Tools"/>
        <meta name="DC.creator" content="US EPA"/>
        <meta name="theme-color" content="#0071bc">
            <title>How’s My Waterway? | US EPA</title>
            <link rel="manifest" href="/site.webmanifest" crossorigin="use-credentials">
                <link rel="stylesheet" href="https://www.epa.gov/sites/all/libraries/standalone/css/core/style.css"/>
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab|Source+Sans+Pro:700i&display=swap">
                <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css"/>
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
                <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"/>
            <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
            <link rel="manifest" href="/site.webmanifest">
            <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#ffffff">
                <meta name="msapplication-TileColor" content="#2b5797">
                <meta name="theme-color" content="#ffffff">
                    <style>.epa-search .form-text{display:inline-block;margin-top:0}.main-footer .region-footer .row{margin:0}.main-footer .region-footer .col:first-of-type{padding-left:0}.main-footer .region-footer .col:last-of-type{padding-right:0}</style>
                    <script>!function(e,t,a,n,g){e[n]=e[n]||[],e[n].push({"gtm.start":(new Date).getTime(),event:"gtm.js"});var m=t.getElementsByTagName(a)[0],r=t.createElement(a);r.async=!0,r.src="//www.googletagmanager.com/gtm.js?id=GTM-L8ZB",m.parentNode.insertBefore(r,m)}(window,document,"script","dataLayer")</script>
                    <script>if(function(t,e,a,n,o,i,c){t.GoogleAnalyticsObject=o,t.ga=t.ga||function(){(t.ga.q=t.ga.q||[]).push(arguments)},t.ga.l=1*new Date,i=e.createElement(a),c=e.getElementsByTagName(a)[0],i.async=1,i.src="//www.google-analytics.com/analytics.js",c.parentNode.insertBefore(i,c)}(window,document,"script",0,"ga"),window.isIdSet=!1,document.location.hostname.indexOf("epa.gov")>-1?(ga("create","UA-32633028-1","auto"),ga("send","pageview"),isIdSet=!0):"mywaterway-stage.app.cloud.gov"===document.location.hostname?(ga("create","UA-37504877-4","auto"),ga("send","pageview"),isIdSet=!0):"mywaterway-dev.app.cloud.gov"!==document.location.hostname&&"localhost"!==document.location.hostname||(ga("create","UA-37504877-3","auto"),ga("send","pageview"),isIdSet=!0),isIdSet){let t;"function"==typeof Event?t=new Event("locationchange"):(t=document.createEvent("Event"),t.initEvent("locationchange",!1,!1)),window.addEventListener("locationchange",(function(t){ga("set","page",window.location.pathname),ga("send","pageview")}));var pushState=history.pushState;history.pushState=function(){pushState.apply(history,arguments),window.dispatchEvent(t)};var replaceState=history.replaceState;history.replaceState=function(){replaceState.apply(this,arguments),window.dispatchEvent(t)},window.addEventListener("popstate",(function(){window.dispatchEvent(t)})),document.addEventListener("click",(function(t){if(t.target.onclick&&t.target.textContent){const e=t.target.title?"ow-hmw2-"+t.target.textContent+" - "+t.target.title:"ow-hmw2-"+t.target.textContent;ga("send","event","buttonClick",e,window.location.pathname)}if("a"===t.target.tagName.toLowerCase()&&"_blank"===t.target.target){const e=t.target.href;let a="Web-service";if(document.location.hostname===t.target.hostname){const t=e.split(".").pop;a=".pdf"===t||".zip"===t?"Download":"Internal"}else a="External";ga("send","event",a,"ow-hmw2-"+t.target.text,e)}}))}</script>
                    <link href="/static/css/2.f1c8785f.chunk.css" rel="stylesheet">
                <link href="/static/css/main.8afc9e08.chunk.css" rel="stylesheet">
    </head>

The following 2 changes would be sufficient in the short term:

Change the line <link rel="canonical" href=""/> to include the PID (e.g. <link rel="canonical" href="https://geoconnex.us/epa/hmw/020700110204"/>). This ensures that when search engines crawl the geoconnex PID, they index the page they redirect to.
Insert the following block within this head block (modified as appropriate for each HUC12/ pid). This will help improve search results, and help search engines return structured/ highlighted content to users. This is a minimal block that can be built on further as we figure out some more best practices. Eventually, we hope to build an "internet of water" crawler that will be able to crawl all the pages with geoconnex PIDs, and infer and store relationships between web resources like HMW and persistently identified features in a search index. We can then use this index to create a more generalized metadata catalog or other discovery tool with all kinds of semantic and hydrologic search parameters.

<script type="application/ld+json">
{
 "@context": [   
  "https://schema.org"
 ],
 "@id": "https://geoconnex.us/epa/hmw/020700110204",
 "@type": "WebPage”,
 "name": "Accokeek Creek (020700110204)",
 "provider": "https://epa.gov",
 "description": "EPA How's My Waterway Community as Twelve-Digit Hydrologic Unit",
 "about": "https://geoconnex.us/nhdplusv2/huc12/020700110204"
}
</script>

Walking through the block:

Needs to be within tag for web crawlers to read
The "@context" array imports any controlled vocabulary namespaces and/or terms necessary for web crawlers to properly interpret the rest of the structured data.
"@id" identifies the resource (ideally with a PID) as a node in a wider graph of linked data, which the following structured data describes.
"@type identifies the type of resource. We are still figuring this out, as we need to distinguish between real-world features of various kinds, web pages about those features (what HMW is), and actual data sources (also of various kinds).
"name" provides a human-readable name.
"provider" identifies of the provider of the resource. Eventually probably a key semantic search parameter in a discovery tool.
"description" helpful human-readable description
"about" is KEY, and provides the identifier for the real-world feature the resource is "about". This is a key linking property that will be used to build, infer, and display linkages between web resources and data sources that describe the same/related real-world resources. In this case, the reference HUC12.

ksonda commented 4 years ago

sent to Dwane and Shelly, closing until further development needed. BUT, might conisder adding generalized advice with a similar minimal example to the front README

dblodgett-usgs commented 4 years ago

+1 -- sorry I didn't have time to get to a review. This looks fantastic. There is a type in your JSON on "WabPage, though.

internetofwater / geoconnex.us

Changes needed for How's my Waterway. #64