Dear Umbraco Examine experts

I have built, on top of OOTB Umbraco search, a custom Index to search descendants from a certain node, i.e searchable path. I am able to display key/value as desired i.e

<ul>
    @foreach (var result in searchResults)
    {
        <li>
            @{
                foreach (var field in result.Fields)
                {
                    <div class="row">
                        @if (field .Key == "nodeName")
                        {
                           <div class="col">
                               @f.Value;
                            </div>
                        }
                        @if (field .Key == "urlName")
                        {
                            <div class="col">
                                <a href="@field .Value">@field .Value;
                            </div>
                        }
                    </div>
                }             
            }
        </li>
    }
</ul>

How can i render the correct link to an item from the search results ?

<a href="@field.Value">@field.Value

the above renders the urlName and appends it to the search results page. i.e http://my.domain.com/search/field-value-url.

I would like it to render like @field.Url, which gives you the correct url to the item.

Thanks Dibs