Search code examples
javascripthtmltwitterdeep-linking

image in twitter when sharing content

I have a page with an image, but when I share it on twitter the picture does not show up, as it does in other sites

...
<main id="main">

    <section class="single-page">
      
        <div class="container" data-aos="fade-up">
          <div class="row">
            <div class="col-lg-8">
                <h2 >Lorem Ipsum is not simply random </h2>
              <div class="d-flex align-items-center details-post-data">
                <div class="post-meta d-flex">
                  <p class="post-author">Mystic Rivers </p>
                  <p class="post-sperator"> - </p>
                  <p class="post-date">
                    <time datetime="2023-01-01">02-04-2024 16:00</time>
                  </p>
                </div>
                  <p><br/>&nbsp;</p>
              </div>
              <div class="col-lg-12">
                <img src="/assets/images/blog/saturn.jpg" class="img-fluid rounded-4 mb-4"  />
              </div>
...

enter image description here

Solution

  • Implement Twitter Card markup on your webpage. Which allow you to control how your content appears when shared on Twitter, including specifying the image to be displayed. You can include specific meta tags in the section of your HTML to define the image, title, description, and other properties. Here's an example of how you can add Twitter Card markup for your page:

    <head>
    <!-- Other meta tags -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@yourtwitterhandle">
    <meta name="twitter:title" content="Your Page Title">
    <meta name="twitter:description" content="Your Page Description">
    <meta name="twitter:image" content="https://yourwebsite.com/path/to/your/image.jpg">
    <!-- Other meta tags -->
</head>

    refer : https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup