Table of content

Playground

Link to a section with in the same page

Jhansi Tavva

2018-05-25 - GSites Forum

How do I create a link to a different section in the same page in New Sites?

Like a Table of contents gadget in the Classic sites.

My Answer

You always have the possibility to insert a code embedding with custom HTML, which has no limitation in that directions, but you need to consider, that every content in those embeddings won't be recognized in SERPs / indexed by search engine

https://sites.google.com/steegle.com/2016/google-sites/how-to/insert-custom-code
try and check this example code on w3schools: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_a_name
Make sure to insert "target="_self", so the corresponding line of code looks like this:
- <a href="#C4" target="_self">See also Chapter 4</a
Note: If you insert a link to another page of your website, it will still open in a new tab/window.
- Background info: https://productforums.google.com/d/msg/sites/o9Teb_IWQvg/Kb2UfmJvCgAJ

Test anchors within a HTML Box

Links to test with(out) different _target methods

Link testing within a text box first:

HTML reference: https://www.w3schools.com/tags/att_a_target.asp

new window

Go to startpage: https://sites.google.com/view/gsites-advice-playground/

new window

The same redirected: http://playground.gsites-advice.ga

new window

Internal link: Go to startpage

same window

This is the code

<!DOCTYPE html>

<html>

<head>

  <style>ul, p {padding-bottom: 500px;}</style>

</head>

<body>

<h2><a name="top">TOC</a></h2>

<ul>

<li><a href="#C1" target="_self">See Chapter 1</a>

<li><a href="#C2" target="_self">See Chapter 2</a>

<li><a href="#C3" target="_self">See Chapter 3</a>

<li><a href="#C4" target="_self">See Chapter 4</a>

<li><a href="#C5" target="_self">See Chapter 5</a>

<li><a href="#C6" target="_self">See Chapter 6</a>

<li><a href="#C7" target="_self">See Chapter 7</a>

</ul>

<h2><a name="C1">Chapter 1</a></h2>

<p>You can't link from an external page to a chapter directly: <a href="https://sites.google.com/view/gsites-advice-playground/issues/table-of-content#c1">Test</a><br><a href="#top" target="_self">See TOC</a></p>

<h2><a name="C2">Chapter 2</a></h2>

<p><a href="https://sites.google.com/view/gsites-advice-playground/">Link only href no target works like this</a><br>page opens in new window<br><a href="#top" target="_self">See TOC</a></p>

<h2><a name="C3">Chapter 3</a></h2>

<p><a href="https://sites.google.com/view/gsites-advice-playground/" target="_blank">Link href target _blank works like this</a><br>page opens in new window<br><a href="#top" target="_self">See TOC</a></p>

<h2><a name="C4">Chapter 4</a></a></h2>

<p><a href="https://sites.google.com/view/gsites-advice-playground/" target="_self">Link href target _self works like this</a><br>page does not open<br><a href="#top" target="_self">See TOC</a></p>

<h2><a name="C5">Chapter 5</a></h2>

<p><a href="https://sites.google.com/view/gsites-advice-playground/" target="_parent">Link href target _parent works like this</a><br>page does not open<br><a href="#top" target="_self">See TOC</a></p>

<h2><a name="C6">Chapter 6</a></h2>

<p><a href="https://sites.google.com/view/gsites-advice-playground/" target="_top">Link href target _top works like this</a><br>page does not open<br><a href="#top" target="_self">See TOC</a></p>

<h2><a name="C7">Chapter 7</a></h2>

<p>Link to TOC only works when specifing target="_self", otherwise it doesn't work, even if this method should be standard, when no target is specified (see HTML reference at the top)<br><a href="#top">See TOC (faulty link)</a></p>

</body>

</html>