Backend Coder Logo

Mixing Javascript with PHP

Published: 1st Mar 2017

Since Javascript is the language of the web browser it makes sense to combine it with PHP web templates to improve responsiveness and add dynamic elements. But the problem with Javascript is that the content is unlikely to be indexed by search engines.

Let’s think about why content produced by Javascript code may not be indexed. Well, it is code and not content. So there may be readable text strings and URLs in the code, but mostly it will not be contextual content, especially where the code is minified. Also, the code may be in separate files that need to be loaded.

The search engine spider requests page content which is like viewing the web page source. This is a very simple operation compared to running the Javascript code in an engine and avoiding the time consuming wait for server responses to load extra script code. Also, content produced by Javascript may contain Ads and mostly irrelevant content that may be different on each access, dependending on user input and the environment of the browser making the web page request.

Possibly, the Javascript code is scanned to pick out URLs for later probing to see if they lead to interesting content, but that would be all that I would expect in terms of SEO benefit.

One way forward for say a SPA (Single Page App) to get it’s content spidered is to mirror the content within noscript tags as static HTML. But an SPA should really only be used for web pages that you don’t care to appear in search results such as admin pages or dynamic page elements for example.

Good use cases for Javascript combined with PHP are:

  • Displaying Ads
  • Tracking visitors and interactions
  • Dynamic input forms with hints, and input validation
  • Comment forms
  • Contact forms
  • Header image slider
  • Embedded game
  • Embedded chart

Combining PHP and Javascript in web page templates is straightforward by simply inserting code snippets wherever they are needed within the HTML of a page. Where Javascript files are loaded, it is best to have their loading statements at the end of the page before the closing HTML tag. This allows the HTML content to be rendered as fast as possible without waiting for the Javascript http requests to complete. As the page begins to load, the PHP code has already been run on the backend server.

As the user interacts with the web page such as clicking on buttons and submitting forms, the Javascript may well request data from the backend server. The usual method is to send a payload of data as an http request to the backend server, create a Javascript promise object (which facilitates Asynchronous communication), and carry on running. The backend responds with a header and data which the promise function decodes and either triggers a success or error result. So the backend should configure its header response code as either 200 (success) or 4xx (an error).

Data sent to the backend may be encoded in the URL and will be available in the $_GET super global array. Or sent as raw POST data which is available in the virtual file: php://input whose contents may be accessed with the file_get_contents function.

Data sent from Javascript is not to be trusted since any validation on the browser is easily bypassed. So the server code should re-validate the data before storing it or using it to produce page content.

This post is a work in progress where I hope to add some code examples and extra detail. Thanks for visiting!