vinaygopinath / ngmeta Goto Github PK

When I try to include ngMeta.js file it always say this. Kindly help me

Hi,
Have followed your steps 1-5 carefully.

Both grunt serve and build always yield the following:
<title ng-bind="ngMeta.title"></title> <meta name="description" content="{{ngMeta.description}}">

after correcting configuring and adding the preferred meta on the page in question:

    data: {
      meta: {
        'title': 'Home page',
        'description': 'This is the description'
      }
    }

In the controller have also tried the following with no effect:

ngMeta.setTitle('Demo page');
ngMeta.setDescription('This is the description of the demo page');

No errors in the console.

Hope you can help

Hey,

Great library for Angular, thank you!

But I have some issues about Google indexing. I checked the other issues related this one but nothing helped me.

The site address is: http://www.lulutata.com
Sitemap: http://www.lulutata.com/sitemap.xml
My js file: http://lulutata.com/js/web.js

When i search "site:lulutata.com" I see {{ngMeta.title}} as title :(

Any help will be appreciated, thank you so much!

Since adding ngMeta it runs as you would expect it to but when minified it breaks throwing the following error.

Uncaught Error: [$injector:unpr] Unknown provider: eProvider <- e

I'm struggling to locate the cause. Some help would be appreciated.

Thanks!

Can we add other tags like keywords..author etc?

Hello, very nice service!
What do you think about support for inheritance for child states in ui-router?
At the moment it doesn't work for 'title' for example, but does for 'description'. I think this is why you are resetting the current state of ngMeta object in readRouteMeta() function.
It would be really nice enhancement!

I'm still having issues with Google Indexing on this site (www.klaasrealty.net). I wasn't able to resolve the issue. We had a ticket open that was closed several months ago. However, the issue never really resolved. I tried to concat and uglify my JS assets thinking that would help, but still no dice. Would love to put this issue to rest, but I'm at a loss for ideas.

Hi, Thank you for the great Module! I'm trying to setTitle and metatags on my controller and ui-router.
I could see variable passed by using console but it doesn't update and show title as changed one. When I inspect the title, it says it's missing. (BTW I'm using Ioinc Framework and ng-inspector doesn't work properly so I'm using this chrome extention=> https://chrome.google.com/webstore/detail/seo-meta-in-1-click/bjogjfinolnhfhkbipphpdlldadpnmhc)

Title : Title is missing!
Description : {{ngMeta.description}}

Here is my code.
index.html

<title ng-bind="ngMeta.title"></title>
<!-- OR <title>{{ngMeta.title}}</title> -->    

<!-- Arbitrary tags -->
<meta property="og:type" content="{{ngMeta['og:type']}}" />
<meta property="og:locale" content="{{ngMeta['og:locale']}}" />
<meta name="author" content="{{ngMeta['author']}}" />
<!-- OR <meta name="author" content="{{ngMeta.author}}" /> -->
<meta name="description" content="{{ngMeta.description}}" />

app.js

        $stateProvider
.state('app.myPage', {
            url: "/myPosts",
            views: {
                'myPost': {
                    templateUrl: "templates/themes/news-feed/html/post-my.html",
                    controller: "myPostListCtrl"
                }
            },
    data: {
      'meta': {
        'title': 'My Post- All You Need To Know | PawSquad',
        'og:title': 'All You Need To Know About Pet Vaccinations',
        'og:image': 'http://www.yourdomain.com/img/facebookimage.jpg',
        'author': 'PawSquad'
      }
    }

ngMeta.js

        var setTitle = function(title, titleSuffix) {
          console.log("Settitle called: "+title,titleSuffix);
          if (!$rootScope.ngMeta) {
            throw new Error('Cannot call setTitle when ngMeta is undefined. Did you forget to call ngMeta.init() in the run block? \nRefer: https://github.com/vinaygopinath/ngMeta#getting-started');
          }

          $rootScope.ngMeta.title = angular.isDefined(title) ? title : (defaults.title || '');
          if (config.useTitleSuffix) {
            $rootScope.ngMeta.title += angular.isDefined(titleSuffix) ? titleSuffix : (defaults.titleSuffix || '');
          }
          console.log("$rootScope.ngMeta.title"+$rootScope.ngMeta.title);
          return this;
        };

on console It shows everything Fine

myAnotherController.js

  ngMeta.setTitle('Eluvium'); //Title = Eluvium | Playlist
  ngMeta.setTag('author', 'Matthew Cooper');
  ngMeta.setTag('image', 'http://placeholder.com/abc.jpg');
  ngMeta.setDefaultTag('author', 'Default author');

  console.log("$rootScope.ngMeta"+JSON.stringify($rootScope.ngMeta));

$rootScope.ngMeta{"title":"Eluvium | YourSite","og:image":"http://www.yourdomain.com/img/facebookimage.jpg","author":"Matthew Cooper","image":"http://placeholder.com/abc.jpg"}

Though ngMeta is available on npm as ng-meta, it is not a proper module. ngMeta needs to support commonJS/browserify/AMD.

Recommended reading:

• UMD
• Browserify and UMD
• npm blog - browserify support

Thanks @traaidmark on SO

Hi all,
i'm trying to test your demo site on facebook debugger page and doesn't work. It's normal?

I've tried to use yours module for my app but it gives me the same results. Any suggestion?
thanks

When you are in an Angular + AngularJS hybrid app, the current property from the ngRoute will be undefined when you are routing to an Angular route from an AngularJS route. This is a problem for this service, since it depends on current property always being defined. We need to add an undefined check.

There are certain pages where I don't want a titleSuffix set, but on the majority I do.

I can't seem to turn off the title suffix programatically. It'd be good if I could do it in 2 ways:

In the route:

meta: {
    useTitleSuffix: false
}

Programatically:

ngMeta.useTitleSuffix(false);

And have that only apply until the next $stateChange

Btw, nice work -- a really useful library :-)

<html ng-app="app">
  <head>
   <base href="/">
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="fragment" content="!">
 <title>{{ngMeta.title}}</title>
    
   <!-- Arbitrary tags -->
  <meta property="og:type" content="{{ngMeta['og:type']}}" />
   <meta property="og:locale" content="{{ngMeta['og:locale']}}" />
  <meta name="author" content="{{ngMeta['author']}}" />
   <!-- OR <meta name="author" content="{{ngMeta.author}}" /> -->
   <meta name="description" content="{{ngMeta.description}}" />
  <script>

this is what i get on my view source and for sure it is not working on google.

but when i inspect the page i see everything showing. don't understand what is the issue exactly.

I would like to have a title suffix that always applies automatically ngMetaProvider.useTitleSuffix(true); but not when the default title is being used.

so to put this into an example, if I use this configuration

ngMetaProvider.setDefaultTitle('Site name');
ngMetaProvider.useTitleSuffix(true);
ngMetaProvider.setDefaultTitleSuffix(' | Site name');

then

meta: {
  title: 'Page name' // Gives me the title "Page name | Site name"
}

and

meta: {} // Gives me the title "Site name"

Hi, when i post in Facebook url of website
it seems like
http://ipic.su/img/img7/fs/kiss_16kb.1475926597.png
How can i fix it?

One of my website meta tags are not initializing..Could you please help ..

When am checking in browser it is showing title but when am copying the same in whatsapp or facebook,it is showing as {{meta.title}} and {{meta.description}}.

.config(function ($routeProvider, ngMetaProvider)
{
.when("/", {
templateUrl: 'templates/inside.php',
controller: 'insideCtrl',
meta: {
'title': 'Inside Page',
'og:title': 'Inside Page',
'description': 'Inside Page'
'og:description': 'Inside Page'
}
}
}
myApp.run(function (ngMeta)
{
ngMeta.init();
})

On Index Page, mentioned as below:

Hi, thanks for the great service!

Would it be possible to add support for changing defaults? Basically, I am getting my default values from an API call, therefore it would be too late for me to set the defaults after the config is already run.

Thanks!

I am setting the content of og:title and og:description tags in my controller dynamically. These are however ignored in WhatsApp's preview. Expressions seem not to be evaluated. See below:

http://prntscr.com/kf0i7e

Any ideas?

ngMeta was working well.
Now it is not initializing any more :
all my page where ngMeta used to use defaultTags are not working any more.

I recently updated to angular 1.6.

Thanks for you help

Hi,
I'm using grunt to build my project
So on grunt serve, ngMeta works fine
on Grunt Build which creates a dist folder.. there ngMeta doesnt work
im trying to set the page title though

I'm using ngMeta and when I inspect the my head tag using the Chrome console, I see ngMeta is in fact changing my meta values. So, at first glance, I thought this solution was working. However, Google is not indexing those values. Instead it is indexing the description {{ngMeta.description}} when it crawls my page. Any idea how to fix this?

Website: www.klaasrealty.net | Google Search: klaas realty

Please update documentation that disableUpdate: true (for ui-router) needs to be in the "data" object to work properly. Now its directly in the state's root

html:
`

I am using Angular JS 1.58 and I am trying to change Title, Description, Keywords, dynamically using ngMeta. I successfully implemented it, no errors, and I verified that title and meta description and keywords are changing correctly, using the Chrome inspector elements.

From experimenting last several weeks, I found the following:

When I use the ngMeta to change the title and description, google search results do not pick them up and uses the page content to display a title and description. So, the content is rendered correctly, not the tags.

When I use the ngMeta to change the title only, but hard code the meta description and keywords, Google search displays the correct title and description. I verified this behavior several times, going back and forth and using the google webmaster fetch and request to index feature.

Anyone can help? Would rewriting my web site with Angular 2 resolve this issue, or since ngMeta still would need to be used, it would have the same issue?

Hi Vinay,
Thanks for writing what seems to be some awesome code!
I am having some problems getting it going in my Grunt project and would appreciate your help please.
I added your "ngMeta" component via bower to my project build and updated my "bower.json" file like this:

    {
      "name": "yeoman-angular-test",
      "version": "0.0.0",
      "dependencies": {
        "angular": "^1.4.7",
        "angular-animate": "^1.3.0",
        "angular-aria": "^1.3.0",
        "angular-cookies": "^1.3.0",
        "angular-messages": "^1.3.0",
        "angular-resource": "^1.3.0",
        "angular-route": "^1.3.0",
        "angular-sanitize": "^1.3.0",
        "angular-touch": "^1.3.0",
        "ngMeta": "^0.2.1"
      },
      "devDependencies": {
        "angular-mocks": "^1.3.0"
      },
      "appPath": "app",
      "moduleName": "yeomanAngularTestApp"
    }

Here's the my HTML5 meta tags:

    <title>{{ metaTags.title }}</title>
    <meta name="description" content="{{ metaTags.description }}">

Here's my JS Body links:

        <!-- build:js(.) scripts/vendor.js -->
        <!-- bower:js -->
        <script src="bower_components/angular/angular.js"></script>
        <script src="bower_components/angular-animate/angular-animate.js"></script>
        <script src="bower_components/angular-aria/angular-aria.js"></script>
        <script src="bower_components/angular-cookies/angular-cookies.js"></script>
        <script src="bower_components/angular-messages/angular-messages.js"></script>
        <script src="bower_components/angular-resource/angular-resource.js"></script>
        <script src="bower_components/angular-route/angular-route.js"></script>
        <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
        <script src="bower_components/angular-touch/angular-touch.js"></script>
        <script src="bower_components/ngMeta/src/ngMeta.js"></script>
        <!-- endbower -->
        <!-- endbuild -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/controllers/main.js"></script>
        <script src="scripts/controllers/about.js"></script>
        <script src="scripts/controllers/contact.js"></script>
        <!-- endbuild -->

Here's my AngularJS app:

    angular
      .module('app', [
        'ngAnimate',
        'ngAria',
        'ngCookies',
        'ngMessages',
        'ngResource',
        'ngRoute',
        'ngSanitize',
        'ngTouch',
        'ngMeta'
      ])
      .config(function ($routeProvider, ngMetaProvider) {
        $routeProvider
          .when('/', {
            templateUrl: 'views/index.dot.html',
            controller: 'MainCtrl',
            meta: {
              title: 'Home title',
               description: 'Home description'
            }
          })
          .when('/about', {
            templateUrl: 'views/about.html',
            controller: 'AboutCtrl',
            meta: {
              title: 'about title',
              description: 'about description'
            }
          })
          .when('/contact', {
            templateUrl: 'views/contact.html',
            controller: 'ContactCtrl',
            meta: {
              title: 'contact title',
              description: 'contact description'
            }
          })
          .otherwise({
            redirectTo: '/'
          });
          ngMetaProvider.setName('metaTags');
      });

Here's my controller file "main.js":

    'use strict';
    angular.module('app')
    .controller('MainCtrl', function ($scope, $route) {
        $scope.awesomeThings = [
            'HTML5 Boilerplate',
            'AngularJS',
            'Karma'
        ];
        $scope.$route = $route;
    });

Here's my controller file "about.js":

    'use strict';
    angular.module('app')
        .controller('AboutCtrl', function ($scope, $route) {
            $scope.awesomeThings = [
                'HTML5 Boilerplate',
                'AngularJS',
                'Karma'
            ];
            $scope.$route = $route;
        });

Here's my controller file "contact.js":

    'use strict';
    angular.module('app')
        .controller('ContactCtrl', function ($scope, $route) {
            $scope.awesomeThings = [
                'HTML5 Boilerplate',
                'AngularJS',
                'Karma'
            ];
            $scope.$route = $route;
        });

Please let me know if you need any further information or explaination.
Kind regards,
Derek

ui-router has deprecated the use of $stateChangeSuccess in 1.0, which completely breaks ngMeta.init().

Relevant documentation on the new ui-router site: https://ui-router.github.io/guide/ng1/migrate-to-1_0#state-change-events

Hello.

I'm not sure if this is still maintained or supported. But I'll try asking.
While not technically an issue with the service itself, I'm hoping to get some hints or some guidance.

I'm experimenting with opening up my angular application to be indexed by Google and am trying out systems that will correctly set meta info for each page, however, in the Google search result I'm seeing my test pages previewing the index.html file I use to start the angular app, and not the actual info in the meta.

Is there perhaps a step I'm missing, or some special meta tag to set?

Thank you in advance

Hello,
First of all, I'm pretty lame at JS and Angular, so I'm probably doing some rookie mistake. (Yep, not a programmer)
So, I'm struggling to put dynamic content into the ngMeta.

In my module I have the followed code:

However, it will print like this:

How can I make this dynamic?
I tried following the documentation, but there is something I'm not getting it right.

In my controller I tried putting this:
ngMeta.setTag('description', 'noticia.NoticiasConteudo)');

But I have no idea where to put the ngMeta.setTag, since it didnt work into the <meta name="description" content="{{ngMeta.description}}">

Since I got this bomb on my lap and I need to fix it, could anyone help a fellow designer that have no idea what he is doing?

Thanks!

http://vinaygopinath.github.io/ngMeta/#/

Send this link someone on skype and it will not show correct page preview.

I tried using this with Webpack (using require and import) however i couldn't get it to work.

By making the following change:

return angular.module('ngMeta', [])

It worked in webpack.

i've added my site in fetch as google. when i search it, google does not index my title and my description

it shows only

{ngMeta.description}}

Hi,

I've just tried to make ngMeta work.
I have been able to change the title tag only if it was placed at the end of the body.

How do i make it work with title tag inside the head ?
ngMeta is sourced inside the body.

Hi there..

the library was working fine till I think you made an update that causes two issues. the first one,, I couldn't get the file to be added to my index.html.. and when I checked . the folders are under dist,, while in bower.json is says the the main file is under "main": "src/ngMeta.js",... when I changed the src to dist it worked.

Second thing is that you are now reserving the title and title suffex to the function setTitle. why? that caused my whole website not setting titles since I am using setTag('title','..');... I hope that you can do a quick fix for it. thanks

i'm use service ngMeta in controoller but dont work.
it's showing undefined in "console.log"

In order for the data to load at all the ng-app has to be defined in the <head> tag, however that breaks the ng-scope required for views for ng-view. My question is, how can I have both ng-app in the head tag to load meta tags, but still using AngularRoute.

My index.html: https://gist.github.com/Favna/9e585b21b7c7d20a8276e8c7077ea32a

My app.js: https://gist.github.com/Favna/4a298dec0a056742e1c1ad92df17d952

The actual site does load, just the view does not:

In my product detail state I will resolve an API call to get a product, as seen below. Can I use this resolved data to set my <title> to be the product name?

http://pastebin.com/pxHVyh42