Created
March 29, 2021 04:09
-
-
Save koyanloshe/e3dfba2c3b8f998e721cc2b3f1f6dc83 to your computer and use it in GitHub Desktop.
JS for SEO
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<nav> | |
<ul> | |
<li><a href="/products">Our products</a></li> | |
<li><a href="/services">Our services</a></li> | |
</ul> | |
</nav> | |
<h1>Welcome to example.com!</h1> | |
<div id="placeholder"> | |
<p>Learn more about <a href="/products">our products</a> and <a href="/services">our services</p> | |
</div> | |
<script> | |
function goToPage(event) { | |
event.preventDefault(); // stop the browser from navigating to the destination URL. | |
const hrefUrl = event.target.getAttribute('href'); | |
const pageToLoad = hrefUrl.slice(1); // remove the leading slash | |
document.getElementById('placeholder').innerHTML = load(pageToLoad); | |
window.history.pushState({}, window.title, hrefUrl) // Update URL as well as browser history. | |
} | |
// Enable client-side routing for all links on the page | |
document.querySelectorAll('a').forEach(link => link.addEventListener('click', goToPage)); | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
fetch('/api/products/' + productId) | |
.then(function (response) { return response.json(); }) | |
.then(function (apiResponse) { | |
if (apiResponse.isError) { | |
// get the robots meta tag | |
var metaRobots = document.querySelector('meta[name="robots"]'); | |
// if there was no robots meta tag, add one | |
if (!metaRobots) { | |
metaRobots = document.createElement('meta'); | |
metaRobots.setAttribute('name', 'robots'); | |
document.head.appendChild(metaRobots); | |
} | |
// tell Googlebot to exclude this page from the index | |
metaRobots.setAttribute('content', 'noindex'); | |
// display an error message to the user | |
errorMsg.textContent = 'This product is no longer available'; | |
return; | |
} | |
// display product information | |
// ... | |
}); | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
class MyComponent extends HTMLElement { | |
constructor() { | |
super(); | |
this.attachShadow({ mode: 'open' }); | |
} | |
connectedCallback() { | |
let p = document.createElement('p'); | |
p.innerHTML = 'Hello World, this is shadow DOM content. Here comes the light DOM: <slot></slot>'; | |
this.shadowRoot.appendChild(p); | |
} | |
} | |
window.customElements.define('my-component', MyComponent); | |
</script> | |
<my-component> | |
<p>This is light DOM content. It's projected into the shadow DOM.</p> | |
<p>WRS renders this content as well as the shadow DOM content.</p> | |
</my-component> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment