htmlmeta-tagstwitter-card

How to embed an image to display on Twitter

I'm looking to embed images in an HTML file so that they show up as a preview on Twitter once the link is posted.

Currently, I have written this HTML file, but the image included in the meta tag does not display after the link is posted, how can I do this?

Here is my code:

<!DOCTYPE html>
<html>
    <meta charset="UTF-8">
    <title>Embedded Image Test</title>
    <meta name="twitter:image:" content="https://teotihuacan-media.com/images/bck.jpg">
    <meta name="twitter:image:alt" content="A simple image">
    <meta name="twitter:site:"Lorem IpsTest Website",>
    <meta name="twitter:description" content="Welcome lorem ipsum dolore">
    
<HEAD>  
<TITLE>Lorem IpsTest Website</TITLE> 
</HEAD> 

<BODY>
    <CENTER><p>izudfhzaiufhnzaouif 5645</p></CENTER>
    <CENTER><img src="https://teotihuacan-media.com/images/bck.jpg" alt="Ipsum doleane"></CENTER>
</BODY> 
</html>
Solution

  • Based on the docs, it looks like you're missing two required meta tags:

    <meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Title Goes Here" />

    Your twitter:site tag is also incorrectly formatted - it should be this:

    <meta name="twitter:site" content="Lorem IpsTest Website">

    The opening <head> tag should also be moved to right after the opening <html> tag in order to encompass the meta tags. I'm also unsure why you have two <title> tags - get rid of one of them.