Sitefinity SEO Tips – How to increase your Text/HTML ratio

We are certain that marketers and designers are often left scratching their heads as to how they can get more text content on their webpages to improve their SEO rankings, without creating too much clutter.

Our latest video shows how to create a Sitefinity module that allows you to display a portion of your text and gives your site visitor the option to view the full text content.

Code Snippet:

@model Telerik.Sitefinity.Frontend.Mvc.Models.ContentDetailsViewModel
@using Telerik.Sitefinity.Frontend.Mvc.Helpers;
<div class=”@Model.CssClass” @Html.InlineEditingAttributes(Model.ProviderName, Model.ContentType.FullName, (Guid)Model.Item.Fields.Id)>
<div class=”faded-text”>
<div class=”collapse faded-content” id=”dissolveReadmore-@Model.Item.DataItem.Id” aria-expanded=”false”>
@Html.HtmlSanitize((string)Model.Item.Fields.Content)
</div>
<div class=”faded-text-expand”>
<a class=”collapsed btn-link-accordian expand-button” data-toggle=”collapse” href=”#dissolveReadmore-@Model.Item.DataItem.Id” aria-expanded=”false” aria-controls=”collapseExample”>
</a>
</div>
</div>
</div>
<script type=”text/javascript”>
$(‘#dissolveReadmore-@Model.Item.DataItem.Id’).on(‘shown.bs.collapse hide.bs.collapse’, function (e) {
var $panel = $(this).closest(‘#dissolveReadmore-@Model.Item.DataItem.Id’).parent();
$(‘html,body’).animate({
scrollTop: $panel.offset().top
}, 500);
});
</script>

CSS

/***************************
Dissolving Texts
***************************/
.faded-text div.collapse[aria-expanded=”false”] {
display: block;
height: 200px !important;
overflow: hidden;
}

.faded-text div.collapse[aria-expanded=”false”]:before {
content: ”;
width: 100%;
height: 100%;
position: absolute;
left: 0;
max-height: 200px;
background: linear-gradient(transparent -50px, white);
}

.faded-text div.collapsing[aria-expanded=”false”] {
height: 40px !important;
transition: height 2s ease-in-out;
}

.faded-text a.collapsed:after {
content: ‘Continue reading’;
}

.faded-text a:not(.collapsed):after {
content: ‘Show Less’;
}

.faded-text .faded-text-expand {
padding-top: 35px;
padding-bottom: 35px;
text-align:center;
}