This is the second day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

preface

Recently, when dealing with the requirements of the activity page on the official website, the product sent a screenshot and asked whether the links shared on Zhihu and the pictures displayed could be customized.

I think, this is not zhihu to control the display? Of course, I didn’t reply right away, so this won’t happen. Do not have certain thing, affirmation won’t reply of ah. Just have this article, record I find the solution, achieve the effect.

Tried many times on Zhihu

First, I tested it in the “Write an article” section of Zhihu, pasted a few links, and then switched to a card display.

The first one is the link to the product

And if I look at that link, it shows the image that corresponds to the IMG tag on the page. Zhihu takes that picture as the picture displayed on the card.

The second is the active page on mobile

Instead of showing a picture, it shows an SVG, probably because zhihu didn’t capture the picture.

The third is the nuggets home address: juejin. Cn /

I looked at the picture on the home page. It was the picture on the left of “The Hitchhiker’s Guide to Rare Earth Mining”.

Why is this picture shown? As opposed to some other picture? Because there are many other images on the page.

Review the elements and find that the image is also the address of an IMG tag.

Look it up

Search “webpage Zhihu sends link, first picture is caught”, happen to see webpage how to control when sharing title and picture to Zhihu? Similar questions, tapir’s answer is different from my test results.

To validate the

The first kind of circumstance: pure HTML files, demo.polyv.net/oujiale/tes…

No images are shown, which confirms tapir’s claim that the front end is rendered out of reach. It should be a server render or something. So here’s a test using PHP.

The second case: to display images in PHP, demo.polyv.net/oujiale/tes…

The card has a display picture.

The third kind of situations: in PHP has a picture, but it is hidden, demo.polyv.net/oujiale/tes…

Why check this out? If an image is displayed on the page for the purpose of effect, it will affect the original effect of the page. So this was tested, and the card still showed the picture.

Wrote last

The title of the page shared to Zhihu is displayed by the content in the title tag of the page.

The image, which is displayed by the image of the page’s IMG tag, is most likely the first IMG SRC content on the page.

I hope I can stay curious and believe that I have the ability to do better!

To the end.