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

Is routerLink required? – SEO

I am in a scenario where my top level navigation comes from a service and it would not be ideal to inject [routerLink] into all of my menu via the DOM.

I am using Angluar 4.0. The previous posts must be old and those solutions no longer work, I tried them.

As mentioned in those posts I have tried :

  constructor(
        private router: Router ) {

Also tried the empty route:

<a [routerLink]="['/']"></a>
<router-outlet></router-outlet>

Neither works. Is there any thing else I can do here?

For testing I have these side by side on a page. I am trying to navigate to a component. See below I have one that works with RouterLink and one that does not. BUt I need the second one too work well. That link reloads the whole page.

<li [routerLinkActive]="['link-active']">
          <a [routerLink]="['/ambassadors/leaderboard']">
            <span class='glyphicon glyphicon-star-empty'></span> Leaderboard
          </a>
        </li>

        <li>
          <a href="/ambassadors/leaderboard">
            <span class='glyphicon glyphicon-star-empty'></span> Leaderboard Test
          </a>
        </li>

My routes are like this, Ambassadors is a parent and leaderboard a child:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from "./app.component";
import { NotFoundComponent } from "./shared/not-found/not-found.component";
import { LeaderboardComponent } from "./leaderboard/leaderboard.component";
import { NavMenuComponent } from "./components/navmenu/navmenu.component";
import { HomeComponent } from "./containers/home/home.component";
import { UsersComponent } from "./containers/users/users.component";
import { UserDetailComponent } from "./components/user-detail/user-detail.component";
import { CounterComponent } from "./containers/counter/counter.component";
import { ChatComponent } from "./containers/chat/chat.component";
import { ConnectionResolver } from "./shared/route.resolver";



const routes: Routes = [
    {
        path: "",
        redirectTo: "home",
        pathMatch: "full"
      },
      {
        path: "ambassadors",
        children: [
          {
            path: "leaderboard",
            component: LeaderboardComponent,


            data: {
              title: "Leaderboard",
              meta: [
                { name: "description", content: "Xbox Ambassadors Leaderboard" }
              ],
              links: [
                {
                  rel: "canonical",
                  href: "http://blogs.example.com/blah/nice"
                },
                {
                  rel: "alternate",
                  hreflang: "es",
                  href: "http://es.example.com/"
                }
              ]
            }
          }
        ]
      },
      {
        path: "home",
        component: HomeComponent,

        // *** SEO Magic ***
        // We're using "data" in our Routes to pass in our <title> <meta> <link> tag information
        // Note: This is only happening for ROOT level Routes, you'd have to add some additional logic if you wanted this for Child level routing
        // When you change Routes it will automatically append these to your document for you on the Server-side
        //  - check out app.component.ts to see how it's doing this
        data: {
          title: "Home",
          meta: [
            {
              name: "description",
              content: "This is an example Description Meta tag!"
            }
          ],
          links: [
            { rel: "canonical", href: "http://blogs.example.com/blah/nice" },
            { rel: "alternate", hreflang: "es", href: "http://es.example.com/" }
          ]
        }
      },

      {
        path: "counter",
        component: CounterComponent,
        data: {
          title: "Counter1",
          meta: [
            {
              name: "description",
              content: "This is an Counter page Description!"
            }
          ],
          links: [
            {
              rel: "canonical",
              href: "http://blogs.example.com/counter/something"
            },
            {
              rel: "alternate",
              hreflang: "es",
              href: "http://es.example.com/counter"
            }
          ]
        }
      },
      {
        path: "users",
        component: UsersComponent,
        data: {
          title: "Users REST example",
          meta: [
            {
              name: "description",
              content: "This is User REST API example page Description!"
            }
          ],
          links: [
            {
              rel: "canonical",
              href: "http://blogs.example.com/chat/something"
            },
            {
              rel: "alternate",
              hreflang: "es",
              href: "http://es.example.com/users"
            }
          ]
        }
      },
      {
        path: "chat",
        component: ChatComponent,
        // Wait until the resolve is finished before loading the Route
        resolve: { connection: ConnectionResolver },
        data: {
          title: "SignalR chat example",
          meta: [
            {
              name: "description",
              content: "This is an Chat page Description!"
            }
          ],
          links: [
            {
              rel: "canonical",
              href: "http://blogs.example.com/chat/something"
            },
            {
              rel: "alternate",
              hreflang: "es",
              href: "http://es.example.com/chat"
            }
          ]
        }
      },
      {
        path: "lazy",
        loadChildren: "./containers/lazy/lazy.module#LazyModule"
      },

      {
        path: "**",
        component: NotFoundComponent,
        data: {
          title: "404 - Not found",
          meta: [{ name: "description", content: "404 - Error" }],
          links: [
            {
              rel: "canonical",
              href: "http://blogs.example.com/bootstrap/something"
            },
            {
              rel: "alternate",
              hreflang: "es",
              href: "http://es.example.com/bootstrap-demo"
            }
          ]
        }
      }
];

@NgModule({
    imports: [RouterModule.forRoot(routes, {useHash: false})],
    exports: [RouterModule]
})
export class AppRoutingModule { }

Thanks

Tags:

2

Answers


  1. 0

    If you configure your routes like this:

    RouterModule.forRoot([
    { path: 'welcome', component: WelcomeComponent },
    { path: 'products', component: ProductListComponent },
    { path: 'products/:id', component: ProductDetailComponent }
    { path: '', redirectTo: 'welcome', pathMatch: 'full'},
    { path: '**', redirectTo: 'welcome', pathMatch: 'full'}
]),

    Then you can use routerlink like this:

    <div>
    <nav class='navbar navbar-default'>
        <div class='container-fluid'>
            <a class='navbar-brand'>{{pageTitle}}</a>
            <ul class='nav navbar-nav'>
                <li><a [routerLink]="['/welcome']">Home</a></li>
                <li><a [routerLink]="['/products']">Product List</a></li>
            </ul>
        </div>
    </nav>
    <div class='container'>
        <router-outlet></router-outlet>
    </div>
 </div>

    Or you can navigate in code like this:

      constructor(private _router: Router) {
  }

  onBack(): void {
    this._router.navigate(['/products']);
  }

    UPDATE:
    Now that you have updated the question, it appears that the code that is not working is this:

          <a href="/ambassadors/leaderboard">
        <span class='glyphicon glyphicon-star-empty'></span> Leaderboard Test
      </a>

    Yes, it will reload the page because you are telling it to navigate to an external link … not one managed by the Angular router.

    So the short answer to your question is “yes”. The routerLink is required in this example. (Or you could route in code using the .navigate method as shown above.)

    Login or Signup to reply.
  2. 0

    You can wrap your routes, your Router.forRoot(routes) and the import of the RouterModule into a dedicated modulr and then inject that module in all your app modules that need routing. See this example from the doc

    Also I’m not sure that [] is a correct wrapper for the routes in your router-outlet tags.

    Edit:
    Seeing your routes configuration, the problem comes from the tag you use to navigate; use router-outlet tags instead of a tags.

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

Back To Top
Search