File: /var/www/quadcode.com/src/components/blocks/marketing-guide/Optimization.svelte
<script lang="ts">
import img1 from '../../../assets/images/marketing-guide/optimization/optimization1.svg';
import img2 from '../../../assets/images/marketing-guide/optimization/optimization2.svg';
import img3 from '../../../assets/images/marketing-guide/optimization/optimization3.svg';
import img4 from '../../../assets/images/marketing-guide/optimization/optimization4.svg';
import img5 from '../../../assets/images/marketing-guide/optimization/optimization5.svg';
import img6 from '../../../assets/images/marketing-guide/optimization/optimization6.svg';
import img7 from '../../../assets/images/marketing-guide/optimization/optimization7.svg';
import semrush from '../../../assets/images/marketing-guide/optimization/semrush.svg';
import ahrefs from '../../../assets/images/marketing-guide/optimization/ahrefs.svg';
import moz from '../../../assets/images/marketing-guide/optimization/moz.svg';
import majestic from '../../../assets/images/marketing-guide/optimization/majestic.svg';
import menus from '../../../assets/images/marketing-guide/optimization/menus.svg';
import { isMobile } from '../../../store';
export let className = '';
let mobile = false;
isMobile.subscribe((value) => {
mobile = value;
});
</script>
<div class="block-optimization {className}">
<h2>Search Engine Optimization</h2>
<p>
Search engine optimization (SEO) is about making your website more visible and higher-ranked on search engines like
Google. SEO is a must-have tool for the long run. By optimizing your site's content and structure, you can attract
more visitors and increase your chances of being found online.
</p>
<div class="{className}Wrap">
<h3>How to get started with affiliate marketing?</h3>
<p class="block-optimization__redLine">3 main parts of SEO</p>
{#if mobile}
<div class="{className}MobileTable">
<div>
<p>On Page</p>
<ul>
<li>Meta tags optimization (titles and descriptions)</li>
<li>Internal linking</li>
<li>Keyword optimization</li>
<li>Quality content creation</li>
<li>Proper header tags usage</li>
<li>Internal linking</li>
<li>Image optimization (alt tags)</li>
</ul>
</div>
<div>
<p>Off Page</p>
<ul>
<li>Linkbuilding</li>
<li>Guest blogging</li>
<li>Social media</li>
<li>Reviews</li>
<li>Increasing online brand mentions</li>
</ul>
</div>
<div>
<p>Technical SEO</p>
<ul>
<li>URL structure optimization</li>
<li>Page speed optimization</li>
<li>Mobile-friendliness</li>
<li>User experience improvement</li>
<li>Structured data</li>
<li>Canonicalization</li>
<li>Sitemap and robots</li>
<li>Hreflang</li>
</ul>
</div>
</div>
{:else}
<div class="{className}Table">
<table>
<tbody>
<tr>
<td>On Page</td>
<td>Off Page</td>
<td>Technical SEO</td>
</tr>
<tr>
<td>
<ul>
<li>Meta tags optimization (titles and descriptions)</li>
<li>Internal linking</li>
<li>Keyword optimization</li>
<li>Quality content creation</li>
<li>Proper header tags usage</li>
<li>Internal linking</li>
<li>Image optimization (alt tags)</li>
</ul>
</td>
<td>
<ul>
<li>Linkbuilding</li>
<li>Guest blogging</li>
<li>Social media</li>
<li>Reviews</li>
<li>Increasing online brand mentions</li>
</ul>
</td>
<td>
<ul>
<li>URL structure optimization</li>
<li>Page speed optimization</li>
<li>Mobile-friendliness</li>
<li>User experience improvement</li>
<li>Structured data</li>
<li>Canonicalization</li>
<li>Sitemap and robots</li>
<li>Hreflang</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
{/if}
</div>
<div class="{className}Wrap">
<h3>Tips to follow</h3>
<div class="{className}GridIcon">
<div>
<img src={img1} alt="" loading="lazy" />
<p>Create useful and engaging content</p>
</div>
<div>
<img src={img2} alt="" loading="lazy" />
<p>Optimize user experience</p>
</div>
<div>
<img src={img3} alt="" loading="lazy" />
<p>Follow technical optimization rules</p>
</div>
<div>
<img src={img4} alt="" loading="lazy" />
<p>Make a constant keywords research</p>
</div>
<div>
<img src={img5} alt="" loading="lazy" />
<p>Make regular updates</p>
</div>
<div>
<img src={img6} alt="" loading="lazy" />
<p>Monitor your performance</p>
</div>
<div>
<img src={img7} alt="" loading="lazy" />
<p>Follow search engine updates and trends</p>
</div>
</div>
</div>
<div class="{className}Extra">
<p>Key idea: <strong>focus on users, not robots</strong></p>
</div>
<div class="{className}Wrap">
<h3>Mistakes to avoid</h3>
<div class="block-optimization__lists">
<div class="block-optimization__listsItem">
<div class="block-optimization__listsRow">
<img src={menus} alt="" loading="lazy" />
<p>Black hat techniques</p>
</div>
<div class="block-optimization__listsRow">
<img src={menus} alt="" loading="lazy" />
<p>Automatically generated content</p>
</div>
<div class="block-optimization__listsRow">
<img src={menus} alt="" loading="lazy" />
<p>Copy pasted content</p>
</div>
<div class="block-optimization__listsRow">
<img src={menus} alt="" loading="lazy" />
<p>Trash link building</p>
</div>
<div class="block-optimization__listsRow">
<img src={menus} alt="" loading="lazy" />
<p>Redirects</p>
</div>
</div>
<div class="block-optimization__listsItem">
<div class="block-optimization__listsRow">
<img src={menus} alt="" loading="lazy" />
<p>404 errors</p>
</div>
<div class="block-optimization__listsRow">
<img src={menus} alt="" loading="lazy" />
<p>Hidden pages and links</p>
</div>
<div class="block-optimization__listsRow">
<img src={menus} alt="" loading="lazy" />
<p>Noindex, nofollow tag on pages</p>
</div>
<div class="block-optimization__listsRow">
<img src={menus} alt="" loading="lazy" />
<p>Wrong heading tags usage</p>
</div>
<div class="block-optimization__listsRow">
<img src={menus} alt="" loading="lazy" />
<p>Bad UX</p>
</div>
</div>
</div>
</div>
<div class="{className}Wrap">
<h3>How to create content?</h3>
<p>Here are some tips to help improve the indexation of your articles by Google's robots:</p>
<div class="{className}Grid">
<div>
<p>1</p>
<span>Provide value instantly, don’t make long introductions</span>
</div>
<div>
<p>2</p>
<span>Highlight key ideas</span>
</div>
<div>
<p>3</p>
<span>Place a link in reliable sources and internal articles</span>
</div>
<div>
<p>4</p>
<span>Optimal length for a SEO post is 2200-2500 words</span>
</div>
<div>
<p>5</p>
<span>Make content structured and easy to read</span>
</div>
<div>
<p>6</p>
<span>Highlight an author (Google wants to see expert content)</span>
</div>
</div>
<p>
In general, when making content, stick to <a
href="https://developers.google.com/search/blog/2022/12/google-raters-guidelines-e-e-a-t"
target="_blank">E-E-A-T (Experience, Expertise, Authoritativeness, and Trustworthiness)</a
> principles to ensure Google sees it as reliable.
</p>
</div>
<div class="{className}Wrap">
<h3>Tools for SEO</h3>
<p>Top tools that streamline website optimization for search engines.</p>
<div class="block-optimization__logos">
<div class="block-optimization__logosItem">
<img src={semrush} alt="" loading="lazy" />
</div>
<div class="block-optimization__logosItem">
<img src={ahrefs} alt="" loading="lazy" />
</div>
<div class="block-optimization__logosItem">
<img src={moz} alt="" loading="lazy" />
</div>
<div class="block-optimization__logosItem">
<img src={majestic} alt="" loading="lazy" />
</div>
</div>
</div>
</div>
<style lang="scss">
@import '/src/scss/media';
@import '/src/scss/mixins';
@import '/src/scss/variables';
.block-optimization {
&__redLine {
@include baseTitle;
width: max-content;
text-decoration: underline;
text-decoration-color: $redPrimary;
@include breakpoint-down('deskL') {
margin-bottom: 24px !important;
}
}
&__logos {
display: flex;
gap: 20px;
@include breakpoint-down('tabM') {
flex-wrap: wrap;
}
}
&__logosItem {
padding: 12px 0;
display: flex;
align-items: center;
justify-content: center;
width: calc((100% - 20px * 3) / 4);
@include breakpoint-down('deskL') {
padding: 0;
}
@include breakpoint-down('tabM') {
width: calc((100% - 20px) / 2);
max-width: 150px;
}
img {
width: auto;
@include breakpoint-down('deskL') {
width: 100%;
}
}
}
&__lists {
display: flex;
align-items: flex-start;
gap: 95px;
margin-top: 40px;
@include breakpoint-down('deskS') {
margin-top: 0;
gap: 0;
}
@include breakpoint-down('tabM') {
flex-wrap: wrap;
}
}
&__listsItem {
width: max-content;
}
&__listsRow {
display: flex;
align-items: center;
img {
width: 58px;
min-width: 58px;
height: 58px;
}
}
.marketing__blockTable {
padding: 0;
}
}
</style>