How can this effect be achieved?

I would like to ask how to achieve this effect, QQ chat why sometimes send a link is the first form, sometimes a link is the second form?

clipboard.png

:

:

http://tieba.baidu.com/p/3746... qq

clipboard.png

clipboard.png

there is a corresponding relationship between the above two parts. Take a look at it for yourself.
but my website does not have this effect if it is written in the same way.

Java css html javascript
Mar.14,2021

there are only two options. One is that Tencent has previously crawled the web content of this link and proposed that the title, captured the image in the Meta tag to generate such a card; another possibility is that various websites cooperate with Tencent to upload the xml, including the link and the corresponding title and images through docking with Tencent's open platform.
I can't find any specific documents for docking with Tencent's open platform, but I've done the bidding rankings and search rankings made by SEM and SEO, search engines, all of which are done in this way.

add: the content in the
< title > tag is the display tab provided by this page to the browser, as follows:
clipboard.png

<meta name='description'>:<br><span class="img-wrap"><img src="https://img.codeshelper.com/upload/img/2021/03/14/mdbqbndlx558212.png" alt="clipboard.png" title="clipboard.png"></span> </p> <p> this may be because Tencent's search engine hasn't grabbed your web page yet, or it takes time for him to process it, or you haven't submitted a xml, for him to crawl. </p> </div> <div class="container-btm"> <p><strong>Previous:</strong> <a href="https://www.codeshelper.com/article/10367.html">Github project push failed, prompt Permission to.. Denied to deploy key</a></p> <p><strong>Next:</strong> <a href="https://www.codeshelper.com/article/10369.html">Direct operation of props, is not recommended in vue. What should I do?</a></p> </div> <div class="container-amb"> <script src="/res/js/amb.js" type="text/javascript"></script> </div> <div class="container-rel"> <ul> <li> <a href="https://www.codeshelper.com/article/12420.html" title="How to disable the onload event while the page is running and invalidate an event.">How to disable the onload event while the page is running and invalidate an event.</a> <p> * * I have an object that is unclickable in the previous stage of the page, and something else happens when I click on it in the next stage. I wrote two onclick methods on this object that run when the page onload. The second one overrides the first m...</p> <div class="more"> <div class="fl"> <a href="/list/Java/1.html" title="Java">Java</a> <a href="/list/css/1.html" title="css">css</a> <a href="/list/html/1.html" title="html">html</a> <a href="/list/javascript/1.html" title="javascript">javascript</a> </div> <div class="fr"> <span>Mar.18,2021</span> </div> </div> </li> </ul> </div> </div> <div class="container-right"> <div class="index-right"> <ul class="hots"> <li> <a href="https://www.codeshelper.com/article/41181.html" title="False">False</a> </li> <li> <a href="https://www.codeshelper.com/article/323.html" title="Django, Why does the system automatically generate an empty session? every time the request is made?">Django, Why does the system automatically generate an empty session? every time the request is made?</a> </li> <li> <a href="https://www.codeshelper.com/article/322.html" title="Use python to convert dict1 to dict2, in the example. I tried for a long time but couldn't find a solution.">Use python to convert dict1 to dict2, in the example. I tried for a long time but couldn't find a solution.</a> </li> <li> <a href="https://www.codeshelper.com/article/321.html" title="How to self-start the php-fpm service when building a LNMP environment with docker?">How to self-start the php-fpm service when building a LNMP environment with docker?</a> </li> <li> <a href="https://www.codeshelper.com/article/320.html" title="Can an array in react state be bound to a dom state using an element in the array?">Can an array in react state be bound to a dom state using an element in the array?</a> </li> <li> <a href="https://www.codeshelper.com/article/319.html" title="Wechat browser version 6.6.5 cannot prevent the springback of pull-up and drop-down to the top under ios system.">Wechat browser version 6.6.5 cannot prevent the springback of pull-up and drop-down to the top under ios system.</a> </li> <li> <a href="https://www.codeshelper.com/article/318.html" title="In express+hbs, how do you define the routed data as a variable on the page?">In express+hbs, how do you define the routed data as a variable on the page?</a> </li> <li> <a href="https://www.codeshelper.com/article/317.html" title="How to use symbol reference of Iconfont in dva">How to use symbol reference of Iconfont in dva</a> </li> <li> <a href="https://www.codeshelper.com/article/316.html" title="How to elegantly add data to JSON objects?">How to elegantly add data to JSON objects?</a> </li> <li> <a href="https://www.codeshelper.com/article/315.html" title="Using node to build video streaming server">Using node to build video streaming server</a> </li> <li> <a href="https://www.codeshelper.com/article/314.html" title="The proportional width of the echarts graph is inconsistent.">The proportional width of the echarts graph is inconsistent.</a> </li> <li> <a href="https://www.codeshelper.com/article/313.html" title="React uses axios to call the background data. After success, how to jump to the page based on the returned value?">React uses axios to call the background data. After success, how to jump to the page based on the returned value?</a> </li> <li> <a href="https://www.codeshelper.com/article/312.html" title="I don't understand what a linux command means. Please explain it.">I don't understand what a linux command means. Please explain it.</a> </li> <li> <a href="https://www.codeshelper.com/article/311.html" title="Vue introduces multiple components in vue-router by nesting named views, and does not refresh the same reference in other pages.">Vue introduces multiple components in vue-router by nesting named views, and does not refresh the same reference in other pages.</a> </li> <li> <a href="https://www.codeshelper.com/article/310.html" title="Running nodejs reports fewer errors ")"">Running nodejs reports fewer errors ")"</a> </li> </ul> <div class="tags"> <a href="/list/css/1.html" title="css">css</a> <a href="/list/mysql/1.html" title="mysql">mysql</a> <a href="/list/arrays/1.html" title="arrays">arrays</a> <a href="/list/josn/1.html" title="josn">josn</a> <a href="/list/react/1.html" title="react">react</a> <a href="/list/html/1.html" title="html">html</a> <a href="/list/typescript/1.html" title="typescript">typescript</a> <a href="/list/webpack/1.html" title="webpack">webpack</a> <a href="/list/npm/1.html" title="npm">npm</a> <a href="/list/sass/1.html" title="sass">sass</a> <a href="/list/R/1.html" title="R">R</a> <a href="/list/objective-c/1.html" title="objective-c">objective-c</a> <a href="/list/.net/1.html" title=".net">.net</a> <a href="/list/sql-server/1.html" title="sql-server">sql-server</a> <a href="/list/jquery/1.html" title="jquery">jquery</a> <a href="/list/python-3.x/1.html" title="python-3.x">python-3.x</a> <a href="/list/angularjs/1.html" title="angularjs">angularjs</a> <a href="/list/django/1.html" title="django">django</a> <a href="/list/angular/1.html" title="angular">angular</a> <a href="/list/excel/1.html" title="excel">excel</a> <a href="/list/regex/1.html" title="regex">regex</a> <a href="/list/iphone/1.html" title="iphone">iphone</a> <a href="/list/ajax/1.html" title="ajax">ajax</a> <a href="/list/linux/1.html" title="linux">linux</a> <a href="/list/xml/1.html" title="xml">xml</a> <a href="/list/pandas/1.html" title="pandas">pandas</a> <a href="/list/vba/1.html" title="vba">vba</a> <a href="/list/spring/1.html" title="spring">spring</a> <a href="/list/database/1.html" title="database">database</a> <a href="/list/wordpress/1.html" title="wordpress">wordpress</a> <a href="/list/string/1.html" title="string">string</a> <a href="/list/wpf/1.html" title="wpf">wpf</a> <a href="/list/xcode/1.html" title="xcode">xcode</a> <a href="/list/windows/1.html" title="windows">windows</a> <a href="/list/bash/1.html" title="bash">bash</a> <a href="/list/postgresql/1.html" title="postgresql">postgresql</a> <a href="/list/oracle/1.html" title="oracle">oracle</a> <a href="/list/multithreading/1.html" title="multithreading">multithreading</a> <a href="/list/eclipse/1.html" title="eclipse">eclipse</a> <a href="/list/list/1.html" title="list">list</a> <a href="/list/firebase/1.html" title="firebase">firebase</a> <a href="/list/algorithm/1.html" title="algorithm">algorithm</a> <a href="/list/macos/1.html" title="macos">macos</a> <a href="/list/forms/1.html" title="forms">forms</a> <a href="/list/image/1.html" title="image">image</a> <a href="/list/scala/1.html" title="scala">scala</a> <a href="/list/visual-studio/1.html" title="visual-studio">visual-studio</a> <a href="/list/azure/1.html" title="azure">azure</a> <a href="/list/bootstrap/1.html" title="bootstrap">bootstrap</a> <a href="/list/spring-boot/1.html" title="spring-boot">spring-boot</a> <a href="/list/react-native/1.html" title="react-native">react-native</a> <a href="/list/python-2.7/1.html" title="python-2.7">python-2.7</a> <a href="/list/docker/1.html" title="docker">docker</a> <a href="/list/performance/1.html" title="performance">performance</a> <a href="/list/function/1.html" title="function">function</a> <a href="/list/winforms/1.html" title="winforms">winforms</a> <a href="/list/matlab/1.html" title="matlab">matlab</a> <a href="/list/powershell/1.html" title="powershell">powershell</a> <a href="/list/apache/1.html" title="apache">apache</a> <a href="/list/dataframe/1.html" title="dataframe">dataframe</a> <a href="/list/api/1.html" title="api">api</a> <a href="/list/sqlite/1.html" title="sqlite">sqlite</a> <a href="/list/numpy/1.html" title="numpy">numpy</a> <a href="/list/rest/1.html" title="rest">rest</a> <a href="/list/shell/1.html" title="shell">shell</a> <a href="/list/selenium/1.html" title="selenium">selenium</a> <a href="/list/flutter/1.html" title="flutter">flutter</a> <a href="/list/dart/1.html" title="dart">dart</a> <a href="/list/maven/1.html" title="maven">maven</a> <a href="/list/loops/1.html" title="loops">loops</a> <a href="/list/qt/1.html" title="qt">qt</a> <a href="/list/swing/1.html" title="swing">swing</a> <a href="/list/android-studio/1.html" title="android-studio">android-studio</a> <a href="/list/csv/1.html" title="csv">csv</a> <a href="/list/express/1.html" title="express">express</a> <a href="/list/file/1.html" title="file">file</a> <a href="/list/class/1.html" title="class">class</a> <a href="/list/tensorflow/1.html" title="tensorflow">tensorflow</a> <a href="/list/sorting/1.html" title="sorting">sorting</a> <a href="/list/codeigniter/1.html" title="codeigniter">codeigniter</a> <a href="/list/perl/1.html" title="perl">perl</a> </div> <ul class="hots rands"> <li> <a href="https://www.codeshelper.com/article/22715.html" title="The design draft given by ui is of fixed resolution. How to deal with it when it is greater than this resolution?">The design draft given by ui is of fixed resolution. How to deal with it when it is greater than this resolution?</a> </li> <li> <a href="https://www.codeshelper.com/article/26188.html" title="Upload a plist file and return a xml suffix link. How to control the suffix of the returned link?">Upload a plist file and return a xml suffix link. How to control the suffix of the returned link?</a> </li> <li> <a href="https://www.codeshelper.com/article/27588.html" title="Report an error after the vue project is running">Report an error after the vue project is running</a> </li> <li> <a href="https://www.codeshelper.com/article/19447.html" title="The video video can only be played for 1 second on the safari browser, and then it has been buffered all the time. How to solve this problem?">The video video can only be played for 1 second on the safari browser, and then it has been buffered all the time. How to solve this problem?</a> </li> <li> <a href="https://www.codeshelper.com/article/33132.html" title="A simple regular matching problem">A simple regular matching problem</a> </li> </ul> <div class="container-air"> <script src="/res/js/amir.js" type="text/javascript"></script> </div> </div> </div> </div> </div> <div class="footer"> <div class="fl"> <span>© 2021 CodesHelper</span> </div> <div class="fr"> <a href="https://www.codeshelper.com/page/4.html">Advertising</a> <a href="https://www.codeshelper.com/page/3.html">Contact us</a> <a href="https://www.codeshelper.com/page/2.html">About us</a> </div> </div> <div class="mobile-btn" onclick="jump();">Menu</div> <script async src="https://www.googletagmanager.com/gtag/js?id=G-K8Q9PCK7WM"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-K8Q9PCK7WM'); </script> </body> </html><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="83cc554f99913c634b7f1b27-|49" defer></script>