Insights and blog posts need approximately one enrichment element per 500 words. Use this library as a reference for the elements available and the exact prompt that gets Claude to apply them correctly.
Each block shows the rendered element on the left and the prompt to give Claude on the right, alongside the HTML that should end up in the post.
A Google core update tells you nothing about visibility in ChatGPT, Perplexity or Copilot.
Pull the single sharpest sentence from the section above and turn it into a blockquote. It must be a strong, standalone claim that earns the visual emphasis on its own, not a generic summary. Place the blockquote between two paragraphs of prose. Never place a blockquote directly before an H2, table, list or code block. Do not add attribution unless the quote is from a named external source.
HTML to output<blockquote>
<p>Your standout sentence here.</p>
</blockquote>The AI Overview redesign permanently changed the relationship between organic rank and click-through. We're now measuring two surfaces, not one.
Where a section cites a quote from a named external person (an analyst, executive, customer or industry source), render it with attribution. This is different from a blockquote, which pulls a sentence from the article itself. The quote should be one to two sentences, in quotation marks if cited verbatim. The citation line names the person, their role or company, and the source. Confirm the source URL is live before pasting. Place between two paragraphs of prose, never directly before an H2.
HTML to output<figure class="pp-quote">
<blockquote class="pp-quote__body">
<p>The quoted text goes here.</p>
</blockquote>
<figcaption class="pp-quote__cite">
<span class="pp-quote__cite-dash">—</span>
<span><strong>Name</strong>, Role at Company · Source, Date</span>
</figcaption>
</figure>| Channel | Best for | Typical lead time |
|---|---|---|
| Organic search | Long-term, lower CPA | 3 to 6 months |
| Paid search | Demand capture, fast tests | 1 to 2 weeks |
| LinkedIn Ads | B2B targeting by role | 2 to 4 weeks |
Where the section above is comparing options, criteria or features across three or more items, convert it into a table. The first column is the thing being compared, the rest are its attributes. Header row must use thead with th cells, never bare th inside tbody. Keep cell content short. Place at least one paragraph of prose between the table and the next H2. Never place a table directly before another enrichment element.
HTML to output<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table><script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Priority Pixels",
"url": "https://prioritypixels.co.uk"
}
</script>For technical content that benefits from a concrete example such as schema markup, robots directives, htaccess rules or a configuration snippet, render the example as a code block using pre and code together. Keep the snippet short and focused on the point being made in the surrounding paragraphs. Never use a code block for plain English content or quoted prose. Always wrap a paragraph of prose around the code block, never end an H2 section on it.
HTML to output<pre><code>
your code snippet here
</code></pre>Example metric · Five segments
Short caption explaining what the chart shows. Two sentences maximum.
Sources: Example data only.
Where a section presents a comparison of two or more discrete values that the reader needs to absorb at a glance, render the data as a bar chart. Each bar must have an inline style of style="--h: NN%" matching the value shown above the bar, where NN is the percentage of the y-axis maximum. Cycle the bar colours in this exact order: teal, pink, yellow, teal, pink. Include an eyebrow, a title, a one-line caption, a sources line below the chart, and an aria-label on the chart body for accessibility. Place between two paragraphs of prose, never directly before an H2.
HTML to output<div class="pp-chart">
<p class="pp-eyebrow">Eyebrow · Subhead</p>
<h3>Chart title</h3>
<p>One-line caption explaining what the chart shows.</p>
<div class="pp-chart__body" role="img" aria-label="Plain-English summary">
<div class="pp-chart__y-axis">
<span>100%</span><span>80%</span><span>60%</span>
<span>40%</span><span>20%</span><span>0%</span>
</div>
<div class="pp-chart__plot">
<div class="pp-chart__bar" style="--h: 22%">
<span class="pp-chart__value">22%</span>
<div class="pp-chart__col pp-chart__col--teal"></div>
</div>
<div class="pp-chart__bar" style="--h: 41%">
<span class="pp-chart__value">41%</span>
<div class="pp-chart__col pp-chart__col--pink"></div>
</div>
<div class="pp-chart__bar" style="--h: 58%">
<span class="pp-chart__value">58%</span>
<div class="pp-chart__col pp-chart__col--yellow"></div>
</div>
<div class="pp-chart__bar" style="--h: 73%">
<span class="pp-chart__value">73%</span>
<div class="pp-chart__col pp-chart__col--teal"></div>
</div>
<div class="pp-chart__bar" style="--h: 87%">
<span class="pp-chart__value">87%</span>
<div class="pp-chart__col pp-chart__col--pink"></div>
</div>
</div>
</div>
<div class="pp-chart__x-axis">
<div class="pp-chart__x-label">Segment A</div>
<div class="pp-chart__x-label">Segment B</div>
<div class="pp-chart__x-label">Segment C</div>
<div class="pp-chart__x-label">Segment D</div>
<div class="pp-chart__x-label">Segment E</div>
</div>
<p class="pp-chart__sources"><strong>Sources:</strong> Source citation here.</p>
</div>Example metric · Channel mix
Short caption explaining what the breakdown shows. Two sentences maximum.
Sources: Example data only.
Where a section breaks a whole into discrete proportional parts that sum to 100 per cent, render the data as a pie chart. Use a conic-gradient for the pie itself, listing slice colours and start to end percentages in order. Cycle the slice colours in this order: teal, pink, yellow, dark grey, then a neutral grey for any remaining segments. The legend on the right must list each slice in the same order with a swatch, label and percentage. Include an eyebrow, title, one-line caption, sources line and an aria-label on the chart body. Place between two paragraphs of prose, never directly before an H2.
HTML to output<div class="pp-pie-chart">
<p class="pp-eyebrow">Eyebrow · Subhead</p>
<h3>Chart title</h3>
<p>One-line caption explaining what the breakdown shows.</p>
<div class="pp-pie-chart__body" role="img" aria-label="Plain-English summary of the slices and percentages">
<div class="pp-pie-chart__pie" style="--pie-gradient: conic-gradient(
#4fbab7 0 38%,
#ed3779 38% 62%,
#ffc63b 62% 80%,
#262728 80% 92%,
#b8b8b8 92% 100%
)"></div>
<ul class="pp-pie-chart__legend">
<li>
<span class="pp-pie-chart__swatch pp-pie-chart__swatch--teal"></span>
<span class="pp-pie-chart__legend-label">Segment A</span>
<span class="pp-pie-chart__legend-value">38%</span>
</li>
<li>
<span class="pp-pie-chart__swatch pp-pie-chart__swatch--pink"></span>
<span class="pp-pie-chart__legend-label">Segment B</span>
<span class="pp-pie-chart__legend-value">24%</span>
</li>
<li>
<span class="pp-pie-chart__swatch pp-pie-chart__swatch--yellow"></span>
<span class="pp-pie-chart__legend-label">Segment C</span>
<span class="pp-pie-chart__legend-value">18%</span>
</li>
<li>
<span class="pp-pie-chart__swatch pp-pie-chart__swatch--dark"></span>
<span class="pp-pie-chart__legend-label">Segment D</span>
<span class="pp-pie-chart__legend-value">12%</span>
</li>
<li>
<span class="pp-pie-chart__swatch pp-pie-chart__swatch--grey"></span>
<span class="pp-pie-chart__legend-label">Segment E</span>
<span class="pp-pie-chart__legend-value">8%</span>
</li>
</ul>
</div>
<p class="pp-pie-chart__sources"><strong>Sources:</strong> Source citation here.</p>
</div>Example · Pillars
01
02
03
04
Where a section presents three or four standalone principles, pillars or constants that the reader should absorb at a glance, render them as solid colour blocks. Each block is just a number and a short uppercase title, no body text. Use this for the strongest visual emphasis on the page, sparingly. Choose colour modifiers from teal, pink, yellow and dark grey, in any order. Include an eyebrow above the heading. For three blocks add style="--blocks: 3" on the grid, for four use the default of two columns which auto-wraps to a 2x2 grid.
HTML to output<div class="pp-blocks">
<p class="pp-blocks__eyebrow">Eyebrow line</p>
<h3 class="pp-blocks__heading">Blocks heading</h3>
<div class="pp-blocks__grid">
<div class="pp-block pp-block--teal">
<p class="pp-block__number">01</p>
<h4 class="pp-block__title">Principle name</h4>
</div>
<div class="pp-block pp-block--pink">
<p class="pp-block__number">02</p>
<h4 class="pp-block__title">Principle name</h4>
</div>
<div class="pp-block pp-block--yellow">
<p class="pp-block__number">03</p>
<h4 class="pp-block__title">Principle name</h4>
</div>
<div class="pp-block pp-block--dark">
<p class="pp-block__number">04</p>
<h4 class="pp-block__title">Principle name</h4>
</div>
</div>
</div>78%
Of UK B2B buyers research vendors anonymously before talking to sales
3.2x
Lift in MQL conversion when LinkedIn Ads run alongside Google Search
£42
Average cost per lead from UK B2B Google Search campaigns in 2025
Sources: Example data only.
Where a section cites three or four standalone statistics that the reader should absorb at a glance, render them as stat tiles. Each tile is one number or short value plus a one-sentence label describing what it represents. Cycle the value colours in this exact order: teal, pink, yellow, then teal again if a fourth tile is needed. Always include a sources line below the grid citing every figure. Use three tiles when possible, four if the data justifies it. Place between two paragraphs of prose, never directly before an H2.
HTML to output<div class="pp-stat-tiles">
<div class="pp-stat-tiles__grid">
<div class="pp-stat-tile pp-stat-tile--teal">
<p class="pp-stat-tile__value">78%</p>
<p class="pp-stat-tile__label">One-sentence label for the first stat.</p>
</div>
<div class="pp-stat-tile pp-stat-tile--pink">
<p class="pp-stat-tile__value">3.2x</p>
<p class="pp-stat-tile__label">One-sentence label for the second stat.</p>
</div>
<div class="pp-stat-tile pp-stat-tile--yellow">
<p class="pp-stat-tile__value">£42</p>
<p class="pp-stat-tile__label">One-sentence label for the third stat.</p>
</div>
</div>
<p class="pp-stat-tiles__sources"><strong>Sources:</strong> Source citation for every figure.</p>
</div>Where a section references three or more dated events the reader needs to see in chronological order, render them as a horizontal timeline. Each event has a date in uppercase and a short one-line description. Marker colours cycle teal, pink, yellow automatically. Use three to five events maximum. For four or five events add style="--events: 4" or "--events: 5" on the track. Place between two paragraphs of prose, never directly before an H2.
HTML to output<div class="pp-timeline">
<div class="pp-timeline__track">
<div class="pp-timeline__event">
<div class="pp-timeline__marker"></div>
<span class="pp-timeline__date">Date</span>
<span class="pp-timeline__title">Short event description</span>
</div>
<div class="pp-timeline__event">
<div class="pp-timeline__marker"></div>
<span class="pp-timeline__date">Date</span>
<span class="pp-timeline__title">Short event description</span>
</div>
<div class="pp-timeline__event">
<div class="pp-timeline__marker"></div>
<span class="pp-timeline__date">Date</span>
<span class="pp-timeline__title">Short event description</span>
</div>
</div>
</div>Campaign · Q1 to Q3 example
Funnel audit, persona definition and measurement plan. Baseline metrics captured before any campaign goes live.
Landing pages, ad accounts, CRM and lead routing all wired together. Test budgets active by the end of the quarter.
Double down on what works, kill what doesn't, refine creative and audiences weekly. Cost per qualified lead trends downward.
Use the complex timeline variant when a section frames multiple dated events around a single overarching narrative that deserves its own headline. Add a short pink eyebrow above an uppercase heading. Each event sits inside a card with its date and source as a coloured meta line, an uppercase card title, and a one to two sentence body with the standout phrase in strong tags. Finish with a one-line footer that summarises what the timeline tells the reader. Use three or four events maximum. Place between two paragraphs of prose, never directly before an H2. For four events add style="--events: 4" on the track.
HTML to output<div class="pp-timeline">
<p class="pp-timeline__eyebrow">Eyebrow line</p>
<h3 class="pp-timeline__heading">Timeline headline</h3>
<div class="pp-timeline__track">
<div class="pp-timeline__event">
<div class="pp-timeline__marker"></div>
<div class="pp-timeline__card">
<span class="pp-timeline__meta">Date · Source</span>
<h4 class="pp-timeline__card-title">Event title</h4>
<p class="pp-timeline__card-body">Event body. <strong>Standout phrase.</strong></p>
</div>
</div>
<div class="pp-timeline__event">
<div class="pp-timeline__marker"></div>
<div class="pp-timeline__card">
<span class="pp-timeline__meta">Date · Source</span>
<h4 class="pp-timeline__card-title">Event title</h4>
<p class="pp-timeline__card-body">Event body. <strong>Standout phrase.</strong></p>
</div>
</div>
<div class="pp-timeline__event">
<div class="pp-timeline__marker"></div>
<div class="pp-timeline__card">
<span class="pp-timeline__meta">Date · Source</span>
<h4 class="pp-timeline__card-title">Event title</h4>
<p class="pp-timeline__card-body">Event body. <strong>Standout phrase.</strong></p>
</div>
</div>
</div>
<p class="pp-timeline__footer">One-line footnote.</p>
</div>Example · Workflow
Brief one-line summary of what the workflow covers
Where a section explains a sequential workflow or process that benefits from being read top-to-bottom rather than left-to-right, render it as a vertical timeline. Use a short eyebrow above an uppercase heading, then a one-line subtitle, then the ordered list of steps. Each step is a single uppercase phrase. Dots cycle teal, pink, yellow by default. To group phases visually, add a modifier on each step: pp-vtimeline__step--teal, --pink or --yellow. Optional footer line below the list for attribution or context. Use five to nine steps. Place between two paragraphs of prose, never directly before an H2.
HTML to output<div class="pp-vtimeline">
<p class="pp-vtimeline__eyebrow">Eyebrow line</p>
<h3 class="pp-vtimeline__heading">Workflow heading</h3>
<p class="pp-vtimeline__subtitle">Short subtitle</p>
<ol class="pp-vtimeline__steps">
<li class="pp-vtimeline__step">
<span class="pp-vtimeline__dot"></span>
<span class="pp-vtimeline__title">Step one</span>
</li>
<li class="pp-vtimeline__step">
<span class="pp-vtimeline__dot"></span>
<span class="pp-vtimeline__title">Step two</span>
</li>
<li class="pp-vtimeline__step">
<span class="pp-vtimeline__dot"></span>
<span class="pp-vtimeline__title">Step three</span>
</li>
</ol>
<p class="pp-vtimeline__footer">Optional footer attribution</p>
</div>78%
Most of the buyer journey now happens before your sales team is ever contacted. That makes your brand's organic and AI-search presence the difference between being shortlisted and being missed entirely.
Source: Example data only.Where a single statistic anchors a section's whole argument and deserves more visual weight than a stat tile, render it as a highlighted single statistic. One number on the left, a short heading and one to two sentence explanation on the right, with the source cited beneath. Pick the colour modifier (teal, pink, yellow) to match the section's tone. Use this sparingly, no more than once per post, on the stat that genuinely matters most. Place between two paragraphs of prose, never directly before an H2.
HTML to output (pick the colour modifier)<div class="pp-stat-feature pp-stat-feature--teal">
<div class="pp-stat-feature__grid">
<p class="pp-stat-feature__value">78%</p>
<div>
<h4 class="pp-stat-feature__heading">Short heading for the stat</h4>
<p class="pp-stat-feature__body">One to two sentences of context for the stat.</p>
<span class="pp-stat-feature__source"><strong>Source:</strong> Source citation here.</span>
</div>
</div>
</div>Where a section uses three or more acronyms, technical terms or platform-specific concepts the reader may not recognise, render the vocabulary as a definition list. Each entry pairs a short term in uppercase with a one to two sentence definition. Order entries logically (alphabetical, or in the order they first appear in the article). Use the semantic dl, dt and dd elements. Term colours cycle teal, pink, yellow automatically. Place at the end of a section as a reference block, or near the top as a glossary preface.
HTML to output<dl class="pp-glossary">
<div class="pp-glossary__entry">
<dt class="pp-glossary__term">Term</dt>
<dd class="pp-glossary__def">One to two sentence definition.</dd>
</div>
<div class="pp-glossary__entry">
<dt class="pp-glossary__term">Term</dt>
<dd class="pp-glossary__def">One to two sentence definition.</dd>
</div>
<div class="pp-glossary__entry">
<dt class="pp-glossary__term">Term</dt>
<dd class="pp-glossary__def">One to two sentence definition.</dd>
</div>
</dl>Use the tip variant for positive, actionable advice the reader can apply immediately.
Use the note variant for a key takeaway or piece of context that doesn't fit the surrounding paragraphs but matters.
Use the warning variant for caveats, common pitfalls or deadlines the reader needs to be aware of before acting.
Where a section contains a meta-note to the reader that sits outside the main argument (a tip, a key takeaway, a caveat or a deadline), render it as a callout box. Use the tip variant for actionable advice, the note variant for context the reader should hold in mind, and the warning variant for pitfalls or hard deadlines. One short paragraph per callout, two sentences maximum. Never use a callout for a sentence pulled from the article itself, that is what blockquote is for. Place between two paragraphs of prose, never directly before an H2.
HTML to output (pick the variant)<div class="pp-callout pp-callout--tip">
<span class="pp-callout__icon">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M9 21a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1v-1H9v1zm3-19a7 7 0 0 0-4 12.74V17a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2.26A7 7 0 0 0 12 2z"/>
</svg>
</span>
<div class="pp-callout__body">
<span class="pp-callout__label">Tip</span>
<p>Your tip content here.</p>
</div>
</div>
<div class="pp-callout pp-callout--note">
<span class="pp-callout__icon">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 5a1.5 1.5 0 1 1-1.5 1.5A1.5 1.5 0 0 1 12 7zm2 11h-4a1 1 0 0 1 0-2h1v-4h-1a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v5h1a1 1 0 0 1 0 2z"/>
</svg>
</span>
<div class="pp-callout__body">
<span class="pp-callout__label">Note</span>
<p>Your note content here.</p>
</div>
</div>
<div class="pp-callout pp-callout--warning">
<span class="pp-callout__icon">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 2L1 21h22L12 2zm0 6a1 1 0 0 1 1 1v6a1 1 0 0 1-2 0V9a1 1 0 0 1 1-1zm0 11a1.25 1.25 0 1 1 1.25-1.25A1.25 1.25 0 0 1 12 19z"/>
</svg>
</span>
<div class="pp-callout__body">
<span class="pp-callout__label">Warning</span>
<p>Your warning content here.</p>
</div>
</div>Bespoke WordPress and WooCommerce websites built for measurable performance and conversion.
Visibility work grounded in technical, content and authority signals. UK-focused, no shortcuts.
Paid search and social campaigns that deliver qualified leads, not just clicks or vanity metrics.
Where a section introduces three or four equally-weighted concepts, features, services or announcements that the reader needs to take in side by side, render them as a card grid. Each card has a short optional eyebrow above the title, a short title in uppercase and a one-to-two-sentence body. Order does not imply priority. Card accent colours cycle teal, pink, yellow automatically. For a four-card grid, add style="--cards: 4" on the wrapping div. Place between two paragraphs of prose, never directly before an H2.
HTML to output<div class="pp-cards">
<div class="pp-cards__grid">
<div class="pp-card">
<span class="pp-card__eyebrow">Eyebrow</span>
<h4 class="pp-card__title">Card title</h4>
<p class="pp-card__body">One to two sentences about the card.</p>
</div>
<div class="pp-card">
<span class="pp-card__eyebrow">Eyebrow</span>
<h4 class="pp-card__title">Card title</h4>
<p class="pp-card__body">One to two sentences about the card.</p>
</div>
<div class="pp-card">
<span class="pp-card__eyebrow">Eyebrow</span>
<h4 class="pp-card__title">Card title</h4>
<p class="pp-card__body">One to two sentences about the card.</p>
</div>
</div>
</div>Review the current digital presence and identify the quick wins.
Define goals, audience and KPIs aligned with business outcomes.
Launch campaigns, track results and iterate based on the data.
Where a section explains a sequence the reader needs to follow in order, render the sequence as numbered process steps. Use three or four steps maximum, never more. Each step has a short title in uppercase and a one-sentence description of what happens at that stage. Number circles cycle through teal, pink, yellow automatically. For a four-step process, add style="--steps: 4" on the ol. Place between two paragraphs of prose, never directly before an H2.
HTML to output<div class="pp-process">
<ol class="pp-process__steps">
<li class="pp-process__step">
<div class="pp-process__number">1</div>
<h4 class="pp-process__title">Step name</h4>
<p class="pp-process__body">One-sentence description of what happens at this step.</p>
</li>
<li class="pp-process__step">
<div class="pp-process__number">2</div>
<h4 class="pp-process__title">Step name</h4>
<p class="pp-process__body">One-sentence description.</p>
</li>
<li class="pp-process__step">
<div class="pp-process__number">3</div>
<h4 class="pp-process__title">Step name</h4>
<p class="pp-process__body">One-sentence description.</p>
</li>
</ol>
</div>Where a section gives tactical guidance with clear right and wrong approaches, render the contrast as two side-by-side comparison columns. The left column is "Do" or "Before" with a green tick. The right column is "Don't" or "After" with a red cross. Each column gets three to five short bullets, no full sentences. Bullets must be parallel in structure between the two columns so the reader can compare each row directly. Place between two paragraphs of prose, never directly before an H2.
HTML to output<div class="pp-compare">
<div class="pp-compare__grid">
<div class="pp-compare__col pp-compare__col--do">
<div class="pp-compare__header">
<span class="pp-compare__icon">✓</span> Do
</div>
<ul class="pp-compare__list">
<li>First do.</li>
<li>Second do.</li>
<li>Third do.</li>
</ul>
</div>
<div class="pp-compare__col pp-compare__col--dont">
<div class="pp-compare__header">
<span class="pp-compare__icon">✕</span> Don't
</div>
<ul class="pp-compare__list">
<li>First don't.</li>
<li>Second don't.</li>
<li>Third don't.</li>
</ul>
</div>
</div>
</div>
Where a section references a specific named brand, page or screen the reader would benefit from seeing, insert a captioned screenshot of that page. Use a 1800x1200 (3:2 aspect ratio) screenshot saved to the WordPress media library. The caption must start with the brand name in strong tags, follow with one sentence of context, and link the relevant page or asset on the external site with target blank. Never use a screenshot decoratively or where the page being shown is not directly relevant to the surrounding paragraphs.
HTML to output<div class="blog-screenshot-box">
<div class="screenshot-image">
<img src="https://prioritypixels.co.uk/wp-content/uploads/YYYY/MM/file.jpg"
alt="Descriptive alt text" width="1800" height="1200">
</div>
<div class="screenshot-caption">
<strong>Brand name:</strong> One sentence of context that
<a href="https://example.com/page" target="_blank"
title="Descriptive link title">links the page being shown</a>
on the external site.
</div>
</div>Where a section references a video that materially adds to the point being made (a product demo, an executive keynote clip, a recorded talk), embed it inline using the brand video wrapper. Use the YouTube or Vimeo embed URL, not the watch URL. The video must be directly relevant to the surrounding paragraphs, never decorative. Confirm the URL is still live before pasting. Place between two paragraphs of prose, never directly before an H2.
HTML to output (YouTube)<div class="blog-video-box">
<div class="blog-video-box__frame">
<iframe src="https://www.youtube.com/embed/VIDEO_ID"
title="Descriptive title"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div><div class="blog-video-box">
<div class="blog-video-box__frame">
<iframe src="https://player.vimeo.com/video/VIDEO_ID"
title="Descriptive title"
frameborder="0"
allow="autoplay; fullscreen; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>Where a section references a named industry source, executive announcement or update from a platform like Google, Microsoft or LinkedIn, embed the original social post inline. Use the iframe embed format for LinkedIn (URL pattern: linkedin.com/embed/feed/update/urn:li:activity:NUMERIC_ID, taken from the post's embed code on LinkedIn) and the blockquote with twitter-tweet class for X / Twitter. Confirm the URL is still live before pasting. Place the embed between two paragraphs of prose, never directly before an H2 or another enrichment element.
HTML to output (LinkedIn)<div class="blog-social-box">
<iframe style="max-width: 100%;"
title="Descriptive title of the embedded post"
src="https://www.linkedin.com/embed/feed/update/urn:li:activity:NUMERIC_ID"
width="504" height="600" frameborder="0"
allowfullscreen="allowfullscreen"></iframe>
</div><div class="blog-social-box">
<blockquote class="twitter-tweet" data-lang="en">
<p lang="en" dir="ltr">Tweet text pasted in here as a fallback if the script fails to load.</p>
— Author Name (@handle)
<a href="https://twitter.com/handle/status/NUMERIC_ID">Date</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>