[{"data":1,"prerenderedAt":299},["ShallowReactive",2],{"article:adding-seo-support-to-angular-6-application":3,"\u002Fblog\u002Fadding-seo-support-to-angular-6-application-surround":292},{"id":4,"title":5,"author":6,"body":7,"date":279,"description":280,"extension":281,"image":282,"meta":283,"minRead":284,"navigation":285,"path":286,"published":285,"seo":287,"stem":288,"tags":289,"__hash__":291},"blog\u002Fblog\u002Fadding-seo-support-to-angular-6-application.md","Adding SEO support to Angular 6 application","Baljeet Singh",{"type":8,"value":9,"toc":273},"minimark",[10,14,28,33,52,55,87,93,97,100,116,123,126,141,151,154,161,168,173,176,179,183,186,213,219,226,246,249,258,261,266,269],[11,12,13],"p",{},"Applications built with Angular are not Search Engine friendly by default. If you view the source of the Angular application you won't find any content there. So, our application pages won't appear in the search engine results. It may or may not be the behaviour you want. So, If you don't want the search engines to crawl through your content, you're good to go already. But, If there's a requirement like you have created a blog in Angular then you might want to make the Angular application SEO friendly.",[11,15,16,17,27],{},"Let's see how we can add SEO to our Angular app easily using ",[18,19,23],"a",{"href":20,"rel":21},"https:\u002F\u002Fgithub.com\u002Fmaciejtreder\u002Fng-toolkit",[22],"nofollow",[24,25,26],"strong",{},"ng-toolkit"," by following these steps.",[29,30,32],"h2",{"id":31},"creating-angular-app","Creating Angular App",[11,34,35,36,43,44,51],{},"Make sure you have ",[18,37,40],{"href":38,"rel":39},"https:\u002F\u002Fnodejs.org\u002F",[22],[24,41,42],{},"node"," and ",[18,45,48],{"href":46,"rel":47},"https:\u002F\u002Fcli.angular.io\u002F",[22],[24,49,50],{},"angular-cli","_ installed on you system.",[11,53,54],{},"To create new application you can run the following command,",[56,57,62],"pre",{"className":58,"code":59,"language":60,"meta":61,"style":61},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","ng new myAppSeo --routing\n","js","",[63,64,65],"code",{"__ignoreMap":61},[66,67,70,74,78,81,84],"span",{"class":68,"line":69},"line",1,[66,71,73],{"class":72},"sTEyZ","ng ",[66,75,77],{"class":76},"sMK4o","new",[66,79,80],{"class":72}," myAppSeo ",[66,82,83],{"class":76},"--",[66,85,86],{"class":72},"routing\n",[11,88,89,92],{},[63,90,91],{},"--routing"," flag will add the routing module in our application.",[29,94,96],{"id":95},"running-angular-app","Running Angular App",[11,98,99],{},"We can change the directory to our newly created project and run the following command,",[56,101,103],{"className":58,"code":102,"language":60,"meta":61,"style":61},"ng serve -open\n",[63,104,105],{"__ignoreMap":61},[66,106,107,110,113],{"class":68,"line":69},[66,108,109],{"class":72},"ng serve ",[66,111,112],{"class":76},"-",[66,114,115],{"class":72},"open\n",[11,117,118,119,122],{},"Here, ",[63,120,121],{},"-open"," will open the project directly in the browser. Otherewise, we have to manully open the url.",[11,124,125],{},"Alternatively, you can use the following shorthand command too,",[56,127,129],{"className":58,"code":128,"language":60,"meta":61,"style":61},"ng s -o\n",[63,130,131],{"__ignoreMap":61},[66,132,133,136,138],{"class":68,"line":69},[66,134,135],{"class":72},"ng s ",[66,137,112],{"class":76},[66,139,140],{"class":72},"o\n",[11,142,118,143,146,147,150],{},[63,144,145],{},"s"," stands for serve & ",[63,148,149],{},"-o"," flag stands for open.",[11,152,153],{},"After running this command, the output will look something like this.",[11,155,156],{},[157,158],"img",{"alt":159,"src":160},"null","\u002Fimg\u002Fchrome_2018-06-13_12-04-27.png",[11,162,163,164,167],{},"If we take a look at the source code by pressing ",[63,165,166],{},"Ctrl+U"," on windows or right clicking the application and click view source, we can see the following output.",[11,169,170],{},[157,171],{"alt":159,"src":172},"\u002Fimg\u002Fchrome_2018-06-13_12-06-41.png",[11,174,175],{},"Here, in the view source page we can see, inspite of we have some content on the page, we still don't see any of this content in the source code.",[11,177,178],{},"Now let's see how can we fix it, so that the content will appear in the view source, which will make the app search engine friendly.",[29,180,182],{"id":181},"adding-ng-toolkituniversal","Adding @ng-toolkit\u002Funiversal",[11,184,185],{},"With ng-tookit, it is very easy to make the app engine friendly. We just need to run the following schematics command and it will take care of the rest.",[56,187,189],{"className":58,"code":188,"language":60,"meta":61,"style":61},"ng add @ng-toolkit\u002Funiversal\n",[63,190,191],{"__ignoreMap":61},[66,192,193,196,199,202,204,207,210],{"class":68,"line":69},[66,194,195],{"class":72},"ng add ",[66,197,198],{"class":76},"@",[66,200,201],{"class":72},"ng",[66,203,112],{"class":76},[66,205,206],{"class":72},"toolkit",[66,208,209],{"class":76},"\u002F",[66,211,212],{"class":72},"universal\n",[214,215,216],"blockquote",{},[11,217,218],{},"Server side rendering will only work in the production envirionment.",[11,220,221,222,225],{},"Now that we have installed ",[63,223,224],{},"@ng-toolkit\u002Funiversal"," in our Angular app. So, we can build the app for production now with the following command,",[56,227,229],{"className":58,"code":228,"language":60,"meta":61,"style":61},"npm run build:prod\n",[63,230,231],{"__ignoreMap":61},[66,232,233,236,240,243],{"class":68,"line":69},[66,234,235],{"class":72},"npm run ",[66,237,239],{"class":238},"sBMFI","build",[66,241,242],{"class":76},":",[66,244,245],{"class":72},"prod\n",[11,247,248],{},"This will build the app for production. Now we can run the following command to open the production application,",[56,250,252],{"className":58,"code":251,"language":60,"meta":61,"style":61},"npm run server\n",[63,253,254],{"__ignoreMap":61},[66,255,256],{"class":68,"line":69},[66,257,251],{"class":72},[11,259,260],{},"After running this command, the front page will look the same as before. But if we view the source again, the output will look like following,",[11,262,263],{},[157,264],{"alt":159,"src":265},"\u002Fimg\u002Fchrome_2018-06-13_12-30-52.png",[11,267,268],{},"Here, you can see the content of the page that you weren't able to see before and now search engines can crawl through this content.",[270,271,272],"style",{},"html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":61,"searchDepth":274,"depth":274,"links":275},2,[276,277,278],{"id":31,"depth":274,"text":32},{"id":95,"depth":274,"text":96},{"id":181,"depth":274,"text":182},"2018-06-13","In this article we will take a look at how we can add SEO support in our Angular 6 Application","md","\u002Fimg\u002Fangular-seo.jpg",{},3,true,"\u002Fblog\u002Fadding-seo-support-to-angular-6-application",{"title":5,"description":280},"blog\u002Fadding-seo-support-to-angular-6-application",[290],"Web Development","xeePi0F4VEs8XGVGRjH5w_AHXvuXDzj45JVEpyFKgFY",[293,294],null,{"title":295,"path":296,"stem":297,"description":298,"children":-1},"Adding Server Side Rendering (SSR) to Angular App using NestJS","\u002Fblog\u002Fadding-server-side-rendering-ssr-to-angular-app-using-nestjs","blog\u002Fadding-server-side-rendering-ssr-to-angular-app-using-nestjs","In this article we will see how we can add Server Side Rendering (SSR) to Angular App using NestJS",1775568355747]