Giter Club home page Giter Club logo

ember-seo-meta-tags's Introduction

Ember-seo-meta-tags

This Ember-CLI addon is used to add/change meta-tags and title on different pages of your single page application and thus make your website SEO friendly.

Installation

  • ember install ember-seo-meta-tags

To make it work follow the given steps

  1. Inside any route add the title and metaTags properties and it will be reflected in your single page application accordingly. you can even set these properties dynamically and this addon will pick those up for you.
  2. If title and meta tags are going to be dynamically set, then we advise you to set these in the afterModel hook in your route. If you want to set it later then you can use a service like prerender.io to make sure your meta tags and title are picked up by crawlers.
  3. If you want a single place where you can list all title and metaTags information related to all your routes then
    • Open a service named tags-data inside your hosting application. This service will be auto generated when you install this addon.
    • Add data in service in the format given below
import Ember from 'ember';

export default Ember.Service.extend({
// Basic convention that you must follow
// routeName must be as specified in router.coffee file  
// Eg for Route - this.route('products', {path: 'products/:pid'}), routeName will be 'products'
'routeName': {
    title: 'Your title goes here',
    metaTags: [
      {
        tagName: 'description',
        tagContent: 'Text for description meta tag goes here'
      }, {
        tagName: 'keywords',
        tagContent: 'Keyword 1, keyword 2, keyword 3'
      }
      // You may add as many meta tags as you want
    ]
  }
});

Examples

Usage inside routes

// hostingApp/routes/home
export default Ember.route.extend({
 title: 'Home Page',
 metaTags: [
      {
        tagName: 'description',
        tagContent: 'Contact us to know more deals'
      }, {
        tagName: 'keywords',
        tagContent: 'choose us, '
      }
    ],
  model: function(){
   // Code for your model hook goes here
  }
});

Usage inside routes with dynamic data

// hostingApp/routes/home
export default Ember.route.extend({
 model: function(){
  //get your title and meta tags data here
 },
 afterModel: function(model){
  //set the title and meta tags from model data
  this.set('title', model.data);
  this.set('metaTags', model.data);
 }
})

Usage with service

export default Ember.Service.extend({
  'contact-us': {
    title: 'Contact Us',
    metaTags: [
      {
        tagName: "description",
        tagContent: "Contact us to know more deals"
      }, {
        tagName: "keywords",
        tagContent: "contact us, more-deals"
      },{
        tagName: "og:title",
        tagContent: "Facebook Open Graph META Tags"
      }, {
        tagName: "viewport",
        tagContent: "width=device-width, initial-scale=1.0"
      }
    ]
  },
  'about-us': {
    title: 'About Us',
    metaTags: [
      {
        tagName: "author",
        tagContent: "Some crazy guitarist"
      },{
        tagName: "twitter:card",
        tagContent: "summary"
      },{
        tagName: "twitter:url",
        tagContent: "http://www.yourdomain.com"
      },{
        tagName: "st:image",
        tagContent: "http://www.yoursite.com/static/thumbnail.jpg"
      },{
        tagName: "st:published_at",
        tagContent: "2012-08-05T05:33:00-0700"
      }
    ]
  },
});

Demo Application

We have hosted a demo application where you can see this addon in action.

Further Reading

  • Read more about open graph here
  • Read more about swift type here

ember-seo-meta-tags's People

Contributors

karan-pathak avatar geoffharcourt avatar

Stargazers

Justin Drew avatar Nicholas Cole avatar Project  laborsaving k posts avatar rajat singla avatar  avatar

Watchers

Sanjeev Kumar avatar James Cloos avatar Jyotsna Ahuja avatar  avatar rajat singla avatar  avatar

ember-seo-meta-tags's Issues

Ember version upgrade breaks ember-seo-meta-tags

Recently I upgraded the Ember version in my project and the existing ember-seo-meta-tags package throws error in the browser as shown below.

loader.js:247 Uncaught Error: Could not find module emberimported fromember-seo-meta-tags/initializers/seo at missingModule (loader.js:247) at findModule (loader.js:258) at Module.findDeps (loader.js:168) at findModule (loader.js:262) at Module.findDeps (loader.js:168) at findModule (loader.js:262) at requireModule (loader.js:24) at resolveInitializer (index.js:34) at registerInitializers (index.js:47) at exports.default (index.js:28)

"ember-cli": "~3.6.1"
"ember-source": "~3.6.0"
"loader.js": "^4.7.0"

DEPRECATION: Intialize method in Intializer should only take one argument

DEPRECATION: The initialize method for Application initializer 'seo' should take only one argument - App, an instance of an Application. [deprecation id: ember-application.app-initializer-initialize-arguments] See http://emberjs.com/deprecations/v2.x/#toc_initializer-arity for more details.
at logDeprecationStackTrace (http://localhost:3000/assets/vendor.js:16422:19)
at HANDLERS.(anonymous function) (http://localhost:3000/assets/vendor.js:16533:7)
at raiseOnDeprecation (http://localhost:3000/assets/vendor.js:16452:12)
at HANDLERS.(anonymous function) (http://localhost:3000/assets/vendor.js:16533:7)
at invoke (http://localhost:3000/assets/vendor.js:16549:7)
at deprecate (http://localhost:3000/assets/vendor.js:16517:32)
at Object.deprecate (http://localhost:3000/assets/vendor.js:28359:37)
at http://localhost:3000/assets/vendor.js:15433:23
at Vertices.each (http://localhost:3000/assets/vendor.js:13508:13)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.