Front-End Web Development explains what the Open Graph protocol and Twitter cards are for. The App Router's contribution is that you write them once as objects: openGraph expands to <meta property="og:*">, twitter to <meta name="twitter:*">, and type decides which extra keys are legal — publishedTime and authors type-check under type: "article", not under type: "website". The application declared only card and site on the Twitter side, yet the book page carries a full card:
<meta property="og:image" content= "https://example.com/books/the-pragmatic-programmer/opengraph-image?5a89d3b2d5ac0b4c"/> <meta property="og:image:width" content="1200"/> <meta property="og:image:height" content="630"/> <meta name="twitter:title" content="The Pragmatic Programmer"/> <meta name="twitter:image" content= "https://example.com/books/the-pragmatic-programmer/opengraph-image?5a89d3b2d5ac0b4c"/> <meta name="twitter:image:alt" content="Book cover card"/>
The image URLs came out absolute although none was written anywhere: metadataBase did that, and crawlers reject relative ones. Every twitter:* tag beyond card and site was derived from the Open Graph values, so declare a twitter field only where it should differ. The query string hashes the image route, not the picture — both books carry the identical ?5a89d3b2d5ac0b4c — so editing the generator flushes the networks' caches while editing a record does not. A route with no image at all degrades to a small summary tile.