How to put the page title according to a product using JS?

Question

My problem is in trying to put information in the title, in the description or exchange the page image for java script. I am trying to make a shopping page (e-commerce) with angular and on the product page I would like to modify the title, description and image according to the product that is on the page, so far so good, but when I send the link gives page on Whatsapp or facebook they can not get the title modified by angular. Can someone help me??

An example:

Answer 1

Hello, so that facebook and Whatsapp better understand the information of your webVoce should add the Opengraph metatags in the head of your application.

Open Graph allows site developers to turn their sites into a graphical object allowing a certain level of customization of a recommended, liked or simply shared page.

<meta property="og:locale" content="pt_BR">

<meta property="og:url" content="http://www.meusite.com.br/ola-mundo">

<meta property="og:title" content="Título da página ou artigo">
<meta property="og:site_name" content="Nome do meu site">

<meta property="og:description" content="Minha boa descrição para intrigar os usuários.">

<meta property="og:image" content="www.meusite.com.br/imagem.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="800"> /** PIXELS **/
<meta property="og:image:height" content="600"> /** PIXELS **/

/** CASO SEJA UM SITE NORMAL **/

<meta property="og:type" content="website">

/** CASO SEJA UM ARTIGO **/

<meta property="og:type" content="article">
<meta property="article:author" content="Autor do artigo">
<meta property="article:section" content="Seção do artigo">
<meta property="article:tag" content="Tags do artigo">
<meta property="article:published_time" content="date_time">

More information you can get on http://ogp.me

In order to be able to answer you better it is interesting that you change your question with more information... which version of the angle is working and show us a little of how you are making these changes with JS.

Answer 2

You cannot send information via scripts client-side (Javascript) for external websites that try to pull information from your site. This is because sites like Facebook, for example, will take the HTML information from your site and will not process the scripts.

What should be done is that such information should come from your server directly to your HTML.

Example in PHP:

<title><?php echo $titulo_da_pagina; ?></title>