Chapter 15: SEO, Sharing, and Analytics

Introduction

You’ve finally finished your project and sent it to your friends, who are amazed by your creativity. They start sharing your website on social media, and as you watch the click-through rate climb bit by bit, you can’t help but feel proud.

But Xiaoming searches through ten pages of Baidu and Google and still can’t find his own app. That’s when he realizes: even the best product can go unnoticed if it’s hidden away — you need to make your site easier for both search engines and social platforms to discover.

1. SEO Search Engine Optimization

Xiaoming refreshes his website several times a day, but even after digging through ten pages of search results, he still can’t find it. The old master tells him that search engine crawlers are like blind men — you have to show them the way.

• Metadata: Configure the metadata object in Next.js layout.tsx, and fill in a clear title and description so crawlers know who you are.

• Sitemap: A map for crawlers that tells them what pages exist on your site and which ones are the newest.

• Robots.txt: A rules file for crawlers that tells them what they can and cannot crawl.

The old master tells Xiaoming that SEO is not a one-time setup, but an ongoing process of optimization. Structured data helps search engines better understand your content; Core Web Vitals are Google’s page experience metrics and directly affect search rankings; mobile friendliness is also an important ranking factor. These optimizations won’t send you to the top overnight, but with consistent effort, your website will gradually climb in search results over time.

2. Open Graph Sharing

Xiaoming shares his SEO-optimized URL in a group chat, only to find that it shows up as nothing more than a plain blue link, with no title or image at all. Naturally, nobody wants to click it. The old master tells him to configure the Open Graph (OG) protocol.

In Next.js, all you need to do is add an image named opengraph-image.png, and it will automatically generate OG tags. When social platforms crawl your page, they can then display a beautiful large image and an engaging title. Social sharing is a major traffic source for modern products, and visual appeal directly affects click-through rates. OG optimization is not optional — it’s foundational marketing infrastructure.

When Xiaoming shares the link in the group chat again, a polished preview image and an eye-catching title appear. His friends’ click-through rate spikes instantly.

3. Umami Analytics

Xiaoming has no idea how many people visit each day, where they come from, or what devices they use. The analytics tools on the market (such as Google Analytics) feel too heavy, and they can also easily raise privacy concerns. Then the old master remembers the 1Panel server he had just set up in Chapter 14.

"Why not host your own analytics system?" Xiaoming opens the 1Panel app store and deploys Umami with one click. He pastes the small snippet of JS code generated by Umami into his app, and a few minutes later, as he watches the live visitor count flicker in the dashboard, he feels the life of the product for the first time.

The old master says: "Going live isn’t the end — it’s the beginning of understanding. With data, you can make better decisions. But remember: before collecting data, first be clear about what problem you’re trying to solve."

4. Compliance

"Legal compliance is not optional — it’s required homework," the old master says seriously.

First: Privacy Policy. If you collect user data (email addresses, behavioral data, etc.), you must have a privacy policy explaining how the data is used, how it is stored, and what rights users have. GDPR (the EU’s General Data Protection Regulation) has strict requirements, and noncompliance can result in massive fines.

Second: Terms of Service. Clearly define the service terms, disclaimers, and the boundaries of content responsibility.

Third: ICP Filing. If your server is located in mainland China, you must complete ICP filing; otherwise, your website may be blocked.

Remember: compliance is the foundation of long-term product operations. Don’t wait until you get reported to start thinking about compliance.

---

Chapter Summary

1. 15.1 Open Graph and Social Sharing — OG protocol, platform differences, image design
2. 15.2 The Complete SEO Guide — search engine principles, basic configuration, content optimization
3. 15.3 Umami Analytics — metric interpretation, data-driven decision-making, privacy protection
4. 15.4 Legal Compliance — privacy policy, terms of service, ICP filing

---

Previous Chapter: Chapter 14: Cloud Server Operations and Project Deployment

Next Chapter: Chapter 16: User Feedback and Product Iteration