Do I need a separate page for each piece of content with AngularJS?

Question

Background: I am working on creating a stock-market application that would contain company description, history, industry, share price, etc. and will allow users to add new companies at their will. When the user wants to read about a specific company, he/she simply enters the ticker into the search box, and the page is updated with the content for that company. I am planning on using MySQL database to store static content information such as description, PHP as a server-side language, APIs for dynamic data (eg stock prices), and AngularJS for front-end development, particularly to eliminate constant page-reloading and speed up the development cycle.

Question 1 (1 company = 1 page?): Initially, I was contemplating creating AJAX requests via $http and then simply populating the html template with the {{content}} generated by that request, but then I heard that creating a separate page for each piece of content is also a common method and is preferred for SEO (essentially, the URLs would look like that: www.mysite.com/#/main/page vs www.mysite.com/main/page/company1.php for the first and second methods respectively). Which method is indeed a preferred one or what is the best practice if none of those methods are correct in this situation?

Question 2 (SEO/Sitemap): Now if I stick to the first method ($http), I realize search engine crawlers will have difficulty identifying the pages, because, technically, there aren't any pages with content; they are all generated dynamically. Is this true that the search engines won't find my pages, and if so, is there a way around this issue?

Thanks so much!

Answer 1

With Angular you can easily have a unique URL for each piece of content. To achieve this, you can use the router (cf. https://docs.angularjs.org/api/ngRoute or https://angular.github.io/router/getting-started ). It allows your application to:

• load and display the proper content when a user requests an URL,
• update the URL in the location bar when your users navigate through the site.

Thus, your users will be able to share links, bookmark contents, ...

For bots, you will need to serve HTML snapshots. It can be done using a service like SEO4Ajax . Alternatively, if you want to do it yourself, there is an excellent tutorial here .

Answer 2

Google can index javascript websites (annouced by Google May 2014), but Google may not properly render or index angular websites. Technical SEO expertise is needed to ensure that you have an SEO friendly site architecture including page title, meta tags, h1, etc, targeting the right keywords. Developers may find their site is only partially rendered and indexed, or not at all.

You can take measures such as using $locationProvider.html5Mode(true); to remove AngularJS's default hashtagged-URLs.

It is also commonly accepted that serving a rendered version of the angular website to crawlers is required to achieve good search performance. (One of such services is Prerender.io).