Everyone says to add social media icons to your EmDash site’s header or footer. Most tutorials tell you to paste the URLs, pick a clean icon set, and call it done. Simple, right?
Wrong.
The engagement rate for social icons in headers hovers around 0.5% to 1% of page views in most production environments.
That advice works for a brochure site with three visitors a month. But it fails for anyone running a real content operation. The default placement strategy ignores how visitors actually interact with social icons, where they look for them, and what makes them click. Worse, it can actively hurt your site’s performance and user experience.
Let’s fix that.
The Real Problem With Header Icons
Your EmDash site ships with social link settings in the admin panel. Go to Settings, find Social Links, and you’ll see fields for Twitter, GitHub, LinkedIn, and a few others. Fill them in, and icons appear in your theme’s header.
That’s the common approach. And here’s why it’s incomplete.
Header icons compete with your primary navigation, your logo, and often your search bar. Users have trained themselves to ignore them. Eye-tracking studies show that header social icons get glanced at, not clicked. The engagement rate for social icons in headers hovers around 0.5% to 1% of page views in most production environments.
Compare that to inline social links placed within content. When a reader finishes a post they enjoyed, they’re actively looking for a way to share it. Put a “Share on Twitter” button right after the conclusion, and click-through rates jump to 5-10%.
EmDash gives you the tools to do this properly. You just need to stop treating social links as a design afterthought.
Where Social Icons Actually Work
Within Content Blocks
EmDash uses portable text for its content editor — structured JSON, not raw HTML. That means you can insert reusable components anywhere in a post. Create a custom “Share This” section that appears after every blog post.
The EmDash admin panel lets you build these blocks once and reuse them. Go to Sections in the admin menu, create a new section with your social links, then insert it into posts via the block editor. The icons render inline, right where readers need them.
In Contextual Sidebars
EmDash widgets support sidebar placement. But instead of dumping every social link into a generic widget, create context-specific ones. A “Follow for Updates” widget on your blog index works. A “Share This Page” widget on a product page works better.
Use EmDash’s built-in taxonomy system to control where widgets appear. Assign widgets to specific categories or tags. Your photography portfolio doesn’t need a LinkedIn icon. Your tech blog doesn’t need an Instagram one.
In the Footer (But Not the Way You Think)
Footer social icons have one legitimate use: as a fallback for users who scroll to the bottom looking for contact information. But they should be secondary, not primary.
Place them next to your copyright line, not above it. Use smaller icons. Gray-scale them by default, and only add color on hover. This signals that these are utility links, not content.
Technical Implementation in EmDash
EmDash themes are built with Astro, which means you have full control over component rendering. The theme you selected during installation determines where social links appear by default. To change that, you’ll need to modify your theme files.
Here’s the practical approach:
- Locate your social link configuration in the EmDash admin under Settings > Social Links.
- Create a custom Astro component that renders icons based on those settings. EmDash exposes the social data through its API, so your component can pull the links dynamically.
- Place the component where it matters — inside your post layout, not just in the global header.
A developer familiar with Astro can set this up in under an hour. For non-developers, EmDash’s plugin system will eventually provide social link plugins. But right now, at version 0.1.0, you’re building this yourself or waiting.
The Accessibility Angle Nobody Talks About
Default social icon implementations fail accessibility checks constantly. Icon-only links lack text labels. Screen readers see an empty anchor tag. Color contrast ratios get ignored. And the tiny click targets frustrate mobile users.
The fix is straightforward but almost nobody does it:
- Add
aria-labelattributes to every social icon link - Include visible text labels alongside icons on desktop, or show them on hover
- Set minimum touch targets of 44×44 pixels for mobile
- Maintain a contrast ratio of at least 4.5:1 for icon colors against backgrounds
EmDash’s default theme handles some of this. But if you’re customizing social link placement, you inherit responsibility for accessibility. Test with a screen reader before publishing.
When Icons Don’t Belong at All
Some EmDash sites should skip social icons entirely. Documentation sites, internal knowledge bases, and lead generation pages for B2B services rarely benefit from social sharing. Visitors to those pages want information, not a detour to your Twitter feed.
Ask yourself: does this page serve content that someone would share socially? If the answer is no, remove the icons. Every element on a page either supports conversion or distracts from it.
What the Default Advice Misses
The standard tutorial assumes one-size-fits-all placement. It assumes your audience uses social media. It assumes they want to share your content. And it assumes header placement is neutral — neither helping nor hurting.
Those assumptions fail for specific scenarios:
- High-traffic content sites where header icons distract returning readers
- E-commerce pages where social links cannibalize purchase intent
- Portfolio sites where the work itself should drive engagement, not a Twitter follow button
- Newsletter-first sites where you want email signups, not social shares
In each case, blind adherence to default placement costs you engagement and conversions.
The One Edge Case That Changes Everything
There is one scenario where header social icons outperform all other placements: when your brand relies entirely on social media presence. If you’re a creator who monetizes through Twitter or YouTube, and your EmDash site exists primarily to funnel visitors to those platforms, put the icons front and center. Make them the largest elements on the page. The header is exactly where they belong.
But that’s the exception, not the rule. For everyone else, the default advice is incomplete. Test your own placement. Run a simple A/B test: header-only versus inline-with-content. Measure click-through rates over a week. The data will tell you which approach works for your specific audience.
- Why does default social link placement in EmDash fail?Default header placement competes with navigation and users ignore it, resulting in low engagement rates of 0.5% to 1%.
- Where should social icons be placed for better engagement?Place social icons inline within content, in contextual sidebars, or in the footer as a fallback for better click-through rates.
- When is header social icon placement effective?Header placement works when your brand relies entirely on social media presence, such as creators monetizing through Twitter or YouTube.
