Next.js Pages Can Silently Lose Their Open Graph Image Through Metadata Overrides

·3 views

A developer found that 14 pages on their Next.js site lacked a share image without any build error or warning. Next.js merges metadata shallowly, so a page's openGraph object replaces the layout's entire object, dropping the og:image, og:type and site name. The problem is easy to miss because the homepage, which sets no openGraph of its own, still looks correct. The recommended fix is a shared defaults object spread into every page's openGraph, with page-specific values placed after the spread. Developers should also check one page from each route, since social previews may be cached until refreshed.

Read the full story at DEV Community

This is an AI-generated summary. ShortSingh links to the original source for the complete article.

Discussion (0)

CSS Math Dance: A Cartoon Animated Entirely With CSS Math Functions

A cartoon has been built using only HTML and CSS, with no images or scripts driving its motion. Its arms are composed of several child elements that apply the panel title's math functions to trace graphs that closely follow the intended curves. The creator notes that some functions needed manual adjustment to fit within their panels. The piece is published on the comicss.art site, which also provides the permalink, a downloadable image, and the source code. The author acknowledges that CSS has inherent limitations that shaped the final result.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

Takeout Mender Launches Free Browser Tool to Restore Google Takeout Photo Metadata

A developer has released Takeout Mender, a free tool that recovers photo and video metadata from Google Takeout exports. Because Takeout stores dates, GPS data and descriptions in separate JSON sidecar files, that information can be lost when media moves to another platform. The tool restores these details, embeds supported metadata into JPEG and PNG images, updates creation dates in MP4 and MOV videos, and generates XMP sidecars for HEIC and WebP files. It runs in the browser without an account, keeps original files unchanged, and does not upload photo archives to a server.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

Kadal Deck 0.11 closes its remaining reveal.js compatibility gaps

Kadal Deck, a presentation tool, already imported reveal.js decks closely, but a 0.10.1 audit of 164 features across 27 areas found gaps. In version 0.11, 23 options that previously had no effect now work, including centering, shuffling, fragment and embedded modes, and deck-wide line numbers. Imported decks keep their original look, since reveal's themes ship as a package and its layout classes and keycodes are supported. The deck also emits reveal's events and responds to its postMessage calls, so scripts written for reveal.js can drive it. Maths written for MathJax is carried into KaTeX at build time, with unsupported features such as \require listed in an import report, and the original deck is left untouched. The source format remains different, since a Kadal deck is a single MDX file built with Vite.

0 comments Read more at DEV Community

ProgrammingDEV Community ·

Guide Explains Adding Schema Markup to WordPress Sites Built with Bricks Builder

A new guide from DEV Community walks WordPress developers through implementing schema markup, the structured data that helps search engines interpret page content. It explains that schema uses vocabulary from Schema.org and recommends JSON-LD, which Google favors because it can be kept apart from a page's visible HTML. The article stresses that structured data is not a guaranteed ranking boost but can support enhanced search features for eligible pages. It also covers how to choose schema types that match each page's purpose, and how tools such as Bricks SEO can simplify managing structured data across different page types.

0 comments Read more at DEV Community