Ionic and html5mode (google search console)


#1

Hallo,

simple question. Whenn I use this link

http://weeklystyle.de/#/cdetail/487

in my browser it shows the correct site.

When I test this in the google search console it semms the google is redirected to the main page.

Anny suggestions.

Is there a way to remove the hash from the url?


#2

Doing this on the Server side (First answer)

Also don’t forget to setup the base path of your app’s index.html (i.e: ) is important.

And from here

doing this

IonicModule.forRoot(MyApp, {
    locationStrategy: 'path'
})

does the magic.

Now the Google search console render my Detail page. Not complete, but it is a first step.


#3

Next step.

I found this

I have created a test page wich only Show “TEST”.

The search console Shows this.

Next step create pre rendered html pages.


#4

I will try pre Rendering with

http://phantomjs.org/

and

http://jonnnnyw.github.io/php-phantomjs/

Installing on the Server

-> 00.howto_install_phantomjs.md


#5

Creating a pre rendered page php script

<?php

  require $_SERVER["DOCUMENT_ROOT"] . "/PATH/TO/vendor/autoload.php";

  use JonnyW\PhantomJs\Client;

  $phantomjsPath = '/PATH/TO/phantomjs';

  $client = Client::getInstance();
  $client->isLazy(); // Tells the client to wait for all resources before rendering
  $client->getEngine()->setPath($phantomjsPath);
  $client->getEngine()->addOption('--load-images=true');
  $client->getEngine()->addOption('--ignore-ssl-errors=true');
  $client->getEngine()->addOption('--web-security=false');
  $client->getEngine()->addOption('--local-to-remote-url-access=true');

  /**
   * @see JonnyW\PhantomJs\Http\Request
   **/
  $request = $client->getMessageFactory()->createRequest('https://ionicframework.com/', 'GET');
  $request->setTimeout(10000); // Will render page if this timeout is reached and resources haven't finished loading

  /**
   * @see JonnyW\PhantomJs\Http\Response
   **/
  $response = $client->getMessageFactory()->createResponse();

  // Send the request
  $client->send($request, $response);
  $client->getEngine()->debug(true);

  if($response->getStatus() === 200) {

	  // Dump the requested page content
	  echo $response->getContent();
  } else {
	echo $response->getStatus()."<br>";
	echo $client->getLog(); // String
  }

You can try it here

And I have made a Little sitemapl.xml for the bots :slight_smile:

http://weeklystyle.de/sitemap.xml


#6

So my Server Need 20 Minutes to render 499 pages.

I make a subfolder build and put in the main.css.

So this is how Google render my page:

But much more important Google now have all my metadata i put in my page like produktdata, Keywords and description and so on.

That was my target.

Here is how i create my Metatags


#7

Looks like it works. Yes!!!


Ionic2+ with seo support