Show the logo in link previews: give every page an og:image - #152
Merged
Conversation
A link to any page of this site previewed as the grey placeholder card on LinkedIn, Slack and WhatsApp: the site emitted no Open Graph tags at all, so there was no image for a crawler to find and nothing to fall back to. - docs/public/og-image.png, 1200x630 — the logo plus the tagline, in the ratio LinkedIn renders as a large card. Anything narrower than 1200px is shown as a small square thumbnail, which is why logo.png (1064x1042) is not a substitute. - The og:image, og:type, og:site_name and twitter:card tags in config.mjs head, with an ABSOLUTE image url — a relative one is silently dropped by every crawler. - og:title, og:description, og:url and a canonical link per page via transformPageData, so a shared deep link previews as the page it points at instead of the front page. The image is listed on the press-kit page next to the logo and the cover. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Q7UnvgCmVFBFUVAuT2QH44
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
A link to any page of this site previewed as the grey placeholder card on LinkedIn, Slack and WhatsApp. The reason: the site emitted no Open Graph tags at all —
config.mjshead carried only the favicon, Font Awesome and the fonts, so there was no image for a crawler to find and nothing to fall back to.Changes
docs/public/og-image.png— new, 1200x630: the logo plus the tagline, in the ratio LinkedIn renders as a large card. Anything narrower than 1200px is shown as a small square thumbnail, which is why the existinglogo.png(1064x1042) is not a substitute.config.mjshead —og:imagewith an absolute URL (https://abap2ui5.github.io/docs/og-image.png; a relative one is silently dropped by every crawler), plusog:image:width/height/type/alt,og:type,og:site_name,twitter:card=summary_large_image,twitter:image.transformPageData— per-pageog:title,og:description,og:urland a canonical link, so a shared deep link previews as the page it points at (Installation | abap2UI5) instead of the site front page. Uses||rather than??for the fallbacks: a page without frontmatter carries an empty string here, notundefined, and an emptyog:descriptionshows as a blank line on the card.docs/resources/logo.md— the image listed on the press-kit page next to the logo, the favicon and the cover.Verification
Checked against the built HTML, not the source.
dist/configuration/installation.htmlnow carries these meta tags:og:imagehttps://abap2ui5.github.io/docs/og-image.pngog:image:width/og:image:height1200/630og:titleInstallation | abap2UI5og:descriptionBuild UI5 Apps Purely in ABAPog:urlhttps://abap2ui5.github.io/docs/configuration/installation.htmltwitter:cardsummary_large_imageplus
rel="canonical"pointing at the same URL.npm run docs:build,npm test,npm run check:examplesandnpm run check:versionall pass.check:samplesskipped — noabap2UI5/samplescheckout in this environment; no generated samples block is touched by this change.After the deploy
LinkedIn caches a preview per URL for about a week, so the card only changes once the URL is re-crawled via the Post Inspector. Already-published posts keep the preview stored at post time and cannot be refreshed — they need a new post.