Cmbiar og: image with Javascript

Question

Cmbiar og: image with Javascript

Navigation

#1 by (2 votes)

3

I have a page where, for reasons beyond my control, I do not have access to the HEAD (business issues).

The thing is that I currently have the load of og:image done by a JQuery call:

$('head').append('<meta property="og:image" content="<%=urlImagen%>">');

I see in the generated source code that if it appears to me but when passing it through the Facebook debugger it gives me the following error:

The 'og:image' property should be explicitly provided, even if a value can be inferred 
 from other tags.

The thing is that I do not know if it is possible (according to W3S it is not advisable but it gives me a little bit the same) to put the goal directly in the body.

The thing is that until I reached a production environment I could not prove it and I'm afraid to pass it and make it fail so I would like to know if anyone can give me an answer.

Similar example:

<html>
<head>
    ... 
    include de jQuery
    ...
</head>
<body>
    ...
     $('head').append('<meta property="og:image" content="https://upload.wikimedia.org/wikipedia/en/9/99/MarioSMBW.png">');
    ...
</body
</html>

The thing would be to know if thus adding the goal in this way facebook or twitter would recognize it. In the view generated source I see that it includes me well the goal within the head, but it seems that no facebook is not able to read it. The thing is to know if I can wear that inside the body or not because the goal MUST go in the head but I do not know if putting them in the body would detect them.

javascript html5 facebook

asked by Endika Hernando 02.03.2017 в 09:58

source

1 answer

Angular2 @Input does not reflect changes to the parent component Triggers in MySQL?

score 2 · Accepted Answer

Partial response

To test if what you want to do works correctly in a domain independent of the company you can use GitHub pages very easily using the Theme Manager Jekyll .

Instructions

Create a site on GitHub pages

Create an account on GitHub

Create a new repository using nombredeusario.github.io as the same name

Click on "Settings"

In the GitHub pages section, click on "Choose a theme"

Review the topics and choose one.

It will give you the option to edit the README file. If you wish, cancel to edit it later.

Create a new page to test your html code

Go to the repository on GitHub

Add a page

Add the file name with extension .html

Add your code

Save the code

Go to the link on the page, check the result

Test in the developer tool

See the Facebook validation page or any other you want to use

Send the URL of your page and review the results.

Update or publish a new question, now as complete as you can:)

Partial example

The test part on Facebook is not included

Repository

link

Hello world code

<html>
  <body>
    ¡Hola mundo!
  </body>
</html>

Link to the file on GitHub

link

Link to the published page

A link like this would be the one you would use to evaluate your page in the Facebook developer tool or any similar

link

References

Creating a GitHub Pages site with the Jekyll Theme Chooser

Background

Conversation through comments to the question.

Rubén: I think the question is better, because On the other hand, I do not know if it will work on facebook or twitter. What I would do is take the test.

Endika Hernando: That I had thought but for that I have to get to publish it and we have enough restricted to walk making tests. I have searched for some pulic domain in which to throw a page to be able to debug it from the Facebook debugger but I can not find any, xD

Rubén: There are many alternatives, for example, is GitHub pages The "but" is that it is in English. In the chat we could ask for guidance about translations or other alternatives.