Even with a PR representative, the thumbnail doesn't show up. | Ohayou Kanojo #115
Introduction
"Ohayou Kanojo" is an X account where an AI-illustrated girlfriend says goodbye to you every morning at 7:30. I write a daily development diary about my personal project on note.
This time, I'm talking about how, even though someone was introducing links to my self-made tools every day, the card display wasn't appearing. I noticed it, fixed it, and the design ended up becoming a bit more interesting.
About Mura-san
Mura-san, thank you for posting the links every day. Thanks to that, I noticed something.
First, let me introduce him. Kawamura-san. He's called "Kawamu" on note, but since we are peers, I call him "Mura-san." Conversely, Mura-san calls me "Hasha-kun." We are peers who started on note around the same time, and he is a creator who serializes an AI manga that personifies AIs.
We started interacting recently, and from a certain day on, Mura-san began posting links to Ohenji-cho and Ohayomi in his articles every day. "Hashamo-shi Tool PR Representative"—I agreed to Mura-san's proposal immediately.
I'm grateful. But there was one problem.
The links were plain
When I went to read Mura-san's article, I found the URL for Ohenji-cho posted there.
It was in a card format. But it was just the tool's URL and a blank gray image side-by-side.
When you post a link on note, it usually displays the title and thumbnail image in a card format. But the card for Ohenji-cho had neither a title nor a thumbnail. Just a gray square and the URL.
The cause was immediately clear. It didn't support OGP. I hadn't placed the link's title, description, or image in a way that could be read from the outside. note and X look at that to create the card. If it's not there, it becomes a gray square.
Ohenji-cho didn't have that. Neither did Ohayomi or the Tsumiage Note.
Even though he was promoting them every day, the appearance was cold. I thought this wasn't right, especially since he was posting them daily.
First, I handled two of them
Since the structures of Tsumiage Note and Ohayomi were simple, I was able to handle them just by adding OGP tags and images to the HTML. Now, when the link is posted, the app name and icon are displayed in a card format.
All that remains is Ohenji-cho.
The reply book wasn't straightforward
The reply book has a system where a designated character praises you each day of the week. Monday is Tsukiko, Tuesday is Yo, Wednesday is Shizuku... and so on. If you achieve a full reply count, that day's character will praise you with a line of dialogue.
I wanted to feature the daily character on the OGP card in the same way. A card with just an icon felt lackluster.
First, I tried making an image with the icon and the character side-by-side. I even added the character's dialogue in a speech bubble.
There was too much information, and it didn't make sense at a glance.
Packing an icon, a character, and a speech bubble into a small 1200x630 pixel card was too much.
I changed my approach. I decided to keep the image to just the icon and the character, and put the dialogue in the card's text section (the description).
"My favorite is Tsukiko. 'All replies confirmed. Perfect.'"
This makes the card look cleaner. The image catches the eye, and the text lets you hear the character's voice.
The design changed due to caching issues
There were two initial designs.
One was a system where you could add a day code to the end of the URL, like `?day=fri`, to display your favorite character on the card. Since many people favor Runa, this was essential.
The other was a system that would automatically display the character for the current day if the link was posted without a day code. If you looked on Monday, you'd see Tsukiko; if you looked on Friday, you'd see Runa.
However, OGP cards are cached by the platform. A link posted on Monday would still show Tsukiko even if viewed on Wednesday. It would say "Today's representative," but the day wouldn't match.
I changed the design.
If a link is posted without a day code, it displays a simple card with only the reply book icon. No character is shown.
Only when a day code like `?day=mon` is added does that character's image and dialogue appear. If Mura-san favors Runa, they can add `?day=fri` to show Runa's card.
In that case, the description "Today's representative is Tsukiko" wouldn't make sense. Since the user is the one specifying the day code, they are choosing it themselves, not just seeing "today's" representative.
I changed it to "My favorite is Tsukiko."
If the user is choosing and posting it themselves, "favorite" felt more natural.
It wasn't just a fix for display convenience. When I changed the specifications to accommodate cache constraints, even the wording on the cards changed.
Cards for 7 people
When you introduce the Reply Notebook, if you attach the day-of-the-week code for your favorite character and post the link, that character will appear on the card.
If you copy the URL below and embed it in your article, a card with the character will be displayed. Clicking it will redirect you to the Reply Notebook itself, so please copy and use the URL without clicking it. 👇️
月子：https://ohenji-ogp.hasyamo.workers.dev/ohenji-note?day=mon
陽 ：https://ohenji-ogp.hasyamo.workers.dev/ohenji-note?day=tue
しずく：https://ohenji-ogp.hasyamo.workers.dev/ohenji-note?day=wed
凛華：https://ohenji-ogp.hasyamo.workers.dev/ohenji-note?day=thu
るな：https://ohenji-ogp.hasyamo.workers.dev/ohenji-note?day=fri
まひる：https://ohenji-ogp.hasyamo.workers.dev/ohenji-note?day=sat
日和：https://ohenji-ogp.hasyamo.workers.dev/ohenji-note?day=sunIf Mura-san is a Runa fan, adding `?day=fri` will display a card where Runa says, "Hey, hey! I finished everything! Let's celebrate!"
The PR representative's favorite girlfriend has started doing PR for us.
Conclusion
As long as I was using it by myself, I felt like it was complete. But when someone else introduced it, all the design oversights, including "how it looks to others," became visible. This time, it's a story about being taught that.
I probably wouldn't have noticed on my own.
Related Articles
Tsukiko's Word
So, what are you doing next?
If you are looking for a new challenge in the IT/Web industry,
the job site Green is also an option that can support that first step.
※This article includes PR for the job site Green
👉 "Ohayo Kanojo" is posted every morning at 7:30 AM at @ohayo_kanojo
#PersonalDevelopment #DevelopmentDiary #AIIllustration
#GenerativeAI #Programming #Record #RealExperience #MorningActivity
#AIUtilization #LearningFromFailure
#ReplyNotebook #Akarium