When we built our family website, we wanted to provide a small glimpse for those outside the family — some general information (to be added later), a blog to share what's happening with us, and additional useful links. To attract visitors beyond the site's members, it was important to add the site to search engines (mainly Google).

It sounds simple, but the path to getting Google to find the site included several interesting challenges.

1. Implementing sitemap.xml

To let Google know which pages it can read, I added a sitemap.xml. This is a file that informs search engines about the links within the site.

2. Server-side rendering with Next.js

One of the major advantages of Next.js is the ability to generate content on the server side. A site built with React alone sends almost only JavaScript code to the browser, and the browser is the one that renders (displays) the content. Search engines, on the other hand, do not always execute this code — which is why they "do not see" what appears on the screen for the user.

With the correct implementation of Next.js, from the very first request from the server, a complete HTML content of the page is sent, allowing search engines to read and index it like any other static page.

In the first version of the site, this did not happen: the translation mechanism waited for the JavaScript code to run on the client side to identify the language,
and therefore no readable content was generated on the server side.

The solution was simple but critical — setting a default language, so that a complete server output is always generated without relying on running the code on the client side.

3. Adding json-ld

This is a data structure from which Google extracts information about the content. For example, on the blog page, this object will contain information about all the posts on the page. It is essentially a piece of information that human visitors do not see, but search engines look for it to understand what is on the page.

4. Content Structure

Search engines prefer that there is a clear structure to the page at the HTML level. For example:

• There should be a single H1 on the page that describes the content.
• There should be a match between the lang attribute at the beginning of the HTML and the language of the page.
• Alternate titles that link to the page in other languages.

The goal has not yet been achieved, but there is progress in the structure of the site, hoping that Google will index it soon.

The feature - to see the family Yahrzeit dates on the calendar on future dates.

Hebrew dates can be on differnt Gregorian month. So I've search for an elegant way to make minimum calculations and show the the memorial date on each year as required.

To make the minimum calculations - I figured out the term "horizon year". The horizon year is the maximum year someone looked in the future. Every time the horizon is push into the future - we go over all the hebrew events and calculate for them the date in that year.

E.g: if I look into September next year, and it's the first time someone looked into future calendar, the horizon year will change from 2025 to 2026 and calculation will be made for all events in the site. The calculation will be stored in the anniversaries collection.

The horizon year will be saved in "config" collection, where each site has it's own horizon year.

Yaakov