Take content from within a div and place it in the content of a meta tag

Asked

Viewed 268 times

0

I have an old site, all done in html, with thousands of pages to edit. All news pages, are with the same title

<title>Prefeitura Municipal...</title>

And at the time I didn’t enter the meta tags that Facebook reads. I would then like to insert this code below on all pages

<meta property="og:title" content="">

and that within the "content" was the very headline of the news. I have a title div, example:

<span id="titulo">Título da notícia</span>

I would like to "take" this content from within this div and replicate it within "content". In an automatic way, that worked in all thousands of news.

Detail, all pages are in . html, if they were in . php could be simpler to solve this, but I can’t change it to .php. I tried to change the title via javascript, as shown below. And it changes right, but Facebook does not recognize this change, and it continues to maintain what is in the code.

document.title = $('#titulo').html()
javascript html

  • Facebook will not take the value of an element changed via Javascript. It takes the return from the server. Javascript runs in the browser. I believe you will have to arrange an automatic way to change the files, since there are many and doing it manually would be impractical.

  • @Sam This, I’m trying to find an automatic way, I can automatically insert the same code in all via Dreamweaver, but entering the title manually in each one would be impossible even.

  • Maybe with a PHP application you can rewrite each file by inserting the tag with the respective title.

1 answer

1

I believe that the Crawler reads the HTML before executing the Script, yet another in jQuery that the browser has to index the external lib and then run everything etc. So maybe Facebook is not recognizing the change in value.

How your Script is picking up the text of span and tag title of head, and not in the metatag right as I should.

To place the text of span within the metatag you can do as below.

let tit = document.getElementById('titulo').innerHTML;

let meta = document.querySelector('[property="og:title"]');

meta.setAttribute('content', tit);

console.log(meta);
<head>
  <meta property="og:title" content="">
</head>

<span id="titulo">Título da notícia</span>

EDIT

If you don’t have the metatag inserted in the document you first need to create it within the <head> and then insert the content with the title text. How this will be done after the page is loaded I cannot guarantee that Facebook will recognize this injected content...

document.getElementsByTagName('head')[0].innerHTML += '<meta property="og:title" content="">';

let tit = document.getElementById('titulo').innerHTML;

let meta = document.querySelector('[property="og:title"]');

meta.setAttribute('content', tit);

console.log(meta);
<span id="titulo">Título da notícia</span>

  • I don’t know much about javascript, but you’re pointing out a syntax error, which could be wrong?

  • It could be any number of things. But this script should come at the bottom of the page, it should be the last thing before the </body>, besides, you have to have a tag with the id="titulo" on the page, and on your <head> vc tb have to have the tag <meta property="og:title" content=""> is where the script will insert the text that is in the tag with id="titulo"

  • @Camila if your document does not have the metatag of Faceboock you have to create it with the script, and then take the title and put as content. if that is the case tell me that I edit the answer. Read the EDIT I left in reply

  • Yes, I had put this in the head. A code like this Dreamweaver recognizes as a syntax error: <! doctype html> <html> <head> <meta charset="utf-8"> <title> <meta Property="og:title" content=""> </head> <body> < <span id="title">Here the title of the news</span> <script> Let tit = Document.getElementById('titulo'). innerHTML; Let meta = Document.querySelector('[Property="og:title"]'); meta.setAttribute('content', tit); console.log(meta); </script> </body> </html> and if I publish, the same thing happens as before, it works, but Facebook ñ recognizes.

  • @Camila must have some config in DW that shows error for some reason, but if you test directly in the browser will see that in the console does not accuse error. About Facebook, you can wait a few days to see if you update the information, and if you do not update it is for the reason we have already commented here, FB does not recognize changed data in the DOM, only recognizes what is delivered in the request and not after the page is loaded

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.