The data.grandlyon.com web portal has a functionality that let a user share articles on social media directly from the portal. It can be pretty challenging to have an appropriate preview of different pages of an Single Page Application when sharing it on social media. This service has been developed to address that problem and have a correct preview for each article.
When Facebook's or Twitters' robots access a page, they look for [Open graph](https://ogp.me/) meta tags. Based on those tags they generate a preview of the page containing a title, a description, eventually an image...
Here is the list of the meta tag read by the robots:
*`og:locale`: The locale these tags are marked up in.
*`og:type`: The type of the object (ex: article, website...)
*`og:title`: The title of the object described (ex: title of the article)
*`og:description`: The description of the object (ex: abstract of the article)
*`og:image`: An image URL which should represent the object
*`og:url`: The canonical URL of your object that will be used as its permanent ID in the graph
The problem when working with an SPA is that we serve only one `index.html` file with its own meta tags. Of course with Javascript it is possible to dynamically update the tags according to page current page of the app. A user will see the changes in its browser but a robot won't see any changes has it doesn't execute Javascript.
The goal of this service is therefor to generate an HTML page with the right meta tags depending on the url parameter.
## Dependencies
This service depends on [Elasticsearch](../off-the-shelf-apps/elasticsearch.md) as it is where it collects information about the articles.
## Endpoints
## Implementation
\ No newline at end of file
This service has two endpoints:
*`/articles/:slug`: returns an HTML page with the meta tags of the article associated to the `slug` parameter
*`/`: returns an HTML page with the default meta tags of the data.grandlyon.com portal
The logic here, is that instead of sharing directly the url of the web app, we will share the url of our dedicated service with the slug of the current article. When the service receives the request, it reads the slug from the url and query elasticsearch in order to retrieve more information about the article. Based on the collected information, it generates a very simple empty html page with the appropriates `meta tags` and finally returns the HTML page. Thereby the robot can read the correct meta tag instead of the default ones.
To prevent the displaying of a blank page, in case of someone access this url from a browser, the page also include the `refresh` tag. This tag tells the browser to refresh the page after a certain time (directly if not specified). Also an url can be passed along to indicate on which url the browser should refresh the page. We use this to redirect the user on the actual data.grandlyon.com page of the article.
The root url of the service `/` will return a page with the default mata tags of data.grandlyon.com.
