seo Question posted in
Some basic information to get you started with this can be found here.

Angularjs 1.5 ng-controller on the <head> tag – SEO

I’m using Angularjs 1.5.

Created a service to handle a META data and page title.
trying to apply it.

The issue is – for some reason if i define a controller directly on the <head> tag:

<head ng-controller="headMetaController">

the controller will not be loaded at all, but if i wrap it in additional <div> withing the <head>:

<head>
<div ng-controller="headMetaController">
    <title ng-bind="seoMetaService.title()"></title>
    <meta name="description" content="{{ seoMetaService.metaDescription() }}">
    <meta name="keywords" content="{{ seoMetaService.metaKeywords() }}">
<div>
</head>

=> it works.

So, i guess its somehow connected with particularly <head> tag => not sure, what is the right way to solve it?
i’m also do afraid that putting the meta data within the additional <div> may not be a good idea for SEO purposes?

Tags:

2

Answers


  1. 0

    First of all, i think <div> is not a valid tag to be inside of the <head> tag since the tag is only meant to be for metadata, scripts, styles, and other stuff which isn’t meant to be displayed.

    Secondly, even though you call the controller like this it doesn’t mean you can access controller variables inside head tag. Only service/factories can invoke inside head tag.

    So instead of calling it from head tag call the controller from html tag or body tag or inside body tag

    Login or Signup to reply.
  2. 0

    If you’re concerned about SEO, you’re going to have to approach this from another angle.

    In addition to <div> not being valid inside of <head>, using interpolation on <meta> values is a red flag. The crawlers who care about these tags, won’t see them—instead they’ll see {{ seoMetaService.metaKeywords()}}, which is obviously bad for SEO.

    Solution A: Render these values server side.

    Solution B: Keep what you have, but instruct crawlers to access your page at a different location. Add <meta name="fragment" content="!">, and allow a snapshot of your rendered page to live elsewhere—and be served up when ?_escaped_fragment_= is added to the URL. You can delegate this part to services like prerender.io or similar, which will scan and store your pages.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search