Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/itsteknas/meta-seo-helper
Meta Tags helper for SEO of SPA's. To be used in conjunction with Firebase cloud hosting and firebase functions.
https://github.com/itsteknas/meta-seo-helper
firebase-functions firebase-hosting seo seo-meta seo-optimization single-page-app spa
Last synced: about 2 months ago
JSON representation
Meta Tags helper for SEO of SPA's. To be used in conjunction with Firebase cloud hosting and firebase functions.
- Host: GitHub
- URL: https://github.com/itsteknas/meta-seo-helper
- Owner: itsTeknas
- Created: 2019-02-07T13:11:14.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-18T12:38:58.000Z (almost 6 years ago)
- Last Synced: 2024-11-15T10:56:53.503Z (about 2 months ago)
- Topics: firebase-functions, firebase-hosting, seo, seo-meta, seo-optimization, single-page-app, spa
- Language: JavaScript
- Size: 1.54 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Firebase Hosting meta tag SEO helper
Very Lightweight, Meta Tags helper for SEO of SPA's.
Adds meta tags for social media previews to the html page.
To be used in conjunction with Firebase hosting and Firebase functions, example below.
## Previews
| Facebook | Twitter |
|:-:|:-:|
|  |  |
## Ideology
Google by itself is capable of executing javascript on the page for Content-Based SEO purposes, but a static SPA will still fail to render in social media link previews.
Solutions like Angular universal are utopian but still have a lot of caveats and "GOTCHAS".
Some external libraries you like may heavily depend on DOM and the usage of `window`.
So the middle way out is:
Just render the meta tags on the serverside, leave the rest to the browser.
## Installation
`npm install --save meta-seo-helper`
## Basic Usage
```javascript
const Template = require('meta-seo-helper').Template;
console.log(
Template.fromFile(__dirname + '/index.html')
.render()
.withNameMetaTag({
key: 'name1',
content: 'value1'
})
.withNameMetaTags([{
key: 'name2',
content: 'value2'
}])
.withPropertyMetaTag({
key: 'name3',
content: 'value3'
})
.withPropertyMetaTags([{
key: 'name4"',
content: 'value4"'
}])
.withViewPortTag()
.withDescriptionTag("Yolo")
.withKeywordsTag(["star", "wars"])
.withCustomTag("")
.toHtml()
)
```
This will add the following tags to your html:
```html
```
## Usage with firebase hosting
In `firebase.json`, add the following redirect to function when a route is called
```json
{
"hosting": {
...
"rewrites": [
{
"source": "/event/**",
"function": "render"
},
...
],
},
"functions": {
"predeploy": [
"ng build --prod",
"cp dist/index.html functions/index.html"
]
}
}
```
In firebase function `index.js`,
```javascript
const functions = require('firebase-functions');
var express = require('express');
const app = express();
const Template = require('meta-seo-helper').Template;
const indexTemplate = Template.fromFile(path.join(__dirname, 'index.html'));
app.get('/event/:eventid', (req, res, next) => {
return new Promise((resolve, reject) => {
// Get item specific information
return indexTemplate
.render()
.withDescriptionTag("Description")
.withPropertyMetaTags([{
key: 'og:title',
content: event.name.substring(0, Math.min(35, event.name.length))
},
{
key: 'og:type',
content: "website"
},
....
])
.withNameMetaTags([{
key: 'twitter:card',
content: 'summary_large_image'
},
{
key: 'twitter:site',
content: '@blackcurrantapp',
},
{
key: 'twitter:creator',
content: '@it_teknas'
}
])
.withCustomTag(`\n`)
.toHtml();
}).then(html => {
res.set('Cache-Control', 'public, max-age=600, s-maxage=1200');
res.send(html);
return;
}).catch(err => {
res.send(err);
})
});
exports.render = functions.https.onRequest(app);
```